Ultimately better than you.

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

Comments

There are currently 6 approved responses to "Comma Separated Link List".

1. Vasili   August 28th, 2008

   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. Rachael   August 28th, 2008

   ^ 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. Jenny   August 29th, 2008

   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. Aaron   August 29th, 2008

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

5. Hannah   August 29th, 2008

   That's how I did mine, except with pixel units. I really should change that since everything else uses "em"... :/

6. Vickie   August 29th, 2008

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

Leave a Reply

No HTML please; first time comments are moderated; comments left without a legitimate first name/nickname and e-mail will be deleted (no, your momma didn't call you "cheap quality wardrobes").