WordPress Tag Cloud Sass/CSS Styles

The WordPress tag cloud is one of the default widgets shipped with WordPress core. It’s not something you often see with corporate or business sites, but is still somewhat useful for typical blogs, and perhaps even for ecommerce stores with 100+ items. Sometimes theme developers don’t pay much attention to the styles that are applied to the tag cloud widget.

I’ve developed some quick-and-easy CSS styles to use with WordPress’ default tag cloud. You can drop these into your theme’s (or child theme’s) style.css file, a custom CSS plugin, or use them as a theme developer to give you a jumpstart on designing your tag cloud.

I use Sass, so I’ll provide styles both in .scss format, as well as vanilla .css.

Caveats

• For the Sass version, I’m using variables for colors. Be sure to define them in your own code, or replace with hex values.
• I’m using Brian Franco’s Flexbox mixins for cross-browser compatibility. This must be included for the code below to work exactly as written.
  • Or you could just use basic CSS Flexbox properties
• I’m using a filter to adjust the font-size of the tags. See below for code.

WordPress Tag Cloud Sass Styles

Remember to include the Flexbox mixins, and define variables for $link-color and $white.

.tagcloud {
	@include flexbox();
	@include flex-wrap(wrap);
	@include align-items(center);

	a {
		display: inline-block;
		margin: 0.125rem;
		padding: 0.4375rem;
		background: rgba( $link-color, 0.2 );
		border: 1px solid rgba( $link-color, 0.2 );
		transition: all 0.1s ease-in-out;

		&:hover,
		&:focus {
			background: $link-color;
			color: $white;
			transform: scale(1.1);
		}
	} // a

} // .tagcloud

WordPress Tag Cloud CSS Styles

You can replace the rgba values and keyword value “blue” with any hex value you’d like.

.tagcloud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.tagcloud a {
	display: inline-block;
	margin: 0.125rem;
	padding: 0.4375rem;
	background: rgba(0, 0, 255, 0.2);
	border: 1px solid rgba(0, 0, 255, 0.2);
	transition: all 0.1s ease-in-out;
}

.tagcloud a:hover,
.tagcloud a:focus {
	background: blue;
	color: white;
	transform: scale(1.1);
}

Tag Cloud Styles Explained

Here’s a brief rundown of what these styles are doing.

• display: flex; allows us to use Flexbox
• flex-wrap: wrap; is required so that a large number of tags will wrap onto new lines. Otherwise they’d try to squeeze into one row.
• align-items: center; vertically aligns the tags in the middle (when one row has both large & small tags)
• We apply a small padding to the <a> tags (which give the text room to breathe once we add the background & border)
• The transition property creates the smooth animation on hover
• The transform property, with a scale value of 1.1, is what makes the tags get larger on hover

How to Adjust Tag Cloud Font-Size

WordPress’ default tag cloud font size is set to the following:

• Smallest: 8pt
• Largest: 22pt

I like to use relative units to set my font size, so a range from 8pt to 22pt didn’t work for me. Thankfully, there’s a wp_tag_cloud() function that allows us to customize the output of the tags. (see codex)

I placed the following code in a custom functionality plugin to set my font sizes to:

• Smallest: 90%
• Largest: 170%

add_filter( 'widget_tag_cloud_args', 'smack_widget_tag_cloud_args' );
function smack_widget_tag_cloud_args( $args ) {
	$args['largest'] = 170;
	$args['smallest'] = 90;
	$args['unit'] = '%';
	return $args;
}

Props to Konstantin Kovshenin for the code.