Insert image thumbnails in WordPress posts

I have found that one of the simplest ways to manage images in wordpress is to use the custom fields. By simply inserting a “key” to identify the image, and the image path, you can easily manage and incorporate a variety of images into your site.

Step One

Decide what kind of image you want to use. In this case, we are going to insert a square thumbnail image next to each post, like below.

An image next to a post

An image next to a post

First you need to resize and upload the image to your appropriate folder. In the case above, it was a 100 x 100px thumbnail. Once you have done that, go to the post you would like the image to appear next to.

Find the Custom Fields section and give your image a semantic name like “postthumb” or whatever you’d like. Then type the image name into the value field.

Key field images

Key field images

After uploading the photo and assigning it a key field, it’s time to insert the following bit of code into the page you want it to display on. In my case, I’m inserting it at the beginning of the “notebook.php” template’s loop, as shown below:

Mike

Michael Meisner is a code-slinging, data crunching, growth hacking extraordinaire. He combines these powers to create traffic generation strategies and drive brand awareness for clients he works with. When he's not staring at a computer screen he can be found sipping a glass of wine with his Pit Bull and wife by his side.

You may also like...

EmailEmail
PrintPrint
Attract more visitors

Get the latest blog updates, and email exclusive content that shows you how to:

  • Attract targeted visitors to your site
  • Engage those visitors in creative ways
  • Move visitors down the buying funnel
  • Find profitable niches to pursue

NOTE: I will NEVER spam you with cheesy promotions or share your information with anyone.