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 :)

6 Comments

  1. 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. :)

  2. ^ 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.

  3. 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: “”;
    }

  4. I never thought that it would be that hard. I would like to know what plugin you use for your related posts, though.

  5. That’s how I did mine, except with pixel units. I really should change that since everything else uses “em”… :/

  6. I’m not using commas, but I float:left instead because I wanted display:inline-block but IE sucks. Meh.