WordPress challenge: getting class current_page_item to work when home page is not blog

By Miriam Schwab • December 5, 2007 • 20 Comments

Sorry for the confusing title, but there is an issue that we face over and over when using WordPress as a CMS, and have not been able to solve. When we are using WordPress as a CMS, our Blog page doesn’t pick up the current_page_item class and therefore its link on the nav bar isn’t highlighted like the other pages are. How can we get it to change?

I know that the above might not make sense, so here is a detailed description of the problem:

If you use WordPress as a CMS, you generally create the Pages you want to appear on your nav bar under Write > Write Page. One of those Pages is the Home page, for example, and you create another Page for your blog posts called Blog. Then, you go to Options > Reading, and select one of those pages for your front page from the drop-down list, in this case you would select the Home page, and another page for your blog posts, in this case the Blog page.

You create a style in your style sheet called current_page_item which causes the current page that the viewer is on to appear differently in the nav bar or list of pages. For example, you want the background color of that page on the nav bar to change from green to purple.

Now, here’s where the problem lies: all pages on the nav bar change from green to purple when the user is on that page…except the Blog page! For some reason, that Blog page does not pick up the current_page_item class.

So my question is: does anyone know of a solution to this problem?

Thanks!

Author: Miriam Schwab

Miriam is the friendly CEO of illuminea, a WordPress design and development agency, and Strattic, a static publishing platform for Open Source CMSs. Miriam is a huge fan of WordPress and has been using it for over ten years. In addition, Miriam has organized the past five local Israeli WordCamp conferences.

Nathan Rice

I literally just had this problem yesterday, doing a custom theme for a client. Here’s what I did…

First of all, exclude both the “home” page, and the “blog” page from your list pages call.

Then add these two list items before the list pages call.

<li class=”<?php if ( is_page(’61’) ) { echo “current_page_item”; } ?>”><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>

<li class=”archives <?php if ( is_home() ) { echo “current_page_item”; } ?>”><a href=”<?php echo get_settings(‘home’); ?>/archives/”>Blog Archives</a></li>

There’s absolutely nothing dynamic about it, but it works. WP really needs to work on this, if you asked me.

Nathan
Ryan

I never noticed this feature of WordPress before. Seems like a useful addition, albeit annoying that isn’t including categories into it.

There are two solutions I can think of for this (I haven’t tested either).

One way is to include your blog into a static page, that way the blog will behave just like a regular static page. This can be done by editing page.php and adding a loop whenever you are on the static page labelled ‘blog’.

Or you could manually add an ‘if’ statement between the section to add ‘current_page_item’ when you are on the blog page.

I have to go to work now, but I can post back with some code later tonight if you’d like.
Ryan

This is harder than it looked at first site. I cant’ find a conditional tag to target the blog posts page.
Ryan

Here you go … http://ryanhellyer.net/test/wordpress1/blog/

There has to be a better way to do this though. My method is quite crude and I’m 100% certain there has to be a better way to do it, I just can’t figure out what that may be. Quite infuriating!
Ryan

Problem fixed. I found the following link via a Google search … http://wordpress.org/support/topic/107583#post-596789

So the blog ‘page’ is actually the ‘home’ page, so you can use ‘is_home’ to target that page directly. I figured the new static page would be targeted with ‘is_home’, but apparently not!
Ryan

Looks like Nathan beat me to it (his post didn’t show up till after mine).

But Nathan, why do you have the ‘home’ button removed from the list_pages call? I found the home page worked fine on it’s own. The problem was with the posts page, not the ‘home’ page.
Nathan Rice

Ryan,
It does work, but the reason I hard coded it is because I like the home link to be the first in the list, and otherwise it can be hard to get it in the correct order.

Nathan
Miriam

Hi Ryan and Nathan – thanks for your input. I personally haven’t had a chance yet to try out your solutions, but my employee did with no luck. She ended up hacking wp-includes/classes.php on around line 512 as follows:

if ( $page->ID == $current_page )
to:
if ($page->ID == $current_page || ($current_page == 0 && $page->ID == get_settings(‘page_for_posts’)))

It works, but it’s not great to have to change core files because it can be overwritten during an upgrade.

WordPress really should fix this problem, since they already offer the current_page_item class, so it might as well work properly and apply to all pages! It’s so frustrating.
Darren Hoyt

I use a similar-but-different method from Nathan’s. First, I make sure to put a conditional on the body of the page:

<body<?php if ( is_home() ) { ?> id="home"<?php } ?>>

Then I add this to the HTML:

<ul id="nav"> <li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li> <?php wp_list_pages('title_li='); ?> </ul>

And I make sure there’s a CSS rule to highlight the ‘Home’ button when you’re on that page:

#home .on { background:#000; }
Pingback: Thomas Lippert » Blog Archive » WordPress und wp_list_pages()
Thomas

I fixed the problem by developing a plugin. You have to replace wp_list_pages by my own function and then you can sort the menu as you like. Have a look:
http://thomas.lippert.it/v4/wordpress-plugins/current-page-bugfix/
Miriam Schwab

Thomas – that’s a great plugin! I hope to test it out soon. Your other plugin "Logged-in Only" looks interesting too. I used Google Translate to figure out what it’s about, but not with much luck. Can you write an English summary of both these plugins and I’ll post about them here on WordPressGarage?
Thomas

The second plugin (Logged-in-only) is a bit bugy at the moment (v0.7) so i don’t want to make big publicity for it.

The plugin Current-Page Bugfix get it’s englisch summary yet. You can promote this one. 🙂 Thank you.
Jamie

This is one of the reasons I did not use the supploed function wp_list_categories.
as it did not highlight the current page.

My plugin however does Drop Down Menu WordPress plugin

It auto highlights the current page you are on.

You can arrange the pages and in the navigation menu anyway you want, and have a link to your blog/homepage as well.
Miriam Schwab

Jamie – looks great. I hope to try it out and see how it works.
wynny

i had the same problem.
the solution is to delete the home.php file – select your blog page as posts-page in the wp settings.

as frontpage i selected a page called “home” and made a extra template for that page

works fine 🙂
Ryan

I think there is a conditional tag to do this automatically now. I remember something about it in the 2.5 upgrade, or maybe it was 2.6? I can’t remember the details, but if you look in the codex there should be some information about it there.
jessica

if you are using a separate page for your front page vs your blog page, then:
is_front_page() will return true on your home page
is_home() will return true on your blog page
flashoerman

Thax for advice
cahap

The second plugin (Logged-in-only) is a bit bugy at the moment (v0.7) so i don’t want to make big publicity for it.

WordPress challenge: getting class current_page_item to work when home page is not blog

Author: Miriam Schwab

Read previous post:

A unique way to find WordPress themes at blog.biz