Set active state on navigation dynamically - php

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">About</li>
<li class="cemenu">Consulting</li>
<li class="cemenu">Intelligence</li>
<li class="cemenu">Academy</li>
<li class="cemenu">Blog</li>
<li class="cemenu">Contact</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">About</li>
Thanks!

Answer 1

you could try something along the lines of
<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>">About</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"' : '' ?>>
<?php echo $page ?>
</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 :)

Answer 5

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

Answer 6

You could use preg_replace() to add class="active" like this:
ob_start();
echo '<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);