jemjabella

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 28/08/08 at 19:42 #

   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 28/08/08 at 20:38 #

   ^ 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 29/08/08 at 00:44 #

   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 29/08/08 at 00:59 #

   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 29/08/08 at 03:09 #

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

6. 

   Vickie 29/08/08 at 08:19 #

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