WordPress: Combining Post Categories and Tags Into Same Unordered List

On one of my blogs I needed a way to combine both categories and tags into one unordered list—<ul>. Each item would of course be wrapped in its own list item—<li>. The design I came up with made this a necessary requirement. My initial attempts used the canned WordPress function calls—get_the_category_list() and get_the_tag_list()—which ended up outputting two unordered lists. Not what I wanted.

I searched a bit more, and found that I could get both arrays prior to outputting to the screen. I control the markup this way and wrap them in a single unordered list.

The PHP and HTML

function get_cats_and_tags_list()
{
	$html = '<div class="entry-cats-and-tags"><ul>';
	
	foreach((get_the_category()) as $cat) {
		$html .= '<li class="post-cat-item">' .
			'<a href="' . get_category_link($cat->term_id) . '">' . $cat->cat_name . '</a>' . 
		'</li>';
	}
	
	$posttags = get_the_tags();
	if ($posttags) {
	  foreach($posttags as $tag) {
	  	$html .= '<li class="post-tag-item">' .
			'<a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a>' . 
		'</li>';
	  }
	}
	
	return $html . '</ul></div>';
}

Notice that I added a special class to that of a category list item and that of a tag list item. This allows me to custom style the categories and tags as my design dictates.

Here is the CSS

.entry-actions .entry-cats-and-tags { max-width: 500px; }

.entry-cats-and-tags ul { list-style: none; margin:0; float:left; }
.entry-cats-and-tags ul li { float:left; margin-right:5px; line-height: 2.1em; }

.entry-cats-and-tags a { font-size: .9em; }

.entry-cats-and-tags li.post-cat-item a { background:#f5f5f5; color: #999; border:solid 1px #f5f5f5; }

.entry-cats-and-tags li.post-tag-item a { background:#fff; color: #999; border:solid 1px #ddd; }

.entry-cats-and-tags li.post-cat-item a:hover, .entry-cats-and-tags li.post-tag-item a:hover { color: #666; text-decoration: none; border:solid 1px #999; }

.entry-cats-and-tags ul li.post-cat-item a, .entry-cats-and-tags ul li.post-tag-item a { border-radius: 10px; padding:4px 10px 3px 10px; }

This technique allows me to easily float the <li>‘s so that they wrap nicely from one line to the next. This is the final result:

Screenshot: WordPress: Combining a Posts’ Categories and Tags into Same Unordered List

You can view it in action here: jibbywasmosthappy.com. I particularly like the mouse over treatment.

Update
After completing this task I noticed that on an individual posts’ page there were no categories or tags being output. So I moved the PHP / HTML code into its own function in functions.php. This allows me to easily make a one line call from any page.

<?php echo get_cats_and_tags_list(); ?>

Happy coding.

Posted in: Code Samples  |  Tagged with: , ,  |  Leave a comment

Leave a Reply

Most recent work

  • Our Restroom Our Restroom is an (inter)national crowdsourced campaign who’s goal is simple: compel businesses to make their single occupancy restrooms gender neutral. Championed by Kristin Russo, designed by Allison Weiss, built by me on WordPress.
  • How To Win At Feminism The badasses over at Reductress are at it again with their new book How To Win At Feminism.
  • Reductress I crank out on-going web projects for Reductress. Super fun as you can imagine.
  • Everyone Is Gay Everyone Is Gay is an indispensable question and answer resource for the LGBTQ community. Hell, it’s great advice for anyone with a body with an emotion or two. I made the site responsive among other things. Give it a look see.

Need hosting?

  • Media Temple My go to hosting provider. You get rockstar hosting and I make a little cash. No pressure, just clean honest fun.

Past work

  • Christine Chaney Creative The online presence of Seattle artist Christine Chaney. Specializing in architecture, art and apparel.
  • Get Your Shit Together This is a site dedicated to helping you get your shit together before an unexpected tragedy, like the loss of a loved one.
  • IHG Instagram Sweepstakes An awesome Instagram driven sweepstakes site for IHG.
  • Trivial Beersuit A site that provides professional pub trivia to bars and restaurants.
  • Audi YouTube Channel This site was a quick turn-around hair pulling adventure for the Super Bowl: revamping Audi’s YouTube Channel.
  • Teach.org The new Teach.org. Providing tools to help students become teachers.
  • Valhalla DSP A one man Seattle based company, writing pretty sick professional audio plugins. Check ’em out!
  • Microsoft Visual Studio 2012 Launch This sweet new Visual Studio 2012 Launch website sports a mobile first, responsive web design architecture and comes in 14 different languages.
  • Nice Manners Music Nice Manners is an LA based recording studio offering their clients all sorts of digital audio services. This is a demo of an internal genre based music search & player I built for them. I am ecstatic about launching this project—check it out.
  • Holiday Inn Tumblr A quick, fully responsive update to the Holiday Inn Tumblr page.
  • Microsoft's Art of Touch An artful HTML5 Microsoft website. Sadly, this site is no longer live.
  • Microsoft Hardware Healthy Computing Tool A useful little tool to help you find the perfect Microsoft mouse or keyboard.
  • Pella Professional Pella manufactures high quality doors and windows. This is their professional site.
  • Imaging the World A non-profit dedicated to providing ultrasound services in remote areas of the world.
  • Ginny Ruffner: A not so still life A site for a documentary film about Seattle artist Ginny Ruffner.

Blogroll