Dynamic menu highlighting is a way to give visitors a reference point with which to navigate. Your visitors know where the current location is they are navigating on your site. PHP allows us to add the desired highlighting effect that reacts to whatever page is being viewed. Coupled with WordPress’s is_ functions, we can dynamically test what page is being viewed and then rewrite the code based on the results of that test.

The basic navigation list might look something like this:

<ul id="navigation">
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>

Here we’ll put in a few if statements. This will let PHP determine which page the user is on and allow it to put “current” in the right spot.

<ul id="navigation">
        <!-- To show "current" on the home page -->
        <li<?php 
                if (is_home()) 
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>">Home</a>
        </li>

        <!-- To show "current" on the Archive Page (a listing of all months and categories), individual posts, but NOT individual posts in category 10 -->
        <li<?php 
                if (is_page('Archive') || is_single() && !in_category('10'))  
                { 
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/archive">Archive</a>
        </li>

        <!-- To show "current" on any posts in category 10, called Design -->
        <li<?php
                if (is_category('Design') || in_category('10') && !is_single())
                {
                echo " id=\"current\""; 
                }?>>
                <a href="<?php bloginfo('url') ?>/category/design">Design</a>
        </li>

        <!-- To show "current" on the About Page -->
        <li<?php 
                if (is_page('About')) 
                { 
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/about">About</a>
        </li>
</ul>

Now we need to add some CSS that will style the highlight the appropriate list item based on what $current is. For example, do a simple highlight by adding a underline on the highlighted item. CSS might look like this:

#current {
text-decoration: underline;
}
</style>

With this method, you can create a dynamic highlight menu for homepage, single page, category page or any single post. Head over to WordPress Codex for further reference.

Do you like this post?

 Subscribe free via RSS, or by Email to get updates.