Anonymous User 4309634
(@anonymized-4309634)
I would like to know how to do this as well. Can’t seem to find a good explanation of how to target the current page/state. Would be great if someone has a good article/tutorial.
Thanks
Chloe.
first question – what menu?
page menu for instance has the class ‘current_page_item’ on the link to the current page, which you can use to style the link in the style.css. others are similar, check the codex for the corresponding links 😉
http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items
Its odd that there are 100 css sprite examples with not a single one showing how to make a menu item stay ‘current’ in WP.
I am sure my way is wrong in many ways, but it works for me!
1. Make your menu here: (its great)
http://lab.mattvarone.com/navbar/index.php
2. Place the css in your stylesheet, and the html where you want.
3. Read this, esp. about php: http://codex.wordpress.org/Dynamic_Menu_Highlighting
4. From matt’s css, carefully take out all styling for .current. eg:
ul#navigation li#navigation-1 a.current {
background-position: -120px 0px
}
and replace it with appropriate php in the header, (see “3”). EG:
<?php
if ( is_page('home') ) { $current1 = 'navigation-1 a'; }
elseif ( is_category('bla') ) { $current2 = 'navigation-2 a'; }
?>
etc.
I am sure someone smarter can show a better way, but no one has that I can find!
oops, forgot item 5!
5. In the header under the php in item 4, put in something like the following styling:
<style type="text/css">
ul#navigation li#<?php echo $current1; ?> {
background-position: -120px 0px;
}
ul#navigation li#<?php echo $current2; ?> {
background-position: -120px -39px;
}</style>
