elegant themes

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

| 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.

options-read1.png

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!

Tags: , ,

Category: WordPress as CMS

About Miriam Schwab: Miriam is the friendly CEO of illuminea, a WordPress design and development agency. Miriam is a huge fan of WordPress and has been using it for over five years now. In addition, Miriam and her team have been organizing the local Israeli WordCamp conferences for the past few years. View author profile.


Comments (20)

Trackback URL | Comments RSS Feed

  1. Nathan Rice says:

    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

  2. Ryan says:

    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.

  3. Ryan says:

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

  4. Ryan says:

    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!

  5. Ryan says:

    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!

  6. Ryan says:

    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.

  7. Nathan Rice says:

    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

  8. Miriam says:

    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.

  9. Darren Hoyt says:

    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;

    }

  10. [...] Um die Liste nun in ein Men? verwandeln zu k?nnen, gibt WordPress einige CSS Klassen mit, die man nutzen kann. Nun zum Problem: F?r alle Seiten wird die Klasse current_page_item mitgeliefert wenn sie ausgew?hlt sind, nur f?r die als Beitragsseite ausgew?hlte nicht. Das Problem ist bekannt und es gibt inzwischen eine lange Diskussion mit vielen L?sungsvorschl?gen. Zudem hat ein Blog auch schon eine Challenge f?r eine L?sung dieses Problems ausgeschrieben. [...]

  11. Thomas says:

    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/

  12. Miriam Schwab says:

    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?

  13. Thomas says:

    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.

  14. Jamie says:

    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.

  15. Miriam Schwab says:

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

  16. wynny says:

    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 :)

  17. Ryan says:

    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.

  18. jessica says:

    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

  19. cahap says:

    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.

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

More in WordPress as CMS (10 of 23 articles)