Using images on your posts and pages is a great way to better the user experience on your website or blog. It separates your posts and pages from each other, and breaks the monotony of text, text and more text.
I’ve been asked a few times whether or not I used some “special method” of getting a different image beside the title of each of my pages here on my website. Remember that there are a few different ways of doing this, however since I only have 4 main pages on my website, this method worked pretty good for me. I don’t think it is really a “special method”, but here’s what I did.
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!
