Set active state on navigation dynamically

Question

I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all pages, I cannot hardcode my active menu state for each page.

How can I dynamically set the activate state to work for each page?

Here is my current nav code:

<nav id="main-menu" class="padbot">
<ul id="ce">
    <li class="cemenu"><a href="<?php echo $base_url;?>/about">About</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/consulting">Consulting</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/intelligence">Intelligence</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/academy">Academy</a></li>        
    <li class="cemenu"><a href="<?php echo $base_url;?>/blog">Blog</a></li>
    <li class="cemenu"><a href="<?php echo $base_url;?>/contact">Contact</a></li>
 </ul>

I've already setup a CSS class called "active" that has my active state properties. Ideally, what I'm looking for is when your on the "About" page (or any of the other pages), the class I created for the active state will be appended to the current li classes's.

Example:

<li class="cemenu active"><a href="<?php echo $base_url;?>/about">About</a></li>

Thanks!

Answer 1

you could try something along the lines of

<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>"><a href="<?php echo $base_url;?>/about">About</a></li>

Answer 2

You can do this way:

This will add the active class to the <a> which contains the page from the url.

$(function(){
   var url = window.location.href;
   var page = url.substr(url.lastIndexOf('/')+1);
   $('.cemenu a[href*="'+page+'"]').addClass('active');
});

and if you want to add class to its parent li the replace the last line to this and css class should be like this:

.active a{
      css 
      properties 
      for active li's a
}

 // using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active'); 

or

// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');

just tryout the fiddle here

Answer 3

First, there is a css pseudo class prepared for styling 'active' links :

a:active {css}

For your situation, you would have to add this class to your styling :

.active a, a:active {css}

But your needs seems more on the PHP side than the CSS, perhaps someone else will help you with that part. There would be a javascript solution with jQuery, finding the actual location then inject a css selector to the proper element.

Check this article and this other one about wordpress. It will help you.

Stack Overflow references :

• How do I target each menu different items on active state in Wordpress
• How to add Active states and icons in wordpress wp_nav_menu()
• Loosing Nav Active State in Wordpress Dynamic Menu
• google search

Answer 4

try something like this:

<?php $pages = array('about' => 'About Us', 'blog' => 'blog') ?>

<ul>
<?php foreach($pages as $url => $page): ?>
    <?php $isActive = $_SERVER["REQUEST_URI"] == $url ?>
    <li<?php echo $isActive ? ' class="active"' : '' ?>>
        <a href="<?php echo $base_url . "/{$url}" ?>"><?php echo $page ?></a>
    </li>
<?php endforeach ?>
</ul>

It may be worth looking into using wordpres functions such as get_page_link which would be nicer than using the Server super global as that's not nice. This would also fail if you have wordpress in a folder and not the document root, it's just a simple example to get you started :)