Featured images are a great way to automatically include some color in your post, which is a great way of dressing them up, provided it is done right. Until WordPress 3.0 came out, it was a little more difficult to include these. It’s now a native feature in WordPress 3.0+ though and this tutorial walks you through how to implement them.
Add the function
If you have a functionality plugin, pull it up in the plugin editor. If you don’t have one, load up functions.php in your theme editor. At the very bottom of the file, add the following code snippet, which adds the functionality for featured images:
Display the image in your post
Now that you’ve added the capability, you just need to tell WordPress where to load the image and how to display it.
Using the theme editor, load up single.php and find the line that looks like the following. This is the line that displays the post content:
In this tutorial, I’m going to assume you want to show the thumbnail at the top of the page, with the content wrapped around it. In order to do so, we want to add the featured image code in before the content call.
Paste the following code ahead of the line of code above:
Set how the image will appear
You can either use one of your three preset thumbnail sizes (as set in Settings > Media) for your featured image, or you can dictate a new size altogether. You’ll change the thumbnail call according to which size you want it:
For the custom size, replace width and height with the number of pixels that each length should be. For example, to show an image 250 pixels wide and 150 pixels high, use:
Now it’s time to style the image with a little CSS. I’m going to show you one way to do it, but you’ll need to tailor the styling to your specific theme, so that it fits in. If you need some help with this, leave me a comment and I’ll be glad to help.
This will be a little different for everyone, but my post content was given a set CSS selector (entry-content). Since I’ve included my featured image call inside that CSS class, I’m going to use a specific CSS ID for the post thumbnail. Before I added my featured image code, my post content call looked like this:
Now, I’ve added an ID for the post thumbnail and the code in my single.php looks like this:
Now we need to specify what CSS rule set will be applied to the image. Load up your stylesheet (style.css) in your theme editor. Find the CSS class that is set for your post content (entry-content in my case) and scroll down to the end of that section (until there are no more rule sets that start with entry-content). Now you’re going to add the following rule set right after it:
This will display your image in the top right of your content, put a 1 pixel black border around it and give you a 10px margin below it and to the left of it, so that the content doesn’t butt right up to the edge of the image.
If you also want to display the image caption below the image, say for crediting the photographer where a Creative Commons image is used, use the following code in single.php instead:
So did you get it to work? How does it look? Are you taking your blog to the next level?