How to Assign a Static Page as the Front Page in WordPress
How to Write Your First Blog Entry
Add Bio to Your Website with WordPress Widgets

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

WordPress allows you to use a custom tag to display custom styles for sticky posts (posts that stay at the top of your blog at all times), categories, and tags on your WordPress 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.

When you publish new posts to your blog, there are different options you can set for your blog posts, such as categories, tags, and publishing settings. One of the settings is the Stick This Post to the Front Page setting. You can custom style those sticky posts — it's not as messy as it sounds!

For example, a post could 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">

CSS selectors and HTML markup work together to create style and format for your WordPress theme. 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;}

    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: 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: If you blog a lot about WordPress, your readers may appreciate it if you give them a visual cue as 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 is 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!

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Adding a Blog to Your Website
Add Subhead Tags in WordPress
How to Assign a Static Page in WordPress
How to Create a Sandbox Environment to Test Your WordPress Designs
How to Add a Blog to Your WordPress Website
Advertisement

Inside Dummies.com