On this website: http://jumpthru.net/newsite/vision/

I'm using CSS sprites for my navigation with PHP else claims to exhibit the active condition for that current page. All the pages will work correctly aside from the page that consists of the loop / blog posts ( http://jumpthru.net/newsite/commentary/)

Should i call the php in a different way with this page?

The PHP :

if ( is_page('vision') ) { $current1 = 'visionside a'; }
elseif  ( is_page('team') ) { $current2 = 'teamside a'; }
elseif  ( is_page('commentary') ) { $current3 = 'blogside a'; }
elseif  ( is_page('organizations') ) { $current4 = 'orgside a'; }

The CSS:

#sidebarnav ul#sidenav li.<?php echo $current1; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)  0px -106px !important;

#sidebarnav ul#sidenav li.<?php echo $current2; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png)  0px -106px !important;

#sidebarnav ul#sidenav li.<?php echo $current3; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png)  0px -106px !important;

#sidebarnav ul#sidenav li.<?php echo $current4; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png)  0px -106px !important;

Any help could be greatly appreciated!

I've got a solution that's a little diverse from what you're searching for, but is a far greater means to fix your work.



if ( is_page('vision') ) 
  $page = 'vision';
elseif ( is_page('team') )
  $page = 'team';
elseif ( is_page('commentary') )
  $page = 'blog';
elseif  ( is_page('organizations') ) 
  $page = 'org';


<body id="page-<?php echo $page; ?>">

Note about above PHP: Should you have had a get_page_id() function, you can simplify this much more. simply by getting <body id="page-<?php get_page_id(); ?>">


<ul id="sidenav">
    <li class="visionside"><a href="#">...</a></li>
    <li class="teamside"><a href="#">...</a></li>
    <li class="blogside"><a href="#">...</a></li>
    <li class="orgside"><a href="#">...</a></li>


body#page-vision #sidenav li.visionside a,
#sidenav li.visionside a:hover {

Note about above CSS: You will find two lines in the above list that you could style together - the present condition, and also the hover condition. This makes the present condition display whenever you hover within the nav, no matter which nav may be the "current" nav.

Simply because you are thinking about using CSS Sprites, I'd certainly suggest that you educate yourself on this article.