Styling listed items by a php function

Hi Roy,

When using the wp_list_pages() method the output to html looks like this:

<ul>
  <li class="page_item page-item-3 current_page_item">
    <a href="/" title="Home">Home</a>
  </li>
  <li class="page_item page-item-11">
    <a href="/?page_id=11" title="News">News</a>
  </li>
</ul>

As you can see each LI has a “page_item” and “page-item-#” class that you could style.

It will also automaticaly add a “current_page_item” class that can also be styled that will highlight the current page.

Alternativly, if you are going to be styling each link differently you might just consider hard coding the page links yourself?

Roy… also ??

Thank you Roy! ??

I’ve been trying to write a rule using the output class as you mentioned without succes. Anyway I don’t understand very well why there is a space in the output tag “page_item page-item-11″…
I’ve been trying this CSS:

ul #nav li .page_item page-item-11 {
background:#fff;}

in this HTML:

<ul id="nav" class="clearfloat">
  <li><a href="<?php echo get_option('home'); ?>/" class="on">Tu web en 3 pasos</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>

In other hand I’ve been trying this (style”background:#fff”) in html without success:

<ul id="nav" class="clearfloat">
  <li><a href="<?php echo get_option('home'); ?>/" class="on">Tu web en 3 pasos</a></li>
<span style="background:#000;"> <?php wp_list_pages('title_li=&exclude=185,69,71'); ?></span>
  <?php wp_list_pages('title_li=&exclude=185,71,67'); ?>
  <?php wp_list_pages('title_li=&exclude=185,67,69'); ?>
</ul>

No problem I think I could do it hard coding, but it could be interesting if there is a way to define styles in lists called dynamically…

Is there some documentation where I can check out this questions, maybe in the wordpress codex or someplace like that?

Thank you ver much.

Roy again, but from Madrid

Hi Roy,

What you want to look at is the HTML outputed from the PHP code. Do this by viewing the source of the HTML page itself when viewed in your browser.

From here you will be able to see what classes you can use to style your links etc.

In HTML when you specify a CSS class you can specify multiple classes by using a space.

So you can have a class like this that will style all page links

.page_item{
  background: #FF0000;
}

and this will style the current page item

.current_page_item{
  background: #00FF00;
}

You can then style your indivdual page link items with the corresponding numbered class – where the number is the ID of the page.

I.e. if you want to style the page link with ID 71 you’d do

.page-item-71{
  background: #0000FF;
}

Hope that makes sense!
Roy

Thank you Roy I’ll make a try