karine.do

Style wp_list_pages

css, php, wordpress

wp_list_pages() generates an HTML list of all the pages on WordPress. This tutorial will explain how to style that list to have a nice image menu rather than plain text. This way, you won't have to manually code every link. First of all, you will need to insert that code wherever you want your menu to appear:

<ul id="menu">
  <?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
<ul>

The generated HTML code should look like this:

<ul id="menu">
  <li class="page_item page-item-1"><a href="lorem.html" title="Lorem"><span>Lorem</span></a></li>
  <li class="page_item page-item-2"><a href="ipsum.html" title="Ipsum"><span>Ipsum</span></a></li>
  <li class="page_item page-item-3"><a href="dolor.html" title="Dolor"><span>Dolor</span></a></li>
  <li class="page_item page-item-4"><a href="amet.html" title="Amet"><span>Amet</span></a></li>
</ul>

We will have to style all that in our stylesheet. Let's start by removing some padding and margin:

ul#menu {
  margin: 0px;
  padding: 0px;
  list-style: none;
  width: 200px; /* menu width */
}

<span> and </span> that we had inserted by wp_list_pages() will hide the link text so that we can use images instead:

ul#menu li.page_item a span {
  visibility: hidden;
}

Now we will write all the styles shared by all links:

ul#menu li.page_item a {
  display: block; /* so that the whole image is clickable */
  text-decoration: none; /* remove link underline */
  width: 200px; /* if your images have the same width and height, define them here */
  height: 40px; /* if not, individually define them in each link class */
  margin-bottom: 10px; /* add a 10px margin between the links */
}

We are now going to define images for each link. As you can see, WordPress adds an unique CSS class for every link: page-item-1, page-item-2, etc. The number is the ID of the page so you will have to know your pages IDs but this is easy to get. There are two ways to style the links: one using IDs, one using pages titles. I'll start with the ID method.

Remember, the HTML code generated by wp_list_pages() is like this for every link:

<li class="page_item page-item-1"><a href="lorem.html"  title="Lorem"><span>Lorem</span></a></li>

page-item-1 is variable and different for each link, this allows us to style each link differently:

ul#menu li.page-item-1 a {
  background: url(images/lorem.jpg) no-repeat;
}
ul#menu li.page-item-2 a {
  background: url(images/ipsum.jpg) no-repeat;
}
ul#menu li.page-item-3 a {
  background: url(images/dolor.jpg) no-repeat;
}
ul#menu li.page-item-4 a {
  background: url(images/amet.jpg) no-repeat;
}

The other method; we also see that the HTML generated uses the title attribute for each link:

<li class="page_item page-item-1"><a href="lorem.html"  title="Lorem"><span>Lorem</span></a></li>

Titles are different for every pages, so we can use this to style all the links differently:

ul#menu li a[title=Lorem] { /* Get all links with title "Lorem" */
  background: url(images/lorem.jpg) no-repeat;
}
ul#menu li a[title=Ipsum] {
  background: url(images/ipsum.jpg) no-repeat;
}
ul#menu li a[title=Dolor] {
  background: url(images/dolor.jpg) no-repeat;
}
ul#menu li a[title=Amet] {
  background: url(images/amet.jpg) no-repeat;
}

That's it, quite easy no?