How to show tags under post content in WordPress

If for some reason your theme does not show post tags, or you’re designing a custom theme and are wondering how to display the tags this how-to is for you. This is an update of the original article, with some updates on the code and the way it is hooked.

1. Make the HTML and CSS Markup for the tags
2. Figure out where to hook your code
3. Load your files
4. Design and hook your function to the appropriate action

Make the HTML and CSS Markup for the tags

I’ll be using the following css for the tags:

.post-tags{ 
        margin:0; 
        padding:0; 
        list-style:none !important;
}
.post-tags li, .post-tags a{
	float:left;
	height:24px;
	line-height:24px;
	position:relative;
	font-size:11px;
}
.post-tags a{
	margin-left:20px;
	padding:0 10px 0 12px;
	background:#0089e0;
	color:#fff;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;	
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;	
	border-top-right-radius:4px;	
}
.post-tags a:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-12px;
	width:0;
	height:0;
	border-color:transparent #0089e0 transparent transparent;
	border-style:solid;
	border-width:12px 12px 12px 0;		
}
.post-tags a:after{
	content:"";
	position:absolute;
	top:10px;
	left:0;
	float:left;
	width:4px;
	height:4px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px #004977;
	-webkit-box-shadow:-1px -1px 2px #004977;
	box-shadow:-1px -1px 2px #004977;
}
.post-tags a:hover{background:#555;}	
.post-tags a:hover:before{border-color:transparent #555 transparent transparent;}

having this ready, the html will be as follows:

<ul class="post-tags">
	<li><a href="#">WordPress</a></li>
	<li><a href="#">SaaS</a></li>
</ul>

Figure out where to hook your code

Reading through the hooks and filters I’ve decided to use the “the_content” filter this time. That way you can add your tags either before or after the post content.

Load your files

Now lets add our tags css the proper WordPress way using “wp_enqueue_style“:

add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_style( 'PostTags-CSS', get_stylesheet_directory_uri().'/css/tags.css' );
}

Design and hook your function to the appropriate action

Now we have all the pieces we need, lets get them all together.

add_filter('the_content', function($content) { 
    $postID = get_the_ID(); 
    $tags = function() use($postID){ 
        $tagsList = wp_get_post_tags($postID); 
        $html = "<br><ul class='post-tags'>"; 
        foreach($tagsList as $tag) { 
            $html .= '<li><a href="'.get_tag_link($tag).'">'.$tag->name.'</a></li>'; } 
            $html .= "</ul>"; 
            return $html; 
        };
        return $content.$tags(); 
});

Now all you have to do is add the code from the link below to your functions.php upload the css in “/path/to/your/theme/css/tags.css” and you’ll have the tags under each post content without the need to edit any templates.