WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to style wp_page_menu (13 posts)

  1. jchris
    Member
    Posted 5 years ago #

    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.

  2. Josh Leuze
    Member
    Posted 5 years ago #

    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.

  3. stvwlf
    Member
    Posted 5 years ago #

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

    <ul>
      <li class="home<?php if(is_front_page) echo ' current';?>"><a href="#">Home</a></li>
      <?php wp_page_menu('show_home=0'); ?>
    </ul>
  4. jchris
    Member
    Posted 5 years ago #

    jleuze:

    <div class="menu">
    	<ul>
    	<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>
    	</ul>
    </div>

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

  5. jchris
    Member
    Posted 5 years ago #

    stvwlf:
    One problem. Makes two ul:s

    <ul>
      <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>
    </ul>
  6. stvwlf
    Member
    Posted 5 years ago #

    use this instead

    ul>
      <li class="home<?php if(is_front_page) echo ' current';?>"><a href="#">Home</a></li>
      <?php wp_list_pages('title='); ?>
    </ul>
  7. jchris
    Member
    Posted 5 years ago #

    stwlf:
    Sorry. Still ul problem

    ul>
      <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>
    </ul></li></ul>
  8. stvwlf
    Member
    Posted 5 years ago #

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

    <ul>
      <li class="home<?php if(is_front_page) echo ' current';?>"><a href="#">Home</a></li>
      <?php wp_list_pages('title_li='); ?>
    </ul>
  9. Josh Leuze
    Member
    Posted 5 years ago #

    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.

  10. jchris
    Member
    Posted 5 years ago #

    Bingo!

    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!

    /chris

  11. jchris
    Member
    Posted 5 years ago #

    stvwlf

    There is one small problem.

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

    <ul>
      <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='); ?>
    </ul>
    
    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:

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

  12. MichaelH
    Member
    Posted 5 years ago #

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

  13. jchris
    Member
    Posted 5 years ago #

    MichaelH

    YES!

    Topic resolved.

    Thanks again, everybody.

Topic Closed

This topic has been closed to new replies.

About this Topic