Equal Design are Web Design in Lancashire

For a while now WordPress has had the functionality for you to add dynamic classes to your posts and pages.  So what are dynamic classes, how do they work and how can they help you when creating a website using WordPress?  In this post I will try to answer these questions and more.

Dynamic means change and that is exactly what WordPress’ dynamic classes do.  If you add them to a post then they will change depending on which post your are looking at.  Lets take a look at some of the code for this site to give you an example.  Each post on this site is wrapped in a div tag with the class ‘post’.  However this class is dynamic as it will change ever so slightly for each post.  For example the class for this post reads as follows:

<div class="post-82 post hentry category-tutorials tag-css tag-wordpress">

So what is going on there.  WordPress has assigned various classes to the post based on the properties that the post contains.  This post has been assigned the ID of 82 and therefore WordPress gives the post a class of ‘post-82″.  It is also assigned to the Tutorials category and therefore WordPress has also given it a class of “category-tutorials”.  This means that if I wanted to style something that is specific to this post (post ID 82) I can and also if I wanted to style something to show you that the post belongs to the Tutorials category I can.  In fact I have.  The post icon to the left of the post title is styled using this class.

What is also important here is that WordPress also gives every post in this div the class “post”.  This means that I can style this particular div globally throughout the site and just style posts different based on the dynamic classes that are given as and when I choose.  The CSS that I have used for the post-meta div where the icon is located is below:

#content .post .post-meta, #content .category-tutorials .post-meta, #content .category-design .post-meta, #content .category-portfolio .post-meta {
float: left;
display: inline;
width: 100px;
margin-right: 20px;
text-align: right;
background-image: url(images/cat-icon-general.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top: 40px;
margin-top: 6px;
font-size: 0.9em;
}

Then I can change the image for the post-meta area to represent the correct category using the following code, for example with the tutorials category, because I know that if a post is in that category it will have the class #content .category-tutorials .post-meta:

#content .category-tutorials .post-meta {
background-image: url(images/cat-icon-tutorials.jpg);
}

So to add this example of dynamic classes to your theme simply replace:

<div class="post">

with the following:

<div <?php post_class() ?>>

This is just one example of using dynamic classes in your WordPress site,but you could use them all over in order to completely customise the look and feel of the site just by using CSS functionlity.  Let me know how you get on.