Set active state on navigation dynamically
css, javascript, jquery, php, wordpress
Solution
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>
Problem
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!