0

I have a WordPress site where I am adding a custom style to the main navigation based on whether the user is on that page. The articles section of my site has several articles within it that users can visit.

I use this css style as seen below which has the desired effect when the viewer is on the articles page, WordPress helpfully adds the current-menu-item class to the html markup:

#navigation li a:hover, #navigation li.current-menu-item a {
text-shadow: 1px 1px 2px red;
-webkit-transition: color 0.5s, text-shadow 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}

However I would like to keep this style applied to that top level item if the user is in a single article page. Is there a way of achieving this?

0

in your functions.php file add the following code:

if ( is_page( yourpage ) ) //yourpage can be your page's id, title or even slug
    wp_enqueue_style( 'path/to/your/custom/css/file' ); //your stylesheet path
elseif( is_page( yourpage ) ) //yourpage can be your page's id, title or even slug
    wp_enqueue_style( '2nd/path/to/your/custom/css/file' ); //your stylesheet path
else
   wp_enqueue_style( '3rd/path/to/your/custom/css/file' ); //your stylesheet path

see also: is_page and is_single

| improve this answer | |
  • Thankyou for your thoughts. the page type I would like to target with the css is codesingle-article.phpcode Is there a way I can do this? I'm unsure if is_page can handle a request like that? – Jonathan Beech Aug 7 '14 at 19:34
  • if want to findout the exact page template do this: <?php is_page_template( $template ); ?> see is_page_template – Mostafa Ghanbari Aug 8 '14 at 16:20
  • I don't follow? single-article.php is a single page with a custom post type of article. It isn't a page template. – Jonathan Beech Aug 9 '14 at 14:02
0

Ok I got the result I am after by targeting the css classes that WordPress adds to the menu, I would like a more elegant method using some WordPress inbuilt php functions but that seems to be beyond me

The "article" link in my primary navigation is as follows:

<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="http://www.jonathanbeech.dev/articles/">Articles</a></li>

Simply by targeting the class menu-item-269 combined with the unique class applied to the body of the single-articlephp page, I was able to keep the article link with a currently active style even when the user is within single child pages of the main article page.

so the css looks like this:

#navigation li a:hover, #navigation li.current-menu-item a, .single-article li.menu-item-269 a, .single-portfolio li.menu-item-191 a {
text-shadow: 1px 1px 2px red;
-webkit-transition: color 0.5s, text-shadow 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;

}

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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