Christian Little

Over the years I’ve had a lot of people ask me how to do this with WordPress, as just about every blog I’ve run displays some sort of image next to the posts on the homepage. It’s actually surprisingly simple to do, and there are several ways to go about doing it. So the code I’m showing today is just a very simple version, there are plugins available that do this but I like having direct control of the coding.

So the first step is to go into your WordPress Admin, then click on Design, then click on Theme Editor. This lets you edit the PHP/HTML coding of your WordPress theme (NOTE: Your theme files need read/write access for this editor to work, otherwise you have to edit the files directly through FTP or some file manager that your hosting company gives you).

Next you need to open the specific template file, which in this case will be the ‘Main Index Template’ (it may have a slightly different name on older versions, pre-2.0 WordPress I believe it was just called ‘Homepage Template’).

While I’m on the topic of older WP, this probably won’t work with anything pre-2.0 WP. I can’t remember if the older versions allow for Custom Fields or not, so upgrade to the latest version of WordPress before putting in this hack.

Once you’ve loaded the template, look for the code that displays the posts on the homepage, usually within a special WP loop that starts with this code:

if (have_posts()) : while (have_posts()) : the_post();

That’s the start of the WordPress loop, a built-in set of code that tells WordPress to loop through the last 10 posts on your blog (or however many you have set it to in your Options).

Once there, you simply need to find the code that creates the link to each post (which is just a basic anchor link that called the the_title() and the_permalink() functions. Replace that specific line of code with the following:

(If you are reading this post in an email, the above block of code probably won’t show up as I’m using an iframe to display it. So you’ll have to come to my site and view this posting to get the PHP and HTML code to do this hack).

What this code does is tell WordPress to display an image next to the post title on the homepage if the Custom Field “Image” has been declared on that specific post. If there is no “Image” custom field set, it just displays the anchor text without the image. That makes this safer than most plugins, as just about every plugin that offers this assumes you have set an Image and will display the IMG code in HTML, which can result in several broken images on your site.

So once you’ve put this code in, create a new post on your blog to test it. Simply create a test post, add some content, and then scroll down to the “Custom Field” section and add “Image” as the Key, and the filename as the value, example:

Once you post it, it will display whatever image is stored in “/images/wordpress.jpg” if you use that specific example. I use the “/images/” folder on my site for this, which has about 20-30 different icons for posts now.

NOTE: Please be sure to check the HTML coding that I’ve given you above and edit it to fit your site. Right now it will encapsulate it all in an H3 tag and use the “/images/” directory as a base. You need to change this information if it doesn’t look on your site.

NOTE 2: Don’t delete the ” that you see sitting on a line by itself. If you read through the code above it you’ll realize it has to be there to complete the URL declaration for the image code. If you take it out, you will get some HTML errors.

As I mentioned earlier, there are several other methods of doing this and plugins available, so here’s a few other ways people have demonstrated how to to this:

• Assign Images to WordPress Posts
• Adding an Image Lightbox/Gallery to Posts