How to Easily Display Tags on post in WordPress

Tags are a simple way to arrange content in WordPress. They help your visitors find related posts easily. But many people don’t display tags properly. The basic design of WordPress tags looks boring and simple.

In this guide you will learn:

• Design the default tag cloud properly

• Changing the style of tags below each post

• Creating custom tags according to your website design

After this guide, you will be able to display your website’s tags in a way that they look good and are also helpful for users.

Want to stay ahead with AI-driven WordPress insights and stay updated with the latest trends? Subscribe for daily search insights at wpguidepro to improve your WordPress strategy!

How to Display Tags in WordPress

Before starting styling, we should understand how tags are displayed in WordPress. WordPress gives us some easy ways through which we display tags on our website.

Putting tags inside the post.

The most commonly used way is to display tags below every post. Usually WordPress themes do this work themselves. But if you want, you can also change the style and location of these tags.

If you want to show tags yourself, you can write this code in a single post file of your theme:

<?php
$tags = get_the_tags();
if ($tags) {
    echo '<div class="post-tags">';
    foreach ($tags as $tag) {
        echo '<a href="' . get_tag_link($tag->term_id) . '" class="tag-link">' . $tag->name . '</a>';
    }
    echo '</div>';
}
?>

This code shows the tags below your post. You can change these tags according to your design with the help of CSS.

• get_the_tags() fetches tags from the post

• get_tag_link() creates a link for each tag

Using the Tag Cloud Widget

There is a built-in widget in WordPress called Tag Cloud. This widget shows your most used tags in different sizes. The tag which is used more, its size is also bigger.

How to add this widget:

• In WordPress dashboard, go to Appearance > Widgets

• Find the Tag Cloud widget

• Drag it to the sidebar or any widget area

• Adjust the settings as per your requirement and save it

This widget shows the tags in smaller or bigger size according to the frequency of their usage. This way important topics are visible quickly.

Displaying Tags on the Page Sometimes you want to display tags not just in the post but also on a static page. To do this, you can use a special function called wp_tag_cloud().

You can write this code in your page template:

<?php
wp_tag_cloud(array(
    'smallest' => 12,
    'largest' => 22,
    'unit' => 'px',
    'number' => 20,
    'format' => 'flat',
    'separator' => ' ',
    'orderby' => 'name',
    'order' => 'ASC'
));
?>

This function gives you a lot of customization. You can decide what the font size should be, how many tags should be displayed, in what order they should be displayed, and what their style should be.

Styling The Default Tag Cloud in WordPress

The tag cloud in WordPress looks a little simple. But you can make it better by styling it.

1. Change the design of the tag cloud

You can make your tag cloud look better by using a small CSS code.

What will happen with this CSS?

The tag cloud will come in the center

There will be a slight color behind

Each tag will look like a round button

When the mouse goes on it, it will rise slightly

This CSS works:

.wp-tag-cloud {
  text-align: center;
  margin: 20px 0;
  padding: 20px;
  background: light grey;
  border-radius: 8px;
}

.wp-tag-cloud a {
  display: inline-block;
  background: blue;
  color: white;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.wp-tag-cloud a:hover {
  background: dark blue;
  transform: translateY(-2px);
  box-shadow: halka shadow
}

1. Create the Tag Cloud according to your needs If you want to:

• Show only a few tags

• The font size should be the same

• Show the most used tags first

• Hide some tags

Then you can use this PHP code:

<?php
wp_tag_cloud(array(
  'smallest' => 14,  
  'largest' => 14,    
  'number' => 30,     
  'orderby' => 'count', 
  'order' => 'DESC',  
  'exclude' => array(1, 5, 12),
));
?>

1. Make Tag Cloud Mobile Friendly If people view your site on mobile, then the tag cloud should be visible properly. For this apply this CSS:

.wp-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wp-tag-cloud a {
  min-width: 60px;
  text-align: center;
}

@media (max-width: 768px) {
  .wp-tag-cloud a {
    font-size: 12px;
    padding: 6px 12px;
  }
}

What will happen with this?

• The tags will fit nicely in line on the mobile screen

• Every tag will look good in size

• The design will look good on the phone too.

Styling Post Tags in WordPress

When you publish a post in WordPress, you see tags below. These tags take people to other posts related to your post.

Now we will learn how to style these post tags so that they look more beautiful, colorful and modern.

Designing Post Tags (Simple Style)

If you want your post tags to appear inside a nice box, then apply this CSS:

.post-tags {
  margin: 30px 0;
  padding: 20px;
  background: gradient blue-purple;
  border-radius: 10px;
}

.post-tags h4 {
  color: white;
  font-size: 16px;
  margin-bottom: 15px;
}

.post-tags a {
  background: white glass look;
  color: white;
  padding: 6px 12px;
  border-radius: 15px;
  margin: 0 8px 8px 0;
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid white line;
  transition: 0.3s;
}

.post-tags a:hover {
  background: white;
  transform: zoom in;
}

Creating Icon-Based Tag Displays

If you would like a small icon to appear next to the Tags title, use the following command:

HTML:

<div class="post-tags-with-icons">
  <h4><i class="fas fa-tags"></i> Related Topics</h4>
  <div class="tag-list">
  </div>
</div>

CSS:

.post-tags-with-icons {
  border-left: 4px solid blue;
  padding-left: 20px;
  margin: 25px 0;
}

.post-tags-with-icons h4 {
  color: dark grey;
  margin-bottom: 10px;
}

.post-tags-with-icons h4 i {
  color: blue;
  margin-right: 8px;
}

.tag-list a {
  background: light grey;
  color: black;
  padding: 8px 15px;
  border-radius: 25px;
  margin: 0 5px 5px 0;
  display: inline-block;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}

.tag-list a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: light blue shine;
  transition: 0.5s;
}

.tag-list a:hover::before {
  left: 100%;
}

Color-Coded Tag Systems

Organize tags by category using color coding:

// WPGuidePro: Custom Colorful Tags Function
function wpguidepro_colored_tags() {
    $colors = array(
        '#e74c3c', '#3498db', '#2ecc71', '#f39c12',
        '#9b59b6', '#1abc9c', '#e67e22', '#34495e'
    );

    function wpguidepro_get_tag_color($tag_id, $colors) {
        return $colors[$tag_id % count($colors)];
    }

    $tags = get_the_tags();
    if ($tags) {
        echo '<div class="wpguidepro-colored-tags">';
        foreach ($tags as $tag) {
            $color = wpguidepro_get_tag_color($tag->term_id, $colors);
            echo '<a href="' . get_tag_link($tag->term_id) . '" style="background-color:' . esc_attr($color) . '" class="colored-tag">' . esc_html($tag->name) . '</a>';
        }
        echo '</div>';
    }
}