How to Create Custom Styles for Sticky, Category, and Tag Posts - dummies

How to Create Custom Styles for Sticky, Category, and Tag Posts

By Lisa Sabin-Wilson

You can use a custom tag to display custom styles for sticky posts (posts that stay at the top of your WordPress blog at all times), categories, and tags on your blog. That special tag looks like this:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

The part of that template tag that is so cool is the post_class() section. This template tag tells WordPress to insert specific HTML markup in your template that allows you to use CSS to make custom styles for sticky posts, categories, and tags.

For example, posts can be published with the following options set for it:

  • Stick This Post to the Front Page

  • Filed in a Category Called WordPress

  • Tagged with News

By having the post_class() tag in your template, WordPress inserts HTML markup that allows you to use CSS to style sticky posts, or posts assigned to specific tags or categories, differently. WordPress inserted the following HTML markup for the post:

<div class=”post sticky category-wordpress tag-news”>

You can go to your CSS file and define styles for the following CSS selectors:

  • .post: Use this as the generic style for all posts on your blog. The CSS for this tag is

    .post {background: #ffffff; border: 1px solid silver; padding: 10px;}

    This style makes all posts have a white background with a thin silver border and 10 pixels of padding space between the post text and the border of the post.

  • .sticky: The concept of sticking a post to your front page is to call attention to that post, so you may want to use different CSS styling to make it stand out from the rest of the posts on your blog:

    .sticky {background: #ffffff; border: 4px solid red; padding: 10px;}

    This creates a style for all sticky posts that consists of a white background, a thicker red border, and 10 pixels of padding space between the post text and border of the post.

  • .category-wordpress: Say that you blog a lot about WordPress. Your readers may appreciate it if you give them a visual cue to which posts on your blog are about that topic. You can do that through CSS by telling WordPress to display a small WordPress icon on the top-right corner of all your posts in the WordPress category:

    .category-wordpress {background: url(wordpress-icon.jpg) top right no-repeat; height: 100px; width: 100px;}

    This code inserts a graphic — wordpress-icon.jpg — that’s 100 pixels in height and 100 pixels in width at the top-right corner of every post you’ve assigned to the WordPress category on your blog.

  • .tag-news: You can style all posts tagged with news the same way you’ve styled the categories:

    .tag-news {background: #f2f2f2; border: 1px solid black; padding: 10px;}

    This CSS styles all posts tagged with news with a light gray background and a thin black border with 10 pixels of padding between the post text and border of the post.

Using the post-class() tag, combined with CSS, to create dynamic styles for the posts on your blog is fun and easy!