5

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!

1
  • Thanks for the awesome question! #DIY all da way!
    – 0bserver07
    Jun 18 '13 at 1:04
7

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>
6
  • Hey Pete, this is almost working. For some reason, your: <?php echo $_SERVER['PHP_SELF']; ?> is returning /index.php rather then /about Feb 21 '13 at 15:33
  • ah are you using url rewriting?
    – Pete
    Feb 21 '13 at 15:34
  • Hmm, in Wordpress I changed my permalinks to Post name Feb 21 '13 at 15:36
  • This is the URL in the address bar: /ibis/website/about/ but it's returning as: /ibis/website/index.php for all pages. Feb 21 '13 at 15:36
  • 1
    try $_SERVER['REQUEST_URI'] or do a print_r($_SERVER) to see which variable matches best - it's been a while since I did php!
    – Pete
    Feb 21 '13 at 15:37
5

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

1
  • Oh great, Glad to see that you got the solution for your issue. Thanks for the consideration.
    – Jai
    Feb 21 '13 at 15:44
1

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 :

1

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

0

You could use preg_replace() to add class="active" like this:

ob_start();
echo '<ul>
  <li><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  </ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);
0

You can try like this

<li class="<?php 
                if($this_page=='Home'){
                     echo 'active';
                }
          ?>">
      Home
 </li>
<li class="<?php 
                if($this_page=='Contact'){
                     echo 'active';
                }
          ?>">
      Contact
 </li>

And then in your home page

$this_page='Home';

And in your contact page

$this_page='Contact';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.