Aug 28 2008
Comma Separated Link List
A thread at some random forum asking how you make your WordPress links look like “this, this, this” popped up in my tutorialtastic referrers, so I figured I’d post how I do it here.
Firstly, you’ll want to alter the way WordPress displays the links. I do so using the following snippet:
<ul class="inlinelist">
<?php wp_list_bookmarks('category=##&after=.</li>&title_before=0&title_after=0&categorize=0&title_li'); ?>
</ul>
…where ## is the id of my links category; swap the after=. to after=, for a comma separated list.
Note the inlinelist class on the <ul> tag: this is how I make it appear as if it’s a paragraph instead a long list. I simply style the tag using CSS. This’d go in your stylesheet as follows:
.inlinelist {
list-style: none;
margin: 0 0 1.5em 0;
}
.inlinelist li {
display: inline;
}
If you haven’t reset the “padding-left” on <ul>s earlier in your CSS, you’ll want that as:
.inlinelist {
list-style: none;
margin: 0 0 1.5em 0;
padding-left: 0;
}
.inlinelist li {
display: inline;
}
…to make sure it displays the same in all browsers (because some indent links with padding, and some with margin) too.
That’s it. Not very complicated :)
Warning
This post is over 6 months old. This means that, despite my best intentions, it may no longer be accurate. Age, motherhood, experience, loss... these things have all changed me from when this blog was started back in the heady (ha) days of my youth.
As much as I would like to go back and edit 10 years of archives to provide an insight into the 'me' of now — to update coding snippets and revise website advice — it would probably take years to do so (by which point I'd have to start again!) This would defeat the point of keeping these archives anyway.
Please take these posts for what they are: a brief look into my past, my history, my journey.
6 Responses so far
-
If I ever need to make something comma separated and I can access it with PHP, I’ll turn it into an array and implode() it with a comma. :)
-
^ Why would you go to that trouble though when WP has the built in feature?
I don’t manage my links through WP. Maybe I should start doing it.
-
You can also do it with plain CSS, if you don’t care that some older browsers won’t add the commas:
.inlinelist li:after {
content: “,”;
}
.inlinelist li:last-child:after {
content: “”;
} -
I never thought that it would be that hard. I would like to know what plugin you use for your related posts, though.
-
That’s how I did mine, except with pixel units. I really should change that since everything else uses “em”… :/
-
I’m not using commas, but I float:left instead because I wanted display:inline-block but IE sucks. Meh.
