If you know me, you know that I like to use as many cool features in a website as possible. I don’t have everything just the way I want it right now, but it only gets better from here! I’m really excited about my soon-to-come archives page, as well as an awesome new sidebar layout.

Follow me on twitter @drudarby, or facebook @drumichael87 to keep up to date on my new site.

Some of the new things I’ve done that I really like are:

• The new logo is my own handwritten signature
• Nifty Description text on the navigation items on hover
• Blog post rating system
• Official portfolio page
• Using TimThumb for post images – however I plant to try out the native Featured Image feature soon

These are just a few of the things that I plan to implement in the site, and there’s more to come!

Go ahead and collect the images that you want to use for your pages, and have them uploaded to your template directory. I like to keep the naming method easy, so my images are named “contact_img.png”, “portfolio_img.png”, etc. Also, to keep the images on the pages consistent, make sure they are all the same size. My images are all 64×64.

We are going to set the image as the background of the div holding our title, as well as make the size of the text larger for pages than it is for posts. The way to identify a div in a stylesheet is by assigning it a “class”. The class that we give the div on our POSTS looks like this:

<div class="title">
   <?php the_title(); ?>
</div>

The class can always be the same (title) for our POSTS because we aren’t going have dynamic styles for each post. For our PAGES, however, we want to have a class that is different for each page, without having to create a template file in our theme for each page.
We want to change two things about our title div’s: font-size and background-image. Font-size will be the same for each page, and background-image will be different for each page, so we can use two classes on the one div.

<div class="<?php if ( is_page() ) {
 echo "page_title";
 } else {
 echo "title";
 } ?> <?php the_title(); ?>">
 

What you see here is a dynamically created class. First, WordPress checks to see if what we are looking at is a page, and if it is, it prints (echos) “page_title”. If it’s not, it simply prints “title” which is what we want for our posts. Then there’s a space, and finally the title. When we view source of a page, we see this for the Portfolio page:

<div class="page_title Portfolio">
Portfolio
</div>

Now, in our CSS, we can style the image background as well as the size and indent of the text:

.page_title {font-size: 6em; text-indent: 68px; }
.Portfolio {background: url(images/portfolio_img.png) no-repeat; }

Notice we had to use text-indent to move the text to the right to be out of the way of the background image we are using. The images I used are all 64px, so giving a 68px indent gives us room for the image, plus a little padding.

I hope this tutorial has been helpful. Let me see how you’ve implemented it!