Custom Styles for Sticky Category Tag Posts

In Chapter 12, I discussed the method of putting a very basic WordPress theme together, which included a Main Index template using 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 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 allow you to use CSS to make custom styles for sticky posts, categories, and tags.

In Chapter 8, I tell you all about how to publish new posts to your blog, including the 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. In this chapter, I show you how to custom style those sticky posts — it's not as messy as it sounds!

For example, I have published a post with the following options set for that post:

✓ Stick this post to the front page

✓ Filed in a category called WordPress

✓ Tagged with News and beh beh

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

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

In Chapter 13, I talk about CSS selectors and HTML markup and how they work together to create style and format for your WordPress theme. I can now go to my CSS file and define styles for the following CSS selectors:

✓ .post: Use this as the generic style for all posts on your blog. Te 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 display with a white background, a thicker red border, and 10 pixels of padding space between the post text and border of the post.

✓ .category—wordpress: Because I blog a lot about WordPress, my readers may appreciate it if I gave them a visual cue as to which posts on my blog are about that topic. I can do that through CSS by telling WordPress to display a small WordPress icon on the top-right corner of all my posts in the WordPress category:

.category-wordpress {background: url(wordpress-icon. jpg) top right no-repeat; height: 10 0px; 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 I've assigned to the WordPress category on my blog.

✓ .tag—news: I can style all posts tagged with News the same way I'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 grey 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!

Instant Ways To Monetize Your Blog

Instant Ways To Monetize Your Blog

Get Paid For What You’re Worth. Benefit From Your Talent. Get Your Due Credit. Provide Your Skills A Platform To Shine. Enhance Your Opportunities. Learn how to monetize your blog and reap the rewards of your skills.

Get My Free Ebook

Post a comment