I am trying to add active states for my custom menu navigation, but so far everything I try is just not working. I have set the navigation menu in a separate file nav.php, then I included the nav.php into my header.php file like this:
<?php include('nav.php'); ?>
I created custom Wordpress pages in the child folder and included the header.php just after the template name:
<?php /* Template Name: Website Design Page*/
?>
<?php get_header(); ?>
Here is my current html and php code in my nav.php and I added a unique id attribute "currentpage" to indicate which menu item reflects the user’s current page:
<ul id="menu" class="clearfix">
<li<?php if ($thisPage=="About")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/about" title="Welcome page" class="parent-link menu-item-2" id="main-menu-item-4">About</a></li>
<li<?php if ($thisPage=="Portfolio")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/portfolio" class="parent-link menu-item-3">Portfolio</a></li>
<li<?php if ($thisPage=="Services")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/services" class="parent-link menu-item-4">Services</a></li>
<li<?php if ($thisPage=="Prices")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/prices" class="parent-link menu-item-5">Prices</a></li>
</ul>
And this is my Css for hover and active states:
ul#menu li a:hover {
background-color: #999999;
color: #fff;
}
ul#menu li #currentpage a {
background: #fff;
color: #333;
}
For each pages I assigned the value after the template name, here is my Home page:
<?php /* Template Name: Website Design Page
*/
?>
<?php $thisPage="Home"; ?>
<?php get_header(); ?>
I hope somebody will be able to help, I really don't undestand why this code or any other php code i try I cannot make these custom menus work.
{}
sign just above the editor. This will add your code is a codeblock :-)$thisPage
global if you're going to reference it in other files, see variable scope in php. You generally want to avoid making anything else global if you can avoid it. You're probably better off using built in WordPress tools for the menus as suggested by @Dan's answer.