• # March 7, 2013 at 4:00 pm

    Okay, so currently, my menu is partially working. Here is my website. Home, Projects, Contact, Shop, and Support all have current navigational highlighting. I am using the same exact code, switching out the class names, for Blog and Forums, and yet, they do not highlight when you are on their respective pages. I can not figure out why. Also, if I select Feel Good Candy or Leaflet from the drop-down menu, it highlights the entire menu, beginning with Projects and ending with Leaflet. I need it to highlight the selected menu li and also highlight Projects, but not the other unselected menu li. Any suggestions?

    Here is my CSS code for the menu styles:


    .header-home a,
    .page .header-home a,
    .header-projects a,
    .page .header-projects a,
    .header-blog a,
    .page .header-blog a,
    .header-forums a,
    .page .header-forums a,
    .header-contact a,
    .page .header-contact a,
    .header-shop a,
    .page .header-shop a,
    .header-support a,
    .page .header-support a {
    color: #7B0046;

    .header-home a:hover,
    .page .header-home a:hover,
    .header-projects a:hover,
    .page .header-projects a:hover,
    .header-blog a:hover,
    .page .header-blog a:hover,
    .header-forums a:hover,
    .page .header-forums a:hover,
    .header-contact a:hover,
    .page .header-contact a:hover,
    .header-shop a:hover,
    .page .header-shop a:hover,
    .header-support a:hover,
    .page .header-support a:hover {
    color: #FFFEF2;
    } ul#main-navigation li.header-projects li.header-leaflet a:hover, ul#main-navigation li.header-projects li.header-feelgoodcandy a:hover {
    color: #7B0046;

    ul#main-navigation li a:hover, ul#main-navigation li.header-home a,
    body.parent-slug-projects ul#main-navigation li.header-projects a, ul#main-navigation li.header-blog a, ul#main-navigation li.header-forums a, ul#main-navigation li.header-contact a, ul#main-navigation li.header-shop a, ul#main-navigation li.header-support a,
    body.default ul#main-navigation li.header-home a, ul#main-navigation li.header-projects a, ul#main-navigation li.header-projects a, ul#main-navigation li.header-feelgoodcandy a, ul#main-navigation li.header-leaflet a {
    color: #FFFEF2;

    The help you guys give me is always greatly appreciated.

    # March 7, 2013 at 7:11 pm

    I’m just wondering why are you targeting each `a` within navigation, like so:

    .header-home a,
    .page .header-home a….


    #main-navigation li a {
    color: #7B0046;

    take care of all the links within `ul` element with `id` of `main-navigation`. Then you could do hover, like so:

    #main-navigation li a:hover {
    color: #FFFEF2;

    Are you generating main navigation via WordPress or are you hard coding? There should be a class of `.current-menu-item` and `.current_page_item` applied to corresponding link, when clicked.

    # March 7, 2013 at 7:38 pm

    `post-hello-world` shouldn’t be the only class that is showing on the body if you’re using the body_class() function.

    # March 7, 2013 at 7:44 pm

    That tutorial was posted in 2009.

    WordPress has since integrated much better navigation handling.

    What happens when you add a page or blog post… do you have to edit your templates to add corresponding code?

    # March 7, 2013 at 7:57 pm

    Something is not right if that’s the case. When you go to the blog page, you shouldn’t be getting the slug of the first post.

    # March 7, 2013 at 7:57 pm

    Maybe try killing the slug function you added to functions.php.

    # March 7, 2013 at 8:17 pm

    @TheDoc is right. I just tested on my local install. Out of the box WP has these classes applied to it’s body.

    When logged into admin:

    body class=”home blog logged-in admin-bar no-customize-support custom-font-enabled single-author”

    When logged out:

    body class=”home blog custom-font-enabled single-author”

    And when clicking on Sample Page, you get:

  • on navigation list items.

# March 7, 2013 at 10:02 pm

If you go to `wp-includes/post-template.php` on line 316 there is a function `get_post_class` that should be generating classes you need. For some reason this is not returning anything. You either changed some settings or something is broken. Did you add any custom functions to your `functions.php` file?

# March 7, 2013 at 10:04 pm

Wait. I just checked your site again and it works. It’s just not getting generated on `blog` page.

# March 8, 2013 at 12:51 pm

Aaaah could be.

In your WordPress settings (I think under ‘Reading’), select your ‘Blog’ page as your Home and ‘Home’ as your ‘front-page’.

# March 8, 2013 at 3:38 pm

The body_class should return classes that belong to specific page/post regardless if you have latest posts or static page selected.

Something is not working or you have configured settings/templates incorrectly.

I’ve tested with clean install of WordPress along with blank themes from [HTML5 Reset]( and [Bones](

You can try using [conditional statement]( `is_front_page()` to check if user is on Front Page then just output corresponding classed to the body. But this should not be necessary, `body_class()` should take care of this…

# March 8, 2013 at 8:12 pm

Just tested Starkers out of the box and it works both as static page and latest posts

# March 8, 2013 at 8:54 pm

Wait, wait… the `body_class()` is a WordPress function. It has nothing to do with CSS file. It simply outputs page, post, environment details to `body` html element so that you can target them in your style sheet. These “classes” are predefined by WordPress.

You could add custom classes, like so:


# March 8, 2013 at 9:16 pm

How is your theme structured? Are you using any custom templates for your blog? Are you altering something via filters/hooks in your functions.php file?

# March 8, 2013 at 9:32 pm

Ok lets do this:

1. Deactivate all of your plug-ins (reload the page, see if it works)
2. Then turn on plug-ins one-by-one, going back and refreshing after each activation to see if it works. This could be plug-in issue…

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.