I have fallen in absolute love with the WordPress 3.0x dynamic menu options. This has given WordPress another leverage in being the superior content management system.
I am currently working on a project using WordPress as the Content Management System. One of the requirements for this project was utmost flexibility of the system. Making the navigation easy to customize by the client meant activating the new wp_nav_menu(). For function/API reference, you can check http://codex.wordpress.org/Function_Reference/wp_nav_menu
Not until I got my hand dirty in the WordPress theming process did I realize that there was no room for assigning active classes on the codes dynamically. During my research I have come up with two solutions…at least till the WordPress team add support to this feature.
The first technique is to give your <body> an ID with the name of your current webpage, then using CSS to select the menu element.
Let me explain in ‘english’. Let’s say your is http://yourpage.com/about, you can give your <body> an ID of ‘about’. So it would look like this: <body id = “about”>
How would you do that dynamically?
In your header.php file, add this:
What this does eventually is removes everything from your URL save your ‘page name’. So http://yourwebsite.com/about.php will return ‘about’.
Next, in your CSS you can select the particular element:
body#about ul#extra-nav li.history a{ our_css_property: xxxx; }
Basically, what this does is it selects the anchor in the list item with a class called history under the ul with an ID of extra-nav that particularly belongs to the body tag called about. It then gives it property.
I got this idea from watching a CSS-tricks video. You may find it really explanatory.
Other Alternatives
There are actually many approaches to this. I guess it depends on your choice. I have also found these
- Andrew Turn’s jQuery for Active State navigation
- StackOverFlow: Handling active state in jQuery
- jQuery Active Menu Plugin
2 comments
Normally I do not learn post on blogs, however I would like to say that
this write-up very compelled me to take a look at and do so!
Your writing taste has been surprised me. Thank you, very nice article.
Hello are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create
my own. Do you require any coding expertise to make your own blog?
Any help would be greatly appreciated!