ThemeShaper Forums » Thematic


CSS targetting current page item

(7 posts)
  • Started 11 years ago by proto
  • Latest reply from MH
  • This topic is not resolved


  1. proto

    The CSS styling for my currently viewed menu link, doesn't work, but confusingly only my blog page.

    Currently, it's setup to be underlined and the text appears in a light brown colour on the active page. This works on all my pages, other than the blog page. I've tried inspecting the element and targeting the CSS a number of times (see my style.css file) so that the active menu item is light brown and underlined. What's more confusing is that the same CSS is working fine for every other current page item active link on other pages.

    The website is here: (this is blog page where the underline and brown colour of the link does not show on the currently viewing page but notice how all other links show you what the active page is by being underlined and light brown in colour). Any advice appreciated on what I'm missing!

    Thanks in advance all :)

    Posted 11 years ago #
  2. MH

    I have a very similar problem which I'm sure requires the same fix, so I posted this here in case it throws any more light on the problem.

    My site has a static Home page, a Blog page (with posts) and a News page displaying custom post types of type 'news'. My attempt to highlight the current menu item blue is as follows:

    .aside .current-custom-item a,
    .aside .current-menu-item a,
    .aside .current-menu-parent a,
    .aside .current-menu-ancestor a,
    .aside .current-post-ancestor a,
    .aside .current_page_item a,
    .aside .current_page_ancestor a,
    .aside .current_page_parent a {

    This works fine on all menu items except the News page, which highlights the 'Blog' menu item rather than the 'News' menu item!

    I created the News page as follows:

    1) Copied template-page-blog.php from Thematic to my Child Theme folder and renamed to template-page-news.php.

    2) Edited the comment at the top of the file to:

    * Template Name: News
    * This template allows you to display the latest news posts on any page of the site.

    3) Edited the query in the file to:

    $wp_query->query( array( 'posts_per_page' => get_option( 'posts_per_page' ), 'paged' => $paged, 'post_type' => array('news', 'attachments') ) );

    (NB: 'attachments' was required otherwise all the images in the custom news posts didn't appear)

    It seems like what is missing is some way of 'telling' my news page template that it is not the main posts page but a custom post type page... This is my first WordPress and Thematic site so I could have missed something basic here!

    Thanks in advance for any help. 8-)

    Posted 11 years ago #
  3. proto

    Hi MH,

    Can you post your website. I could have a look?



    Posted 11 years ago #
  4. MH

    Sorry, its running on localhost at present. Do you want me to post anything specific?

    Posted 11 years ago #
  5. proto

    Hello MH,

    No problem, I was going to take a loot at with firebug and see if there was some strange anomaly. Have you tried including a reference to the parent in your before the class id in your CSS? (but replace the example I give below with the correct parent div), eg, for my website it's:

    #page-top .current_page_item a

    Just thought it's worth a try?

    If you're website's like mine it didn't unfortunately work with mine but thought I'd suggest if for you...

    Anyone else reading this please do chip in with some thoughts! Thanks :)

    Posted 11 years ago #
  6. middlesister

    Well the current-menu-item and current_page_item are the correct classes to target, the question is if they are added to the correct menu item by wordpress.

    @MH: If you are using WP 3.2 or later, you do not need a page template to have an archive of your CPT. If you are using permalinks, they address would be Unfortunately, there is no button to click in the menu screen to add your archive page to your menu, but if you add the address as a custom link it will still work as intended and get the current-menu-item class.

    Posted 11 years ago #
  7. MH

    @proto: thanks for your suggestion but I'm afraid, like on your site, it didn't work. 8-(

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.