Tag Cloud

If you haven’t created a child theme, then you’ll want to use a CSS plugin like Jetpack or Custom CSS Manager and add this rule:

.widget .tagcloud a {
   border: 1px solid #eee;
   padding: 0 7px;
   margin: 0 7px 7px 0;
   text-transform: uppercase;
}

The above properties and their values were taken from the demo that you linked to.

The first property, border, draws the border around the link. The padding and margin properties determine how much space there is on the inside of the “buttons” and how much space there is between buttons. If you want the text to appear in mixed case, then leave off the last property (text-transform).

Thanks so much for your help with this, CrouchingBruin!

I’ve updated the css and there are now boxes around each word.

Can you also help me increase the font size? And the padding above/below each word within the box? I see that

padding: 0 7px;

changes the padding on the left and right-hand sides, but is it possible to increase the padding above and below?

Thank you!

Do you want to keep the same relative font sizes? That is, the current tag cloud sets the font size based on how often the tag is used. Here are some rules which you can add to affect the font sizes:

.widget .tagcloud a[title="1 topic"] {
   font-size: 8pt !important;
}
.widget .tagcloud a[title="2 topics"] {
   font-size: 16.4pt !important;
}
.widget .tagcloud a[title="3 topics"] {
   font-size: 22pt !important;
}

The values listed are what’s currently in effect. The first rule is for tags which have the fewest counts, and the subsequent rules go up from there. It may go higher than 3 topics, I just don’t have enough content on my test site to see if it does. If you want to make all of the tags the same size, then you can just modify the rule that I gave you earlier by adding this property to it:

font-size: inherit !important;

This is the value that’s used in your previous blog.

is it possible to increase the padding above and below?

Just change that first zero to some other value (be sure to add the units px after it).

Sorry about that – looks like there’s a missing class in the theme’s stylesheet. To get the identical styles as on WordPress.com for the tag cloud, this is the CSS you’d need to add to your custom CSS plugin or child theme.

.tagcloud a {
  border: 1px solid #eeeeee;
  color: #999999;
  display: inline-block;
  font-size: inherit !important;
  letter-spacing: 1px;
  margin: 0 7px 7px 0 !important;
  padding: 0 7px;
  text-transform: uppercase;
}
.tagcloud a:hover {
  border-color: #f68060;
  color: #f68060;
}

I’ll also report this to our developers so they can get it fixed up in the next version of the theme. Thanks for the report, and thanks to CrouchingBruin for the workarounds!

Thanks, guys!

Worked like a charm ??