How To Remove the White Space in wp_list_pages()
wp_list_pages() is one of the most common WordPress template tags. Sometimes, the little white space that some browsers add to the output of this function can create a big mess in your theme’s template, making it hard to style, especially when trying to create a horizontal list. The fix for this is quite simple and requires minimum coding knowledge, if none at all.
The Problem
The wp_list_pages() generates either a series of <li> elements containing links to all of you blog’s pages, or a full unordered list with a heading at the beginning.
The output of this list looks like this:
<ul> <li><a href="#">Page name</a></li> <li><a href="#">Page name</a></li> </ul>
While some browsers don’t have a problem with elements being generated on new lines, in some, this method causes a white space to show up in front of each list item. This space becomes visible and annoying when trying to create a horizontal menu with background colors and equal horizontal spacing.
The Fix
To get rid of the white space, your output would need to look like this:
<ul><li><a href="#">Page name</a></li><li><a href="#">Page name</a></li></ul>
This can be achieved by using a small PHP function that will take the code generated by wp_list_pages() and turn it into something similar to the example above. To make this function available for use in your templates you need to edit the “functions.php” file, found in you theme’s directory. If you don’t have such a file, create an empty one and name it “functions.php”.
In functions.php add the following code at the beginning or at the end of the file. Just be careful not to paste it inside another function and cause the script to break.
function qbkl_nospace($input) {
$output = str_replace(array("\n", "\r", "\t"), "", $input);
echo $output;
}
Usage
To apply the fix, simply find the wp_list_pages() in your theme’s template (usually header.php or sidebar.php) and edit the code according to the following example:
Find:
<?php wp_list_pages(); ?>
Replace with:
<?php qbkl_nospace(wp_list_pages()); ?>
This fix works with any function or template tag that generates the same problem.
The white space generated by wp_list_pages() has been a nightmare for many WordPress themes designers. It doesn’t have to be one for you!
Where is wp_list_pages() located?
Although it’s not recommended that you alter the base code of WordPress, advanced users might feel like taking such a job.
If you need to alter the output, wp_list_pages is defined in the post-template.php file, in the “wp-includes” folder of your WordPress blog.
For further tweaking, you might also need to adjust the walk_page_tree function, located in the same file, which makes use of the class Walker_Page, extending the Walker class, both located in wp-includes/classes.php.
* The above file names and locations are confirmed for WordPress 2.5 to 2.6.3.
If you’re having any questions or need further assistance, please use this post’s comment form.
-
- Spread the love!
- Digg
- StumbleUpon
- Delicious
- Free, fast RSS updates?
- Join the 2,141 subscribers NOW!
yeah, had problems with the function,
then edited wordpress/wp-includes/post-template.php – function wp_list_pages
and added your line:
$output = str_replace(array(“\n”, “\r”, “\t”), “”, $output);
above the native:
$output = apply_filters(‘wp_list_pages’, $output);
to this:
if ( $r['title_li'] )
$output .= ”;
}
$output = str_replace(array(“\n”, “\r”, “\t”), “”, $output);
$output = apply_filters(‘wp_list_pages’, $output);
if ( $r['echo'] )
then it worked great, Thanks!
It’s basically the same thing, only that by applying it in a separate file (like functions.php inside your theme) you won’t need to make this change every time you update your WP to a newer version. Glad to be of help.
Works fine! But I absolutely recommend to put it in your [template-path]/functions.php!
And a little hint why it couldn’t work out for ocd. The later function-call should use the echo-argument of wp_list_pages and look like this:
qbkl_nospace(wp_list_pages(‘echo=0′));
Hi there,
I am trying to create a simple theme and I got this space bug that I couldn’t figure out. After doing a research, I landed on this solution.
I tried it but its not working out for me. I have duplicated the default theme and have made necessary edits on the style.css file headers. I had no functions.php on my theme. So, I created the empty functions.php file and pasted this, updated the wp_list_pages() function.
<li >Home
But it looks like either its not taking this or something is wrong. The space bug is still there. Anything you can figure out?
Thanks,
didn’t work for me.
Great topic… whitespace can be such a pain sometimes. Definitely need the echo argument in wp_list_pages. I didn’t even use the function, just removed all the whitespace before I echoed it.
Any thoughts about how to add a class for “last” and “first” to menu li tags with this method?
Hi there.
I searched and searched for a lifetime (an hour) and no matter what I did, I could not fix the problem. No matter what I did, I kept seeing the same spacing in between the buttons. Then it occurred to me that it may be CSS related. I went into the CSS, removed the left and right margins on the buttons and it corrected the issue. While some people may want the dividing border, I just thought it may help someone out there.
Cheers
muz
I found this function very useful for modifying the output from wp_list_pages. (Although, not because of any white space issues.)
Thanks to the post author and the commenter Sebastian above for pointing out the need for the echo=0 parameter:
qbkl_nospace(wp_list_pages(’echo=0′));
This works great, but while doing this I also want to remove the word “Pages” from the top of the list. So I tried this:
* Some stripped codeIt didn’t work, so I reversed the order of the parameters. Then your function worked, of course, but the word “Pages” appeared again.
Does anyone know the syntax for this? Google is not help, or ‘m googling the wrong words.
I got it! It was
php qbkl_nospace(wp_list_pages(‘title_li=&echo=0′));
Trying to apply this to categories but unfortunately it does not work. This is how I applied the function:
Any idea where I’m wrong? Thanks so much!
I created a plugin here that removes the white space from page and category lists. You can find it in the WordPress Plugin Directory:
http://wordpress.org/extend/pl.....ite-space/
I copied you code exactly and where exactly you stated and my entire website is down. I could not delete the code either because it said it was sent to the function.php’s header location and could be changed. I know have to hire someone to fix this and pay for backup files. This is a warning to anyone reading this (if it gets posted). This is either a hacker site or bad information. I’m a poor startup, and the money I could have been using for groceries is now to pay for this screw up!
Sarah, the fact that you have little to no understanding of a bit of programming language doesn’t make a VERY basic information a hack or bad. It’s your choice to use it or not. I don’t encourage people to do things when they aren’t comfortable with they skill level. And I am fairly sure you did NOT do this properly, because again, this is VERY basic and with no chance of failing if you do it right. So please, if you can’t assume responsibility for your lack of knowledge or a mistake you most likely did, don’t bash it. You can bash something or criticize when you can back up your statement with knowledge and arguments, other than that it’s all nothing but a series of “mean words”.
I wrote a plugin a while back that does pretty much the same think – white space issues are particularly bad in IE6
http://wordpress.org/extend/pl.....ite-space/