title: Set active state on navigation dynamically
body: <p>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.</p>
  
  <p>How can I dynamically set the activate state to work for each page? </p>
  
  <p>Here is my current nav code:</p>
  
  <pre><code>&lt;nav id="main-menu" class="padbot"&gt;
  &lt;ul id="ce"&gt;
      &lt;li class="cemenu"&gt;&lt;a href="&lt;?php echo $base_url;?&gt;/about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li class="cemenu"&gt;&lt;a href="&lt;?php echo $base_url;?&gt;/consulting"&gt;Consulting&lt;/a&gt;&lt;/li&gt;
      &lt;li class="cemenu"&gt;&lt;a href="&lt;?php echo $base_url;?&gt;/intelligence"&gt;Intelligence&lt;/a&gt;&lt;/li&gt;
      &lt;li class="cemenu"&gt;&lt;a href="&lt;?php echo $base_url;?&gt;/academy"&gt;Academy&lt;/a&gt;&lt;/li&gt;        
      &lt;li class="cemenu"&gt;&lt;a href="&lt;?php echo $base_url;?&gt;/blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li class="cemenu"&gt;&lt;a href="&lt;?php echo $base_url;?&gt;/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p>Example: </p>
  
  <pre><code>&lt;li class="cemenu active"&gt;&lt;a href="&lt;?php echo $base_url;?&gt;/about"&gt;About&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Thanks!</p>