WordPress: I got rid of the second "home" page, but it's not good enough

Question

I have a WordPress site (2.6.2) in which I have set the Home page to a static page instead of the normal posts page. The ID of this page is 2, so in the WordPress template I have changed the wp_list_pages to look like this:

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

this works fine, but now the Home page doesn't get "lit up" when it's selected (because in fact it's page_id 2 that is selected, and it doesn't show in the menu). Is there any easy way around this?

If not, in broad outlines, what's the hard way around this? Make my own version of the wp_list_pages function?

Thanks!

Answer 1

You can set a static page as the front page in the Administration > Settings > Reading panel after logging in as the administrator.

The Wordpress manual entry on this subject can be found here.

Answer 2

Setting a static page as the front page doens't highlight the menu link, which is at the heart of the question.

So, you could server-side customize (hack) the wp_list_pages function, but here's a client-side option if you so choose:

Use the jQuery library (conveniently it comes with WP 2.2+), call:

wp_enqueue_script('jquery');

or load your own version:

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

---

Now add a bit of javascript in your template, something like:

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 first link in your menu is the home/frontpage link. If it's not, select 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

Example:

<div id="nav" >

<ul >
<li > <a >Link 0 </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 >

---

Caveats:

1. Check for the actual name of your menu div id (#nav shown here)
2. A nested ul/li menu structure (so more than one level) will require additional code to properly selection the correct a element.
3. If menu links are going to change, don't use a positional selection technique, use another hook, like the href value of the link to the home/front page.
4. The if(window.location.href == 'http://www.example.com/') portion may need to be a regex if more variation is involved (https, multiple subdomains, etc).