So here is another quick WordPress tutorial that will help deal with ‘post categories’. WordPress posts can be broken into categories so that if you have some posts marked as ‘pet related’ and some posts as ‘human related’ you could mark them as such. Usually most theme will have something like a ‘category xxx’ beneath each post so you knew what that post was related to.
Now If you want to filter your posts by category without using a widget or built-in-menu you can add your own custom menu anywhere you want. There are two important features built into the WordPress API that will help you with this. The first one is a function you could find from the wordpress api wp_list_categories and the custom css class built into wordpress current-cat (look at my css to see my implementation).
What you want to do if you want this on particular pages is to use a custom template where you use the function like I did below, or do what I did and add this code directly to your index.php file then check your URL with PHP to see if you want to display or not. In this case I only want to display on the page cavanaugh.pro/sean/news (my main blog page) and cavanaugh.pro/sean/category/”anything can be here”. I want it displayed on every category page. I used the php function substr to cut my url down to just the first 10 characters. I.E. www.cavanaugh.pro/sean/category/blahblahblah is shortened to www.cavanaugh.pro/sean/category/. The cavanaugh.pro/sean part is never used here. If you want the whole URL check my post here. Please comment below so I know how to improve this how-to.
<?php
$sean_url=$_SERVER['REQUEST_URI'];
$sean_url=substr($sean_url, 0, 10);
if($sean_url=='/news/')
{
echo "<div id='custom_category_menu'>
Categories: <u>All</u>";
wp_list_categories('orderby=name&title_li=');
echo "</div>";
}
else if ($sean_url=='/category/')
{
echo "<div id='custom_category_menu'>
Categories: <a href='/news/'>All</a>";
wp_list_categories('orderby=name&title_li=');
echo "</div>";
}
else
{
//not a category or blog page
}
?>
and here is the css
#custom_category_menu{
text-transform:uppercase;
background-color:#777777;
background-image:-moz-linear-gradient(center bottom , #666666, #7F7F7F);
-moz-linear-gradient(bottom,#666,#7F7F7F);
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding:6px;
margin: 5px 0 5px 0;
font: 11px Arial,Verdana,sans-serif
}
#custom_category_menu li{
border-right: 1px solid #686868;
border-left: 1px solid gray;
display:inline;
list-style:none outside none;
padding:0 4px 0 4px;
}
#custom_category_menu li.current-cat a {
color:#ffffff;
text-decoration:underline;
}