Easily Style WordPress Posts According to Tag

We talked before about styling a sticky post with CSS to make it stand out. We also talked about giving categories their own icons.

However, in both of those situations, you are tied to either making the post a sticky or having it in a certain category in order to make it stand out.

But what if you had non-sticky posts in various categories that you wanted to stand out?

The solution is to add a special tag to the post, and then style all posts with that tag.

An Example

Let’s say we want to style all posts with the tag “special” a certain way. We would simply add the tag “special” to our post in the same way we normally add a tag to a post.

And then we would add our styling for that tag to our CSS stylesheet.

>> In your Admin area, go to Appearance > Editor

>> This should take you to the Stylesheet (style.css) for your theme.

(If you have a custom.css stylesheet, then you’ll want to use that. A custom stylesheet allows you to add styles that won’t be overwritten if the theme is updated.)

>> At the bottom of your stylesheet, add the styling you would like for your tag. Here’s an example:

.tag-special {background: #A2D9FD; border: 3px solid black; padding: 10px;}

This will add a light blue background and a border to the post wherever it appears on your site – this includes on your front page, your archive pages, and on the single page of the blog post itself.

Post with “Special” Tag on Front Page

Post with “Special” Tag on Single Post Page

Other Uses and Possibilities

Of course you can add as many different tags with as different types of styles as you like. You can also use background images as we did when we gave categories their own icons.

To use a background image, you would use styling such as this in your CSS stylesheet.

.tag-special {
background: url(http://example.com/wp-content/uploads/musicman60.jpg) no-repeat top right;
}

The result would look like this:

More Flexibility

In some cases, of course, styling a whole category may be just what you need. But if you need more flexibility in order style posts across various categories, then styling by tag could be just what you’re looking for.

Photo: Red Tag from BigStock

Tags:

• CSS
• tags