Just a small wordpress’ tip for a custom theme template : how to customize the tags displayed along a post on your worpdress home page theme.

If we have a quick look at the documentation, the function we need to retrieve the tags connected to a post is :

[php]
<?php the_tags( $before, $sep, $after ); ?>
[/php]

From there, it’s pretty simple. Let’s say we want to display our tags as Bootstrap’s labels, we just add the element opening and closing tags like this

[php]
<?php the_tags(‘<span class="label label-info">
‘, ‘</span> – <span class="label label-info">’, ‘</span>’);
[/php]

and the output will be :

[html]
<span class="label label-info">
<a href="http://www.nathalie-wormser.com/blog/?tag=css3" rel="tag">css3</a>
</span> –

<span class="label label-info">
<a href="http://www.nathalie-wormser.com/blog/?tag=tips" rel="tag">tips</a>
</span>
[/html]

It works in a similar way to style the categories’ names displayed with each post on our homepage (depending on the theme).
The function that retrieves the category/categories is

[php]
<?php the_category( $separator, $parents, $post_id ); ?>
[/php]

Here we’ll have to deal with only one of the parameters : $separator. If we just want to separate our categories by a character we’ll just add it there ( a comma is set by default). However if we want to wrap our category name in an element, say a <p></p> element, we ‘ll have to do this in our post loop:

[php]
<p class="categoryLabel">
<?php the_category(‘</p> <p class="categoryLabel">’) ?>
</p>
[/php]

which will give the following output (for the example’sake, let’s say that our post has 2 categories, cat1 and cat2)

[html]
<p class="categoryLabel"><a href="#" title="" rel="category tag">Cat1</a></p>
<p class="categoryLabel"><a href="#" title="" rel="category tag">Cat2</a></p>
[/html]

we can then apply our own css rules to customize our categories labels.

tips, wordpress