Show WordPress tags in website menu without plugin

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

While using WordPress, you might need to display tags in menus or sub-menus of a website.

WordPress tags with default look usually fails to blend with a pre-existing website design. Here we show a simple way to customize tags without using any plugin.

To display tags, use basically use wp_tag_cloud($args) WordPress function. This function retrieves tags and displays according to the arguments provided to the function. You can get more info about the function on the WordPress website.

For displaying tags in website menu, we use this function with arguments,

wp_tag_cloud('smallest=9&largest=9&number=18&orderby=count&order=DESC&format=list')

This would show 18 tags in list format with text of equal size i.e 9px. Here 9 is font size, 18 is the number of tags, DESC is how we want to sort tags and list is the format in which the tags are displayed.

Here is the HTML code that’s automatically added when you apply this function,

<ul class='wp-tag-cloud'>
  <li><a href='permalink to tag1'></a></li>
  <li><a href='permalink to tag2'></a></li>
  <li><a href='permalink to tag3'></a></li>
  .
  .
  .
  <li><a href='permalink to tag18'></a></li>
</ul>

We customize the appearance by altering the CSS code of this HTML file. This is how I’ve altered it,

/*Place this code only after using the function otherwise it'll get overridden*/

ul.wp-tag-cloud li
{
  width: 130px;
  float: left;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 6px;
}

ul.wp-tag-cloud a
{
  color:#3090c9;
  padding:4px;
  background:white;
}

ul.wp-tag-cloud li a:hover
{
  background:#008EFF;
  color:white;
}

It would look like ‘More Topics’ section on right of this webpage.

You just need to include the function and alter the above CSS code to add tags in menus and sub-menus of your website without hurting the website design.

blog comments powered by Disqus