• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials Widgets & Plugins

Display and Style WordPress Tag Cloud Widget with Categories Too

October 13, 2015 Updated on November 23, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

WordPress comes with two widgets for displaying your tags and categories. Depending on the number of blog post tags and categories, you can use these widgets as they are. But you can also style your list of tags or categories, so they are more useable by your readers. This tutorial shows you how to display and style WordPress Tag Cloud widget to add buttons for both post tags and categories.

wordpress tag cloud widget styled as buttons for tags and categories



This is how the Categories widget displays the list of categories. In the Genesis Sample theme, it underlines the links and adds a line between. This is a great option if you have only a few categories, but that list can get quite long and take up your entire sidebar. Another choice for the Categories widget, if you have lots of categories, is to hide them behind a select drop down, but then it’s not as easy for reader to see them.

default wordpress categories widget

There is another option; you can use the WordPress Tag Cloud widget instead. By default the tag cloud widget will show either tags or categories, and display the links at different font sizes depending on the number of posts using that tag or category. While this is great if you want to highlight your most popular categories, some of the lesser used categories or tags will be really tiny and difficult to read.

default tag cloud widget for tags and categories

So let’s see what we can do.

Add the Tag Cloud Widget

  • Under Appearance > Widgets or Appearance > Customize, drag the Tag Cloud widget to your sidebar.
  • Give the widget a Title
  • Under the drop down, choose either Categories or Tags.

I’m choosing Tags for this example, but I often use Categories. If you have custom taxonomy, such as e-commerce (Woocommerce, iThemes Exchange) product categories, you can choose them too.

Style WordPress Tag Cloud Widget

You can add styles to your Custom CSS editor or you can edit your child theme style.css.

  • The first thing you want to do to give a button look to your tags and categories is to add display: inline-block;
  • Next you can make the links all the same font size; you will also need to add an !important declaration. Use font-size: 16px !important;
  • Then you can remove the link underline. text-decoration: none;
  • Then add a background color, so it starts to look like a button. background-color: #ddd;
  • The buttons are a bit small, so you can add some extra padding. padding: 2px 5px;
  • And last, add some margin between the buttons. margin: 0 5px 5px 0;

Add Some More Styles

  • You could also change the link color, especially if your link color doesn’t go with your button color. color: #000;
  • If you want your buttons to have rounded corners, add border-radius: 3px;
  • You can also give the tag and category buttons different colors on hover. color: #c3251d; and/or background-color: #999;

The CSS to Add to Your style.css

This CSS is for the right side of the first image.

.widget_tag_cloud .tagcloud a {
	background-color: #ddd;
	border-radius: 3px;
	color: #000;
	display: inline-block;
	font-size: 16px !important;
	margin: 0 5px 5px 0;
	padding: 2px 5px;
	text-decoration: none;
}

.widget_tag_cloud .tagcloud a:hover {
	background-color: #999;
	color: #c3251d;
}

Another Option for Genesis Sample Theme

This CSS is the left side of the first image.

.widget_tag_cloud .tagcloud a {
	background-color: #999;
	color: #c3251d;
	display: inline-block;
	font-size: 16px !important;
	margin: 0 5px 5px 0;
	padding: 2px 5px;
	text-decoration: none;
}

.widget_tag_cloud .tagcloud a:hover {
	background-color: #ddd;
	color: #000;
}

This a simple method to style WordPress tag cloud widget with your tags and categories to allow readers to choose them easily. It’s a good option for e-commerce product categories. You can add a comment with your CSS for your categories.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Rainer says

    Hello Marcy,

    big thanks for your helpful article about tag cloud widget. But there are two questions left and I hope you can give an answer:
    – How can I make the text in justified print?
    – How can I set that the widget will use for example three or four rows?

    Thank you and greetings from Germany

    Rainer

    Reply
    • Marcy Diaz says

      Thanks for your comments, Rainer. The only solution I can think of to justify the tags or categories is to use flexbox. You can read more here – https://css-tricks.com/snippets/css/a-guide-to-flexbox/. The rows happen automatically depending on the number of tags or categories and how long the name is. You can use a smaller font-size, if you want less rows, I suppose.

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework