0

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.

Improve this question
4
  • Missing much code, such incomplete, wow - please edit the question so we can help. Cheers.
    – skim-
    Jan 13, 2015 at 17:48
  • Just as tip, when you add code in the editor, highlight your code and click on the {} sign just above the editor. This will add your code is a codeblock :-)
    – Pieter Goosen
    Jan 13, 2015 at 18:03
  • You need to make $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.
    – Andrew Bartel
    Jan 13, 2015 at 18:23
  • Thanks a lot. I really appreciate your effort and the reference link you send for documentation. Yes, indeed, I believe it's better to use WordPress build in tools and hook into my styles to get the desired effects.
    – Steven Donea
    Jan 15, 2015 at 20:32

4 Answers 4

Reset to default
0

In your PHP file, set $thisPage before you include('nav.php');. Then, the variable $thisPage will be passed to nav.php and processed in its if statement.

This is really bad practice though, and a better way of doing it would be by creating your menu in WordPress itself and hooking it into your template. WordPress documents how to do this well.

Improve this answer
0
1

If your theme is using wp_nav_menu() you will have the class current-menu-item added to the relevant <li> element for you. Does this help?

Improve this answer
4
  • Hi Dan, it is a custom menu with the id #menu, but I now changed it to wp_nav_menu and also made changes to css. Should I delete also this php code from all buleted li: <?php if ($thisPage=="About") echo " id=\"currentpage\""; ?>
    – Steven Donea
    Jan 13, 2015 at 18:23
  • Why don't you just use the wp_nav_menu() function instead of manually making your menu?
    – Dan
    Jan 14, 2015 at 12:39
  • Hi Dan, you are right about using wp_nav_menu() function, rather than taking the hassle to manually make one. So I added the wordpress navigation back and I have this: <div id="access" role="navigation"> <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> </div> now the only problem is when I get into styling the menus, first of all I cannot make it the menus float to right.
    – Steven Donea
    Jan 15, 2015 at 0:19
  • You will probably need to change your CSS selectors to work with the HTML that Wordpress makes for you. Normally the <ul> element has a class of "menu", not an id like your code example.
    – Dan
    Jan 15, 2015 at 9:38
0

What I would do is remove all that code you have in nav.php displaying the menu, create the menu inside the Wordpress backend, then you'll be able to use .current-menu-item in your css.

Then all you need to call the menu will be wp_nav_menu();

Here is the documentation for that function:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

Improve this answer
0

I have deleted the nav.php file from my header.php, and added back the old menu code that comes with Wordpress. I did some hooking into my style.css file to adjust the styles for the desired design and I only used the #menu-navmenu that I created in WordPress to float right my menu bar.

ul#menu-navmenu{float: right;}

So before I had this ul#menu {float: right; margin: 15px;}

and now I added 15px margin to this code in wordpress style.css template:

#access .menu-header ul,
div.menu ul {
    list-style: none;
    /*margin: 0;*/margin: 15px;
}

Everything works as expected and thank you for all your help in this matter, this is a great WordPress community.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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