Display WordPress Post Tags as Twitter Bootstrap Labels

WordPress allows you to assign tags to posts. Think of tags like keywords (interests or topics) that are within a category.By default, tags are not displayed beautifully. You can separate them using commas, mid-dots or other symbols. However, again, there is no design to them. So, let’s change that by wrapping each tag in HTML and CSS. We’ll be using Twitter’s Bootstrap labels to do this.

Display the WordPress Post Tags as Bootstrap Labels

Add the following code to your post template(s) – normally single.php.

<?php the_tags('Tagged with: <span class="label label-default">','</span> <span class="label label-default">','</span>'); ?>

The Bootstrap CSS classes I’ve used are label and label-default.

The label-default CSS class consists of a grey background. Change the CSS class to whatever colour class you want (see options).

The text “Tagged with:” will appear before all the tags, just so visitors know what they are. Change it to whatever you want.

The Extra CSS You May Need

By default, the labels will use the link colour defined by the Bootstrap CSS framework, which may not be readable. For example, my website uses a orange link colour, which is hard to read on the grey labels. So, let’s change it to white (or whatever you want), with the following CSS:

.label a,.label a:link,.label a:visited,.label a:active,.label a:hover{color:#fff}

To change the colour of the link, change the hex code, which in this case is #fff.

The Results

Your tags will now look like this:

Tagged with: HTMLHTML5