How to style wp_page_menu

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

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

jleuze:

<div class="menu">
	<ul>
	<li ><a href="https://localhost/wp_infoline">Nyheter</a></li>
	<li class="page_item page-item-59 current_page_item"><a href="https://localhost/wp_infoline/" title="Programinfo">Programinfo</a></li>
	<li class="page_item page-item-60 current_page_item"><a href="https://localhost/wp_infoline/" title="Programinfo">Fakta</a></li>
	<li class="page_item page-item-61 current_page_item"><a href="https://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.

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="https://localhost/wp_infoline/programinfo/" title="Programinfo">Programinfo</a></li></ul></div>
</ul>

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>

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="https://localhost/wp_infoline/programinfo/" title="Programinfo">Programinfo</a></li>
</ul></li></ul>

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>

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.

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

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:

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

MichaelH

YES!

Topic resolved.

Thanks again, everybody.