I just realized that they added some sweet features to the wp_list_pages() funtion in WordPress 2.7. These include the ability to add html before and after menu items.

I was struggling earlier today, trying to squeeze graphic dividers between dynamically-created between menu items. After trying all sorts of CSS tricks, I discovered this simple workaround included in WordPress since 2.7.

The basic code to add an image after each menu item looks like this:

<?php wp_list_pages(‘link_after=<img src=”http://mydomain.com/myImage.gif”‘); ?>

ALSO, as a bonus, I also discovered the brand new (since 2.7) function, wp_page_menu(), which is similar to the aforementioned wp_list_pages function, except that this one is specially-designed to allow us to add the “home” page to the menu. My guess is that the new wp_page_menu() function will eventually replace wp_list_pages().

Enjoy!

3 Comments

  1. Jesse on July 16, 2009 at 3:16 pm

    Good tips Toby. Thanks.



  2. Greg on October 16, 2009 at 9:43 am

    This works great for putting an item next to all of the menu items but is there a way to use the link_after command for only one of the menu items? For example, if I wanted to have just one menu item (page id 20) have an icon to the right of the text?



  3. Toby on October 16, 2009 at 5:36 pm

    Since wp_list_pages() gives each list item its own class, you could run an “if…then” statement in php to add a “display:none;” CSS class to the appropriate items. Or you could just use CSS to manually hide each image. Something like:

    .page_item page-item-7 img{
    display:none;
    }

    I haven’t tried this, but it seems like it should work.