Fire Studios

One of the most common features on any blog or website is category highlighting showing you which category you're in or the page is in. Wordpress, by default, does not have a function to do this. Thus it's up to us developers to write our own custom functions to do this, and that's exactly what's I'm going to be teaching you in this tutorial.

Overview:

Here's a quick list of everything that our menu function will be able to do once we're finished.

• Display all categories
• Exclude categories
• Highlight current category/categories

Step 1: Prep

Our first step is to open our theme's functions.php and header.php. Inside functions.php create a new function we'll call "category_menu".

function category_menu(){
    // our code here
}

And we'll reference this function in header.php in the menu section.

<div id="menu">
    <div class="mainwidth">
        <?php category_menu(); ?>
    </div>
</div><!-- #menu -->

Step 2: Basics

Let's start our function by echoing some standard HTML to build an unordered list.

function category_menu(){
    echo '<ul id="cat_menu">';

    echo '</ul>';
}

Next we'll gather all the category IDs so that we can loop through each of them in the next part.

$ids = get_all_category_ids();
foreach($ids as $id){
    // stuff
}

Now we'll gather some info about each of the categories to place in the HTML later.

foreach($ids as $id){
    $name = get_cat_name($id);
    $lowercase_name = strtolower($name);
    $slug = get_category_slug($id);
    $link = get_category_link($id);
}

Once we have all the info, we can echo out a list-item with a link to the category.

foreach($ids as $id){
    $name = get_cat_name($id);
    $lowercase_name = strtolower($name);
    $slug = get_category_slug($id);
    $link = get_category_link($id);

    echo '<li id="cat-'.$id.'" class="cat-item cat-item-'.$id.' '.$name.' '.$lowercase_name.' '.$slug.'"><a href="'.$link.'" title="'.$name.'">'.$name.'</a></li>';
}

Step 3: Excluding

In the overview I said that we would be excluding certian categories from the list, and to do this we're simply going to add an if statement that checks the ID against the ID we don't want to show up, then we'll tell it to continue which will skip that ID from the rest of the foreach statement.

foreach($ids as $id){
    if($id == '35'){
        continue; //skips rest of foreach
    }

    $name = get_cat_name($id);
    $lowercase_name = strtolower($name);
    $slug = get_category_slug($id);
    $link = get_category_link($id);

    echo '<li id="cat-'.$id.'" class="cat-item cat-item-'.$id.' '.$name.' '.$lowercase_name.' '.$slug.'"><a href="'.$link.'" title="'.$name.'">'.$name.'</a></li>';
}

If you want to exclude multiple categories, just place them all in an array then use the function in_array() to determine if it's to be excluded.

$exclude = array('35','63','88');
foreach($ids as $id){
    if(in_array($id, $exclude)){ // use with muiltiple categories to exclude
        continue; // skips rest of foreach
    }
}

Step 4: Highlighting

The next thing we need our funtion to do is to highlight certian categories when they are being viewed, or a post in them is being viewed. To do this we'll use an if/else statement to check if the current category ID is the category being viewed (is_category()) or listed in the post (in_category()). If either of these checks proves true, we'll echo in some extra classes("active" and "current-cat" since they're the most common in themes).

if(is_category($id) || in_category($id)){
    echo '<li id="cat-'.$id.'" class="cat-item cat-item-'.$id.' '.$name.' '.$lowercase_name.' '.$slug.' active current-cat"><a href="'.$link.'" title="'.$name.'">'.$name.'</a></li>';
}
else{
    echo '<li id="cat-'.$id.'" class="cat-item cat-item-'.$id.' '.$name.' '.$lowercase_name.' '.$slug.'"><a href="'.$link.'" title="'.$name.'">'.$name.'</a></li>';
}

The Final Code

That's it! It took us 24 lines of code to write this function, but now you have a completely working category menu for your site! Don't forget to share this post if you found it useful or informative.

function category_menu(){
    echo '<ul id="cat_menu">';
    $ids = get_all_category_ids();
    // $exclude = array('35','63','88');
    foreach($ids as $id){
        if($id == '35'){
            continue; //skips rest of foreach
        }
        /* if(in_array($id, $exclude)){ // use with muiltiple categories to exclude
            continue;
        } */

        $name = get_cat_name($id);
        $lowercase_name = strtolower($name);
        $slug = get_category_slug($id);
        $link = get_category_link($id);
        if(is_category($id) || in_category($id)){
            echo '<li id="cat-'.$id.'" class="cat-item cat-item-'.$id.' '.$name.' '.$lowercase_name.' '.$slug.' active current-cat"><a href="'.$link.'" title="'.$name.'">'.$name.'</a></li>';
        }
        else{
            echo '<li id="cat-'.$id.'" class="cat-item cat-item-'.$id.' '.$name.' '.$lowercase_name.' '.$slug.'"><a href="'.$link.'" title="'.$name.'">'.$name.'</a></li>';
        }
    }
    echo '</ul>';
}