WordPress Plugin: Add first and last class to list of pages
I wrote this plugin because there was no easy way to define a first and last class to the list of pages generated in WordPress with wp_list_pages. These classes are useful for tweaking the visual formatting of the page list with CSS.
I’ve tested this with WordPress 2.2 and it should behave nicely with other plugins as well as earlier versions. Though let me know if you find something buggy.
As always, I am not responsible if this plugin blows up your computer.
WHY WOULD I WANT THIS?
Let’s say you want to create a horizontal list of your pages in the footer of your page with pipes separating the page links.
The css might look something like this:
#footer ul { list-style-type: none; margin-left: 0px; padding-left: 0px; } #footer li { float: left; padding: 0px; margin: 0px; } #footer li a { border-right: 1px solid #CCC; display: block; padding-top: 0px; padding-left: 10px; padding-right: 10px; text-align: center; }
The border-right applied to the link css sets a gray ‘pipe’ that separates out the page links.
The code in your WordPress theme file ‘footer.php’ might look like this:
<div id="footer"> <ul> <?php wp_list_pages('sort_column=menu_order&title_li='); ?> </ul> </div>
So right now this would output in the browser as:
See that last pipe following “Contact”? We don’t want that.
But since we now have a separate class for that last list item, we can add this to the css, which will remove that last ‘pipe’:
#footer .last_item a { border-right: none; }
And now our list of pages in the footer will look like this:
HOW DO I INSTALL IT?
View/Download the plugin file and place it in your /wordpress/wp-content/plugins/ folder. Then activate the plugin from your WordPress control panel.
HOW DO I USE THE PLUGIN?
When activated, the plugin will automatically apply the class “first_item” to the first li (for the first page) as well as the class “last_item” to the last li (for the last page) in the list that is generated with wp_list_pages.
Hi, your plugin ate one of my menu items (last one) and lots of my nerves trying to figure out what’s wrong.
Long story short I changed:
$lastLiPosition = $liArrayCount-2;
to
$lastLiPosition = $liArrayCount-1;
and got my menu item back!
Anyway, thanks for plugin!
Thanks for posting this! The “Pipe” issue is one I have been attempting to solve for a while. You rock!!
sniurkst +1
Had the same problem – common off-by-one error on line 25, and looking at the plugin listing it’s still there.
Thanks for the bug reports. I’ve fixed the plugin file.
Best,
Eliot
The plugin activated, make the visual editor in 2.5.1 disable… Any ideas?
Hi,
very good plugin. I have a little bug with it: when activated, my visual editor doesn’t work anymore. Any idea?
Thx
@bumpert @Frédéric
I’m not sure why the plugin might disable your visual editors as it’s just adding a filter to the wp_list_pages function which is only used on the front end (e.g. in the theme) of WP.
I think that you should be able to re-enable it in your profile in WP.
Please let me know if that doesn’t work for you.
Best,
Eliot
I too am having this issue within the visual editor, can you please look into this. I have a fresh install of WordPress 2.7, cheers!
I’ve disabled your plugin until this is resolved
That’s a great plugin. Was wondering if you might know where I can find a similar function:
Basically, I want a plugin that numbers each item generated by wp_list_pages. So it would look like:
li class=page-1
li class=page-2
li class=page-3
And so on. That way I would have even more flexibility, especially when combined with your first/last function. Any thoughts?
Thanks!
This functionality really should be a default on WordPress.. Thanks!
mm but this plugin is not really bugproof
it duplicates my last menu item 