WordPress › Support » [How-To] - Menu: Highlight Current Page.

Curious11
Member
Posted 3 years ago #

Hi there!

I've spent a lot of time trying to figure this out and for the life of me just can't do it. I hope you can help!

Essentially, I am looking to make my nav bar more user friendly and offer current page feedback. So, what I want to do is have the the current page's 'button' to be highlighted when an individual has selected that particular page. I want it to use the same colours as when hovered on.

This is the code for the menu:

<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><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>

And this is the current CSS is for that menu:

#headmenu a {
         color:#000;
         background:#fff;
         padding:3px 10px 2px 10px;
         margin:0 0px 0px 0px;
         line-height:21px;
         border: 2px solid black;
         border-width: 3px 3px 3px 3px;

}

#headmenu a:hover {text-decoration:none; color:#fff; background:#000;}
#headmenu ul {margin-left;}
#headmenu ul li {float:left;
            list-style-type:none;
}

Any suggestions?

tomontoast
Member
Posted 3 years ago #
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!
Curious11
Member
Posted 3 years ago #

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!
tomontoast
Member
Posted 3 years ago #
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.
Curious11
Member
Posted 3 years ago #

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.

tomontoast
Member
Posted 3 years ago #

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!

Curious11
Member
Posted 3 years ago #

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!

tomontoast
Member
Posted 3 years ago #

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!

gw468
Member
Posted 2 years ago #

@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: http://wordpress.org/support/topic/275401?replies=2#post-1089866

Thanks,
Gary

cousti
Member
Posted 2 years ago #

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.

cousti
Member
Posted 2 years ago #

:) !!!! 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!

carrieduncan
Member
Posted 2 years ago #

Tomontoast:

You ROCK. Thank you so much for this code.
robmello
Member
Posted 2 years ago #

Tomontoast -

Thanks for the elegant code !

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] [How-To] - Menu: Highlight Current Page. (13 posts)

Topic Closed

About this Topic

Tags

Code is Poetry