Dynamic menu highlighting with WordPress

I’ve been searching for a way to highlight the current page that’s being viewed, WordPress does this automatically, it applies a class style named class=”page_item” for every WordPress Page and a class name class=”current_page_item” for the, yes you guessed it, the currently selected page.

So all you need to do is style those two classes to have a different look, and your viewers will be able to know what page they’re on. ex: “about, help, contact”, you can simply add these classes in your style.css, to see the effect:

.page_item {
background-color:#ccc;
color:#000;
}

.current_page_item {
background-color:#000;
color:#fff;
}

But why isn’t my “home” page highlighted? Unfortunately the home page is not a WordPress page , there fore it doesn’t do the page check and assign “current_page_item” style to the menu item. I couldn’t find this information or tutorial to make the home menu item highlight.

Through some searching and experimenting, I found a simple way to do it:

<?php if (is_home()): ?>
<li class="current_page_item"><a href="<?php echo get_settings('home');?>">Home Page</a></li>
<?php wp_list_pages('title_li='); ?>
<?php else : ?>
<li><a href="<?php echo get_settings('home'); ?>">Home Page</a></li>
<?php wp_list_pages('title_li='); ?>
<?php endif; ?>

The above code basically checks to see if the if the current page is the home page, if it is, it will assign the “current_page_item” style to the home menu item, if not, it obviously won’t.

of course there are other ways to do this, some themes like blix already have this feature setup, but for a non-programmer like me, it’s good to know the simple ways of doing it, so it can be applied to your current theme.

You can find alternative ways and more information of similar nature on the wordpress site.

3 thoughts on “Dynamic menu highlighting with WordPress

  1. HektikLyfe

    Hello, thanks for the informative post.

    I use a different theme and for some reason modifying the css doesn’t work.

    It highlights them when I mouseover but not when it is the main page.

    Any more ideas?

  2. Administrator Post author

    the visual effect, might be different depending on the theme you use, some themes might not use default css styles. the blix theme uses the following code to highlight the selected menu item:

    <ul>
        <li><?php if (is_home()) echo " class=\"selected\""; ?>><a xhref="<?php bloginfo('url'); ?>">Home</a></li>
        <?php $pages = BX_get_pages();
            if ($pages) {
                foreach ($pages as $page) {
                $page_id = $page->ID;
                $page_title = $page->post_title;
                $page_name = $page->post_name;
                if ($page_name == "archives") {
                    (is_page($page_id) || is_archive() || is_search() || is_single())?$selected = ' class="selected"':$selected='';
                    echo "<li".$selected."><a xhref=\"".get_page_link($page_id)."\">Archives</a></li>\n";
                }
                elseif($page_name == "about") {
                    (is_page($page_id))?$selected = ' class="selected"':$selected='';
                    echo "<li".$selected."><a xhref=\"".get_page_link($page_id)."\">About</a></li>\n";
                }
                elseif ($page_name == "contact") {
                    (is_page($page_id))?$selected = ' class="selected"':$selected='';
                    echo "<li".$selected."><a xhref=\"".get_page_link($page_id)."\">Contact</a></li>\n";
                }
                elseif ($page_name == "about_short") {/*ignore*/}
                else {
                    (is_page($page_id))?$selected = ' class="selected"':$selected='';
                    echo "<li".$selected."><a xhref=\"".get_page_link($page_id)."\">$page_title</a></li>\n";
                }
            }
        }
    ?>
    </ul>

    in this case you would modify the class ".selected" from the stylesheet, to modify the look.

  3. childsdesign

    Hi,

    First of all thanks for the tip off with the page_item and current_page_item styles, I had no idea it was that easy to do!

    However, could you please tell me where I should add the php code you have on this page which checks to see if the current page is the homepage and highlight it accordingly?

    I’ve tried adding it on both my header.php and sidebar.php and it messes up my site on both files.

    Any ideas?

    Thanks,
    Sam 🙂

Leave a Reply