WordPress Menu highlight with pagination

Question

I have a WordPress website with a menu similar to this one: Yahoo news, so basically:

a horizontal menu with two levels, the first with main categories the second with sub-categories (in the "Home" menu item, the subcategory is the page "about us".
I am using the build-in Menu of WordPress

The problem I have is with the pagination and also with the search form:

When I am in the Home Page and I click any pagination number, the subcategories of "Home" menu item disappears, and most importantly, the "Home" menu item is no longer highlighted.
When I search something, again the same issue, the "Home" is no longer highlighted, and there is no subcategory under "Home" menu item.

Can you post the urls you links generated and the url where it works? How dou you highlight the home? Automatically, when there is no active category? — underdoeg
Sure, this is the first item in the home page: <ul id="menu" class="menu"> <li id="menu-item-1252" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-1252"><a href="#">Home</a><ul class="sub-menu"><li id="menu-item-1219" class="menu-item menu-item-type-post_type menu-item-1219"><a href="#">About Us</a></li></ul></li> </ul> — Microcipcip
And this is when I click in the pagination: <ul id="menu" class="menu"> <li id="menu-item-1252" class="menu-item menu-item-type-custom menu-item-home menu-item-1252"><a href="#">Home</a><ul class="sub-menu"><li id="menu-item-1219" class="menu-item menu-item-type-post_type menu-item-1219"><a href="#">About Us</a></li></ul></li> </ul> — Microcipcip
As you can see, there is no "current-menu-item" class when I click in the pagination. What shell I do to have, at least in the home.php template and while I search, the "home" link with "current-menu-item" class? — Microcipcip

Microcipcip Microcipcip · Accepted Answer · 2011-02-27T22:19:41

I have found a solution:

1) Open header.php, and add this in the body tag:

<body<?php if ( is_home() || is_search() || is_404() )  { echo ' class="main"';} else { echo '';} ?>>

2) Add a class that target the home class, so:

body.main #main-menu ul li.menu-item-home a { 
    background: #313B47;
    color: white;
}

Now if I am in the home page, or in the search page, or 404 error page, WordPress adds class="main" to the body, so I can easily target the menu item which I want.

WordPress Menu highlight with pagination

1 Answers