Support » Themes and Templates » How to style wp_page_menu

  • Resolved jchris


    I have a menu with 4 items. By using wp_page_menu and including the homepage I have a nice unordered list. My problem is that the first li-item, the home-link, doesn’t have a class.
    I use background images for the menu and the current page will have another color, i.e. another background image. This is no problem in a list where every list item has a name (class or id) but I can’t figure how to achieve this result when the first li-item, the home page, doesn’t have a class to its li tag.
    I’ve searced for an hour to find a solution but without success. I would be most grateful for any tips, hints or links.

Viewing 12 replies - 1 through 12 (of 12 total)
  • It would be helpful if you could include a sample of the code that you are trying to work on, and maybe a link to your site.

    one solution is don’t use wp_page_menu to display your home menu option

      <li class="home<?php if(is_front_page) echo ' current';?>"><a href="#">Home</a></li>
      <?php wp_page_menu('show_home=0'); ?>


    <div class="menu">
    	<li ><a href="http://localhost/wp_infoline">Nyheter</a></li>
    	<li class="page_item page-item-59 current_page_item"><a href="http://localhost/wp_infoline/" title="Programinfo">Programinfo</a></li>
    	<li class="page_item page-item-60 current_page_item"><a href="http://localhost/wp_infoline/" title="Programinfo">Fakta</a></li>
    	<li class="page_item page-item-61 current_page_item"><a href="http://localhost/wp_infoline/" title="Programinfo">Inspiration</a></li>

    Thanks. That would be one solution.

    My reflection: I wonder why wp_page_menu dont set a class to the index.php when it does for the rest of li-elements with pages.
    I wonder why wp_list_pages don’t allow for inclusion of the index page.
    Seems like 2 functions that lack in slightly different ways.
    I would propose to add a class to index (home) to wp_page_menu since a menu often is expected to include home with a current status.

    One problem. Makes two ul:s

      <li class="home current"><a href="#">Home</a></li>
      <div class="menu"><ul><li class="page_item page-item-59 current_page_item"><a href="http://localhost/wp_infoline/programinfo/" title="Programinfo">Programinfo</a></li></ul></div>

    use this instead

      <li class="home<?php if(is_front_page) echo ' current';?>"><a href="#">Home</a></li>
      <?php wp_list_pages('title='); ?>

    Sorry. Still ul problem

      <li class="home current"><a href="#">Home</a></li>
      <li class="pagenav">Sidor<ul><li class="page_item page-item-59 current_page_item"><a href="http://localhost/wp_infoline/programinfo/" title="Programinfo">Programinfo</a></li>

    I apologize – there were two typos in that code. I just ran this code and it worked as intended

      <li class="home<?php if(is_front_page) echo ' current';?>"><a href="#">Home</a></li>
      <?php wp_list_pages('title_li='); ?>

    I concur with what stvwlf is telling you jchris. This is how I usually construct my navigation as well, it offers you more flexibility.

    It is helpful for when you want to add an ID or class to just the first list item, like you you have a border or bullet point separating each link, and you want to cancel that out on the first link so that the dividers are only between your links.


    Thank you both very much. Since I am new to both wp and PHP this really has saved me a lot of time and trial (not to speak of errors 🙂 It is hard to navigate with precision in new surroundings. Now it works like a breeze and I’ll be able to take it from here.

    All the best!



    There is one small problem.

    I have the following code (pasted from your post and added the url-part to get the link right:

      <li class="home<?php if(is_front_page) echo ' current';?>"><a href="<?php bloginfo('url'); ?> ">Nyheter</a></li>
      <?php wp_list_pages('sort_column=menu_order&amp;title_li='); ?>
    All resulting pages include the current class for the front page. I have also tried to use is_home but that did not solve the problem. Se code below:

      <li class=”home current”>Nyheter
      <li class=”page_item page-item-59″>Programinfo
      <li class=”page_item page-item-61″>Ekonomifakta
      <li class=”page_item page-item-66 current_page_item”>Inspiration

    I will handle my location styling in the stylesheet so I am fine, but if there is a solution future readers would benefit.

    Try if ( is_front_page() ) instead of if(is_front_page)



    Topic resolved.

    Thanks again, everybody.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to style wp_page_menu’ is closed to new replies.