I've got a WordPress site (2.6.2) in which i've set the house page to some static page rather than the standard posts page. The ID of the page is 2, so within the WordPress template I've transformed the wp_list_pages to appear such as this:

<?php wp_list_pages('exclude=2&title_li=&depth=1' ); ?>

this works fine, however the house page does not get "illuminated" when it is selected (because actually it's page_id 2 that's selected, also it does not show within the menu). Can there be any smart way for this?

Otherwise, in broad outlines, what is the painfully costly way for this? Make my very own version from the wp_list_pages function?


You are able to set a static page because the top of the page within the Administration > Configurations > Reading through panel after signing in because the administrator.

The Wordpress manual entry about this subject are available here.

Setting a static page because the top of the page doens't highlight recption menus link, that is in the centre from the question.

So, you can server-side personalize (hack) the wordpress_list_pages function, but here is a client-side option should you so choose:

Make use of the jQuery library (easily it arrives with Wordpress 2.2+), call:


or load your personal version:

wp_enqueue_script( 'jquery', '/path/to/your/jquery.js', false, '1.2.1');

Now add a little of javascript inside your template, something similar to:

if(window.location.href == 'http://www.example.com/'){ //checks for root path - "home" ('http://www.example.com/?p=7' or 'http://www.example.com/2008-10/7' will not match)
    jQuery('#nav > ul > li > a:first').addClass('current_page_item');

The a:first portion assumes the very first link inside your menu may be the home/frontpage link. When not, choose via href value or position. Here's by postion:


jQuery(jQuery('#nav > ul > li > a')[3]).addClass('current_page_item'); //add 'current_page_item' css class so menu item highlighting occurs


<div id="nav" >

<ul >
<li > <a >Link </a > </li >
<li > <a >Link 1 </a > </li >
<li > <a >Link 2 </a > </li >
<li > <a >Link 3 </a > </li >
<li > <a >Link 4 </a > </li >
<li > <a >Link 5 </a > </li >
</ul >

</div >


  1. Look for the particular title of the menu div id (#nav proven here)
  2. A nested ul/li menu structure (so several level) will need additional code to correctly selection the right a element.
  3. If menu links are likely to change, avoid using a positional selection technique, use another hook, such as the href worth of the hyperlink towards the home/top of the page.
  4. The if(window.location.href == 'http://www.example.com/') portion might need to be considered a regex if more variation is involved (https, multiple subdomains, etc).