Whoa! Extra Options for wp_list_pages() Added to WordPress Recently!
July 13th, 2009 — Thoughts, Wordpress
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!
Good tips Toby. Thanks.
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?
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.