Custom Post Image in WordPress [How-to]

Hey guys, today I thought I would teach you all how I got the images above all my main posts just like this one does. The reason I feel I must do this is because I had a hard time figuring out how to do it and thought I could help you out by making a tutorial and walking you through it.

Lets Begin

Ok, to start you will first need to decide what dimensions your post images are going to be. It is best not to exceed or match the width of your post columns because exceeding it lookes horrible and matching it lookes like you’ve taken your white-space borders away. If you have a 600 width column then it’s best to go with a 500 width (550 at the most) image to keep some white-space in there.

Personally I have my image dimensions set to 180 Height and 500 Width because it’s not too big and it’s not too small.

Creating an Image

Now you will need to create an image that you’re going to use for a specific post. What you’re going to want to do is open your graphics/drawing program such as PhotoShop, GIMP or something of that nature to use to create your image.

Now that you have your graphics program open, set the dimensions of your image to your chosen settings as talked about above. You now have a canvas for your post image to work on.

Relevance

Think of something relevant to your article (post) and base your post image around that. Like one of my Call of Duty posts, I used a screenshot of the game to base the image around and just added a few effects to it to make it unique.

Effects

Good effects are what make your post image seem interesting and in-turn, make your post seem more interesting. So what you must do is play around with the effects that come with your software or better yet, make your own.

A good one to use would be a fade to black border or another colour that fits with your theme. You could also do a glowing effect around the main part of the image.

Extras

Another thing some people like to do is add the post title (or a summary) and a description of the article to the image as an overlay to give more information. Personally I don’t do this, I prefer to let the readers read the actual title and have the image there to add a bit of colour and also as something nice to help get the point across.

A good example of this would be the following post image from a site I used to visit a fair bit:

As you can see it has got the title of the post and an description that is semi-transparent so you can still see the whole picture. That is the kind of thing you want to be aiming for.

The Code

What you need to do now is open up index.php, single.php and any other file that has the loop in it.

Once those files are open, look for a code that lookes like this:

<?php the_content(__('Continue reading &raquo;',TDOMAIN)); ?>

 

When you have located it, add the following code directly above it.

<center><?php $thereisimage = get_post_meta($post->ID, image, true);
if($thereisimage){ ?>
	<a href="<?php the_permalink() ?>"><img src="<?php echo get_post_meta($post->ID, image, true); ?>" alt="Image" /></a>
<?php }else{ ?>
<?php } ?></center>

 

Code Breakdown

What this code will do is search for a custom post field (that you will make soon) that is named ‘image’ (which you can replace with any other word of your choice, just make sure it’s consitant) and display the contents of that custom field. In this case it is searching for an image so we must tell it to display it as an image using the html image tags.

The reason we are using an ‘if’ function here is because it’s best for it to only display something if you’re actually using an image for that post, else, it will display nothing. This helps for posts that you do not want an image on, such as my blog page, I don’t want any images above those ones because they’re not ment to be professionally done.

It has also got center tags around it to keep it in the middle of the page and make it look a bit nicer.

Adding the Image

Ok, now to add the image you have created, you must upload it somewhere such as the WordPress image uploader located in the Media section.

Once you have uploaded it, it’s time to utilise the code you have added to your theme.

Now, when you’re creating a post, not far down from your WYSIWYG editor (the thing you type your content into) you should see a section called “Custom Fields” it should look like this:

This is what you will be using to add your image. It might look a bit daunting at first but it’s really quite simple.

Steps

Ok, first you need to create the custom field to hold your image.

  • Click “Enter new”, and a text box will come up.
  • Type the name you used in your code (I.E ‘image’).
  • In the box next to that called “Value” put in the direct link to the image that you uploaded earlier.
  • Click “Add Custom Field”

And that’s it!, once you have published it (or view it as a draft) it will have the image centered above your content.

Next time you want to add an image after this, all you have to do is click the drop-down arrow and select ‘image’, add the link to your image and hit “Add Custom Field” all the rest is taken care of by the code you added.

Conclusion

And there you have it!, you should now have an easy to add post image avaliable for you to use with minimal fuss. I hope you enjoyed this How-to and I hope you were able to follow it, if you have any troubles or questions, please don’t hesitate to ask in the comments, I’ll be glad to help.

Thanks for reading!

2 thoughts on “Custom Post Image in WordPress [How-to]

  1. Lisa

    This is pretty good. I think someone with limited IT experience would be able to follow this. Well done.

    Lisa

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *