A lot of our themes make use of custom fields to display images alongside posts. These are easy to use, but are a little different to how you would normally add an image to a post, so we will go through the changes here.

The first thing to make note of is that all the images you wish to use for custom field images must reside in the uploads folder of your blog. If they are not in this folder the theme will not be able to find them and will not work as desired. This is the normal place Wordpress stores images anyway, so this should be no real problem.

Upload The image

The first step is to upload your image, if you already have your image uploaded and in the correct place you may skip this section, if not, please have a look at this tutorial on uploading images for custom fields.

Setting The Values of the Custom Fields

Once you have uploaded the image you wish to use, its time to add it to a post. Open the post editor for that post and skip down to the section at the bottom that says Custom Fields.

In these boxes, we need to add the Name of the Custom Field and the Value.

The name will be the holding function for that image class. Depending on the theme and the position of this image the name will be different. So please check the relevant instructions for your theme to get this setting. The value is just the name of the image you want to use.

For this example we will use the Custom Field name of “Sample-Field” and you can see where that is entered below.

After the first time you have entered a new name it will be permanently available in the drop down menu for custom fields, so no need to keep adding the name again after that.

Then we need to add the name of the image like so.

As you can see we are calling the image “random-image.png”

Two things to note about this. Firstly, make sure you add the suffix of each image (.jpg, .png etc) Secondly you may need to add the year and month folder if your uploads folder is set out that way. Please see this tutorial if your unsure how to organize your uploads folder.

Once those two values are added and you press “Add Custom Field” then the custom field value is added to your post and your image will display correctly.

One Response to “Images in Custom Fields”