The StudioPress Church theme that I use right now uses Custom fields to display the thumbnail image on the homepage.

Custom Fields are totally confusing for a newbie, here is a very basic tutorial on using them.

What are Custom Fields in WordPress?

In simple words custom fields is a way to add extra information with a post.

Custom Fields can be thought like the “For Office Use Only” Fields in a bank application form. They are used to tell WordPress or your theme or any plugin – “Here is what I like to use with this post”.

A Custom Field has two parts

WordPress Custom Fields have a KEY and a VALUE.

Back to the same example, in the “For office use only” box in a bank account application form, there would be fields like, “Account number”, “Verification Status” and the like. These fields are printed on the form and are same on every application form.

Similarly, the key is the part of the custom field that repeats on all the posts. For a specific function the key would be the same and keys are saved after the first use.

The “Account number” assigned and the “Verification Status” is different for every customer and are filled up by the clerk. This is analogous with the value part of the custom field. It is specific for a post and are filled up separately.

Value can be anything and depends on the purpose of the custom field. It can be a link to an image, some text, or a Boolean (true or false) value.

Some custom fields are automatically added by the plugins you have installed, you don’t have to worry about them. Some others need to be manually added if your theme of any plugin demands them.

An Example of a WordPress Custom Field.

As I said before, the StudioPress Church theme uses a custom field to specify the tiny 70×70 image that you see on the homepage. The custom field for the same is:

Key – thumbnail

Value – Absolute link (direct link) to the 70×70 image (eg. http://www.millionclues.com/wp-content/uploads/free-giveaway.gif )

Using Custom Fields in WordPress 2.8 and beyond

The first time you use a custom field, you have to enter the KEY manually. WordPress will save the Kay name so that you don’t have to remember the key every time. Follow the instructions on the images.

To enter the Key the first time you use the Custom Field

Enter the Key and the value

Congratulations! you just added your first custom field. From now on, the Key would be saved so you can select it from a drop down list.

Select the KEY and enter the VALUE

Repeat the same for each custom field. See the end of this post for the custom fields that the StudioPress themes need. How to find the value of the custom field is discussed below.

Finding the direct link to the images via Image-Uploader

Open the Image Uploader

Upload the Required Image

The LINK URL is the VALUE for the Custom Field

Custom Fields for the StudioPress Themes

For the Thumbnail Image:

Key – thumbnail

Value – Absolute link to the thumbnail image (70px X 70px)

Key – hpbottom

Value – Absolute link to the thumbnail image (70px X 70px)

Some themes uses either of the above or both of them, usually I add both these fields so that I can easily change between the themes if I need to at a later time.

For the Featured content gallery, you need to fill the following custom fields.

Key – articleimg

Value – Absolute link to the image that you wish to show in the gallery. (the size of the image should be the size that you specify in the Content Gallery options.

Key – featuredtext

Value – Any text that you wish to show over the image on the Gallery. This is an optional key and if you don’t specify this the first lines from the article will be used.

There are more optional custom fields available, see the content gallery settings for details.

(StudioPress is getting rid of these custom fields and the latest themes uses inbuilt script to include the images automatically. The current themes would be updated soon.)

Update:

Latest versions of the themes uses new custom fields. For Church 4.0, Lifestyle 4.0 and the newer ones the custom field for the thumbnail image is:

Key – thumb

Value – Absolute link to any image. (Configure Media Settings as follows)

In Settings > Media : Set thumbnail size as 70px x 70px.

For use with the Featured Content Gallery, set Medium size (in Media Settings) as the size of the image you wish to use with the Gallery. If this is configured, you no longer need to crop images manually and you can use any image with the value of FCG.

Digg more into WordPress Custom Fields…

Some resources that might help you read more about Custom Fields are make use of it.

• Custom Fields Documentation from WordPress codex
• Implementing WordPress Custom Fields and Tips and Tricks
• 28 Ways to use WordPress Custom Fields

More WordPress Resources

I have created a Twitter account to share resources related to WordPress, Blogging, SEO and the like. Follow Million Clues on twitter to catch all of them. Also, if you liked this post, share it on twitter. Thanks for that!