[How-To] – Menu: Highlight Current Page.

How about trying:

#headmenu li.current_page_item a, {
text-decoration:none; color:#fff; background:#000;
}

li.current_page_item selects the current page
li.current_page_ancestor selects pages which are an ancestor of the current page
li.current_page_parent selects pages which are a parent of the current page
Hope that helps!

Hello tomontoast!

Thanks! I’ve tried out your solution. It works like a charm for all the page buttons. But, what I guess what I forgot to mention was that the first ‘button’ in the nav bar is relative to the posts portion of the blog. It’s the ‘home’ or default… ‘page’ for lack of a better word.

So, what happens when I’ve applied your solution is that when the site loads up, the ‘blog’ button (which refers to the posts area) is left looking unselected. However, when selecting the page buttons from that menu, the current selection displays as intended.

Conundrum!

Oh sorry forgot to look at your markup properly!
Try this:

<?php } else { ?>
        <ul>
                <li<?php if(is_home){ echo ' class="current_page_item" '}?>><a href="<?php echo get_settings('home'); ?>/"  title="blog">blog</a></li>
                <?php wp_list_pages('depth=1&sort_row=menu_order&title_li='); ?>

What it does is if the user is on the home page it adds the current_page_item class to the li. I haven’t tested it so I hope that works. If not post a link to your site and I’ll have a look.

Hello again!

I inserted that last bit of code and I got this error when trying to load the site:

Parse error: parse error, unexpected ‘}’, expecting ‘,’ or ‘;’ in /home/content/i/n/d/indecisiveian1/html/blog/wp-content/themes/isolated/header.php on line 74

You’ll have to forgive me, I’m fairly new at this and am learning as I go along. I have no clue what that means. My guess is that it’s a syntax sort of error? Anyway, you can see what’s happening, here.

Thanks again!

P.S. The current page CSS cod you provided earlier works in IE. I’m not sure what you’ll be browsing with, but it didn’t work in Chrome. Just letting you know in case you’re using Chrome or a similar browser.

Also, I reverted the menu code back to what it was so that you can view the page. The CSS you provided before is still incorporated though.

I’m so sorry I didn’t make myself clear enough in my previos post and that I haven’t got back to you sooner. I meant for you to insert that snippet into your existing markup like so:

<div id="headmenu">

<?php if (is_search() || is_404()) { ?>
        <ul>
                <li><a href="<?php echo get_settings('home'); ?>/" title="blog">blog</a></li>
                <?php wp_list_pages('depth=1&sort_column=menu_order&title_li='); ?>
        </ul>
<?php } else { ?>
        <ul>
                <li<?php if(is_home){ echo ' class="current_page_item" '}?>><a href="<?php echo get_settings('home'); ?>/"  title="blog">blog</a></li>
                <?php wp_list_pages('depth=1&sort_row=menu_order&title_li='); ?>
<?php
        if($post->post_parent)
                $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
                $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
        if ($children) { ?>

                <?php echo $children; ?>
                <?php } ?>
        </ul>
<?php } ?>

</div>

Also I investigated the CSS, turns out I’m acomplete idiot and made a stupid typo instead of

#headmenu li.current_page_item a, {
text-decoration:none;
color:#fff;
background:#000;
}

#headmenu li.current_post_item a, {
text-decoration:none;
colour:#fff;
background:#000;
}

should be

#headmenu li.current_page_item a {
text-decoration:none;
color:#fff;
background:#000;
}

#headmenu li.current_post_item a {
text-decoration:none;
colour:#fff;
background:#000;
}

I hope that helps!

Hello again tomontoast,

No problem about the delay! The updated CSS you provided works great in Chrome now, thanks a bunch.

I tried out that new markup you provided for the header.php file. Unfortunately, it causes the same parse error, though on different lines. I’ll keep trying a bit later, I just wanted to give you an update.

Thanks again!

I’ve looked over that code I posted and there is a small typo try:

<div id="headmenu">

<?php if (is_search() || is_404()) { ?>
        <ul>
                <li><a href="<?php echo get_settings('home'); ?>/" title="blog">blog</a></li>
                <?php wp_list_pages('depth=1&sort_column=menu_order&title_li='); ?>
        </ul>
<?php } else { ?>
        <ul>
                <li<?php if(is_home){ echo ' class="current_page_item" ';}?>><a href="<?php echo get_settings('home'); ?>/"  title="blog">blog</a></li>
                <?php wp_list_pages('depth=1&sort_row=menu_order&title_li='); ?>
<?php
        if($post->post_parent)
                $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
                $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
        if ($children) { ?>

                <?php echo $children; ?>
                <?php } ?>
        </ul>
<?php } ?>

</div>

Just forgot to put in a semicolon!

@tomontoast (or anyone else who might know),

With wordpress 2.7, I’m using wp_list_categories in my main nav menu. Is there a way to check to see if a post is an ancestor of a link in the menu, then set a current class for the li in the menu?

I already posted about this, and I hate to post in more than one place, but I just found this thread and you seem to be on your toes regarding this. Here’s the other thread: https://www.ads-software.com/support/topic/275401?replies=2#post-1089866

Thanks,
Gary

I am having a similar problem. Anyone that can help I greatly appreciate it. I also want the current page to be highlighted. Here is the code I am using in my header template: (I have also used plugins which I talk about below the code.

<div id="mainnav">
<ul id="mainnav">

        <li<?php
                if (is_home())
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>">Home</a>
        </li>
          <li<?php
                if (is_page('about'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/about">About</a>
        </li>
          <li<?php
                if (is_page('lessons'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/lessons">Lesson Pricing</a>
        </li>
          <li<?php
                if (is_page('student-gallery'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/student-gallery">Student Gallery</a>
        </li>
           <li<?php
                if (is_page('blog'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/blog">Blog</a>
        </li>
           <li<?php
                if (is_page('contact'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/contact">Contact</a>
        </li>
</ul></div>

It works fine for every page except the blog page which is my “posts page.” I have tried using the plugins Menu Maker and WP Menu Manager and get the exact same result. The problem I am having is when you navigate to the the blog page (where the posts are) it isn’t getting recognized as a “current page.” I have checked this with Firebug. FYI, I am not having problems with the CSS, as every page but my blog page (posts page) is highlighted when current.

I also have a similar problem with breadcrumbs. Everything comes up on the breadcrumbs except the blog page, which is the posts page. When I navigate to the blog page, the breadcrumbs indicate I am on the home page.

I am absolutely stumped. Again, your help is greatly appreciated.

?? !!!! Fixed it! Thank you for your help!

The code now is:

<ul>
<li<?php
                if (is_front_page())
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>">Home</a>
        </li>
          <li<?php
                if (is_page('about'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/about">About</a>
        </li>
          <li<?php
                if (is_page('lessons'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/lessons">Lesson Pricing</a>
        </li>
          <li<?php
                if (is_page('student-gallery'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/student-gallery">Student Gallery</a>
        </li>
           <li<?php
                if (is_home())
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/blog">Blog</a>
        </li>
           <li<?php
                if (is_page('contact'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/contact">Contact</a>
        </li>

</ul>

Thanks again!

Tomontoast:

You ROCK. Thank you so much for this code.

Tomontoast –

Thanks for the elegant code !