How to Style Tags in WordPress

Like Tweet Pin it Share Share Email

WordPress means that you can type your content material in taxonomies. By default it comes with classes and tags. Whereas classes can be utilized to type your content material into completely different sections, tags can be utilized to type content material into extra particular subjects. You’ll be able to show tags used in your web site in a tag cloud or in an inventory format. On this article, we are going to present you how one can fashion tags in WordPress.

Displaying All Tags With Submit Counts in WordPress

Some common web sites show their hottest tags as subjects on their archives web page or within the footer space. Right here is how one can show all of your submit tags, with submit depend, and with out utilizing the tag cloud.

Very first thing it’s essential to do is copy and paste this code in your theme’s capabilities.php file or site-specific plugin.

operate wpb_tags()  
$wpbtags =  get_tags();
foreach ($wpbtags as $tag)  
$string .= '<span class="tagbox"><a category="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->title . '</a><span class="tagcount">'. $tag->depend .'</span></span>' . "n"   ;
 
return $string;
 
add_shortcode('wpbtags' , 'wpb_tags' );

This code merely shows all of your tags with their submit depend subsequent to them. Nevertheless, to show it in your archives web page or in a widget it’s essential to use this shortcode:

[wpbtags]

Utilizing this code alone will simply present tag hyperlinks and submit depend subsequent to them. It won’t make it look fairly. Lets add some CSS to make it fairly. Copy and paste this CSS into your theme’s stylesheet.

.tagbox  
background-color:#eee;
border: 1px strong #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px zero 2px 2px;


.taglink   
padding:2px;


.tagbox a, .tagbox a:visited, .tagbox a:energetic 

.tagcount 

Be at liberty to switch the CSS to satisfy your wants. That is the way it seemed on our demo web site:

Display Tags with Post Count in WordPress

Styling Tags in Submit Meta Info

Some WordPress themes properly show tags below the submit meta knowledge info with publishing date, writer and different meta hyperlinks. Nevertheless some themes could not fashion them in any respect, or chances are you’ll need to fashion them in another way.

Lets see how we will fashion tag hyperlinks under a submit in WordPress.

First it’s essential to discover out the CSS class utilized by your WordPress theme to show tags. To try this proper click on on tags and choose examine factor from the browser menu.

This may break up the browser display to show developer software field under the webpage. Within the developer toolbox, you’ll be able to see the CSS class utilized by your WordPress theme to show tags.

Finding the css class used by the theme for tags

Within the screenshot above you’ll be able to see that the theme is utilizing phrases for CSS class. Now we are going to use this class in our theme or little one theme’s stylesheet to override the default theme CSS.

.phrases a, .phrases a:visited, .phrases a:energetic  
background:#eee;
border:1px strong #ccc;
border-radius:5px;
text-decoration:none;
padding:3px;
margin:3px;
text-transform:uppercase;


.phrases a:hover 

Be at liberty to switch CSS to match your theme’s colours. That is how the tags seemed on our demo web site:

Changed CSS style for tags below posts in WordPress

It’s possible you’ll discover the distinction between the 2 screenshots aside from the CSS adjustments, we additionally modified Tags to Tagged and eliminated the commas between tags. How did we do that?

We modified the_tags(); template tag in our single.php file like this:

<?php the_tags('Tagged:', '' ,'' ); ?>

If you wish to restrict the variety of complete tags exhibited to let’s say 5 or one thing else, then confer with this text on how one can present restricted variety of tags after submit.

We hope this text helped you fashion tags in WordPress. Be at liberty to experiment with the CSS till you get the specified end result.

If you happen to favored this text, then subscribe to our YouTube Channel for extra WordPress video tutorials. You may also discover us on Google+ and Twitter.

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *