post_classThis tutorial highlights themes created with Artisteer but can be applied to virtually any theme that doesn’t already have semantic classes. Adding dynamic semantic classes to your theme will allow you to style your theme down to the smallest detail. Suppose you want all of the posts on your blog that occurred in the winter to have a special wintery style. By adding new class functions every post will have an abundance of additional class selectors.

art-classThis is what the standard Artisteer theme gives you for class selectors on each post. Compare that to the image above. You can see that your choices are limited. In fact you only have one choice. This is the problem I had when creating the Cool Blue theme. I was forced to add external styling to everything because there were simply no other choices. Just think of all the stylin’ you can do with all of those new selectors.

There’s two ways to accomplish this improvement. This way is the simplest but will only work for WP2.7+. You simple add some code into the Post div using the 2.7 post_class tag. The second and more flexible method will be discussed in another tutorial where I’ll show you how to add classes to the body, posts and comments. Plus it will work with older version of WP.

WordPress 2.8 adds yet another new tag, body_class to generate additional classes for the body.

So let’s get started.

Find this bit of code in your index.php…

<div class="art-Post">

And change it to this…

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

That’s it for the index.php. You also need to modify page.php & single.php with the same modifications plus any other files you may have that include the class=”Post” div.

post_classThis will add new class selectors to each post and is fairly easy to implement but will only work with WP2.7+. Now all you have to do is add some CSS to style with your new classes. Here’s an example of how you would add some class to a ‘sticky’ post…

.sticky {
	background-color: #ffffff;
	background-image: url(images/featured.png);
	background-position: right top;
	background-repeat: no-repeat;
}

Here’s the result of this style for a ‘sticky’ post…

sticky

Now we can add some new body classes as long as your running WP2.8.

This is even easier to accomplish. Should take less than 5 minutes.

Open your header.php file and find this line…

<body>

And change it to this…

<body <?php body_class(); ?>>

Believe it or not, that’s it. When you view your page source you should see something similar to this…

body

These are the possible classes that are available with the body_class:

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(id)
  • attachmentid-(id)
  • attachment-(mime-type)
  • author
  • author-(user_nicename)
  • category
  • category-(slug)
  • tag
  • tag-(slug)
  • page
  • page-parent
  • page-child parent-pageid-(id)
  • page-template page-template-(template file name)
  • search-results
  • search-no-results
  • logged-in
  • paged-(page number)
  • single-paged-(page number)
  • page-paged-(page number)
  • category-paged-(page number)
  • tag-paged-(page number)
  • date-paged-(page number)
  • author-paged-(page number)
  • search-paged-(page number)

This allows you to isolate and style just about every situation.

That’s it! Stay tuned for the next tutorial on adding even more semantic classes to your theme.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranky, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.

Comments are closed.

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“Ancient Rome declined because it had a Senate; now what's going to happen to us with both a Senate and a House?”

by Will Rogers