Custom Styles for Sticky, Category, and Tag Posts

In Book VI, you can find the method for putting a very basic WordPress theme together, which includes a Main Index template that uses the WordPress Loop. You can use a custom tag to display custom styles for sticky posts, categories, and tags on your blog. That special tag looks like this:

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

The post_class() section is the coolest part of the template. 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, say that you publish a post that has the following options set:

• Stick this post to the front page.
• Filed in a category called WordPress.
• Tagged with News.

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

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

In Book VI, you can discover CSS selectors and HTML markup, and how they work together to create style and format for your WordPress theme. With the post_class() tag in place, You can now 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;}

  A style is created for all posts that 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: You stick a post to your front page 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 code creates a style for all posts that have been designated as ‘sticky’ in the post options on the Write Post page to appear on your site with a white background, a thick red border, and 10 pixels of padding space between the post text and border of the post.

• .category—wordpress: Because Lisa blogs a lot about WordPress, her readers may appreciate it if she gives them a visual cue as to which posts on her blog are about that topic. She can do that through CSS by telling WordPress to display a small WordPress icon on the top-right corner of all her 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 she assigns to the WordPress category on her blog.

• .tag—news: Lisa can style all posts tagged with News the same way she styles 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.

You can easily use the post-class() tag, combined with CSS, to create dynamic styles for the posts on your blog!