Update 4/5/09: All that’s documented on this page can be done via my custom list categories plugin.
Update 1/30/09: If you don’t want to edit your Wordpress files, check out my custom list categories function.
If you’re a web designer/programmer like I pretend to be and you also use Wordpress, you eventually discover that, though it’s an awesome weblog platform, Wordpress suffers from inconsistently and poorly constructed functions that may hinder the implementation of your design goals.
Two such functions involve category construction. My categories are listed horizontally almost midway down the “top of the fold” section. In order to achieve my desired design, I had to hack two Wordpress files. Here’s what I did:
Open wp-includes/category-template.php
On line 277 find:
'echo' => 1, 'depth' => 0
Replace with:
'echo' => 1, 'depth' => 0, 'before' => '<li>', 'after' => '</li>', 'link_before' => '', 'link_after' => ''
These additions to the wp_list_categories function will increase your design flexibility so that, when your style variable is set to 0 or none, you can specify what comes before and after the anchor element and what comes before and after the text that is contained within the anchor element.
Next, we have put those variable somewhere. Open wp-includes/classes.php
On lines 625 and 626 find:
$link .= '>'; $link .= $cat_name . '';
Replace with:
if ( 'list' == $args['style'] ) $link .= '>' . $cat_name . ''; else $link .= '>' . $link_before . $cat_name . $link_after . '';
On line 678 find:
$output .= "$link";
Replace with:
$output .= $before . $link . $after;
So, to get this working, to one of your theme display files (such as header.php or sidebar.php) add
The code that is outputted is
<a href="/path_to/category">» Category «</a>
That’s it! Don’t be afraid to play around with it and add your own variables.
Stumbled on this in a Google search…big help! thank you for it.
one thing though…what is the purpose of the \n and \t? i copied your text exactly (had to change the single quotes to plaintext, that’s the only exception), but it rendered both of those as text in the document. I took em out with no trouble, but I wanna know if I’m missing out on something!
thanks again! this tag was a headache.
Reply to Comment
Hi Brendan,
Those are unnecessary and just make your source code look pretty. \n begins a new line and \t inserts a tab. So ‘1\n\t2\n\t3\n4′ would give you something like:
1
tab-|2
tab-|3
4
Reply to Comment
ah, thanks.
Reply to Comment
Thats actually a nice little hack. I love custom coding wordpress designs, and I agree that some of their functions tie your hands. Nice suggestion.
Reply to Comment
Thanks, Justin!
Reply to Comment
nice hack bro :0
Reply to Comment
That’s a really great little trick.
Reply to Comment
Hi. plz tell me how can function wp_list_categories outputted categories inline (in one line such as the_category();)?
Bcs as default style of this function always insets tag after each category.
thx
Reply to Comment
Bcs as default style this function always insert tag |br/| after each category.
thx
Reply to Comment
Set the style to ‘list’. In your css, to the relevant ul li {, add ‘float: left;’. Or, if you want the list centered on the page, to the ul li {, add ‘display: inline;’ and, to the ul {, add ‘text-align: center;’.
Reply to Comment