WordPress Custom Fields Tutorial for the Total Newbie

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.

WordPress Custom FieldsWhat 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:

Keythumbnail

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

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

Enter the Key and the value

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

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

Open the Image Uploader

Upload the Required Image

Upload the Required Image

The LINK URL is the VALUE for the Custom Field

The LINK URL is the VALUE for the Custom Field

Custom Fields for the StudioPress Themes

For the Thumbnail Image:

Keythumbnail

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:

Keythumb

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.

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!

Hey! Thanks for reading. If you found it useful, please share it with your friends as well. They will thank you for it.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

25 Comments.

  1. Girish says:

    Arun,
    This is an excellent article, I had used custom field many times but never thought of writing. That too this is much explained here. Thanks for taking 100 % effort to write such a great article.

    Keep up the spirit.
    Girish

  2. Alok says:

    Most of the users are not using this useful function in our blog but this is really very cool to add extra matter in our posts.
    Thanks Arun.

    • Ya, I don’t think many fill up the All-In-One SEO plugin’s fields either. The description that you use there is taken by most search engines, a great way to promote the post I guess. 🙂

  3. Rishi says:

    Great article buddy! I use custom fields for my video posts and thumbnails too. 🙂

    • oh I see, those videos that are post specific are also via custom fields, hmm, I have seen those in the thesis theme too, always wondered how they did it. 🙂

  4. Why, what a great post! 🙂 Super stuff…I’m always learning in the WP world.

  5. Amal Roy says:

    Perfect. This was an article i should have seen 2 months ago. During that time i used the digital statement theme in wordpress with a free host . I wondered how people add the images just to the left of post as seen in that theme. I asked many but there was no hope. Atlast i was some how able to figure it out (i was new to wp at that time :)). Great work friend. This will now help many new budding wordpress bloggers.

  6. Curious Little Person says:

    Really enjoyed reading your detailed article! Thanks

    I use the custom field on my blog for my images

    Cheers
    Sandeep

  7. Nihar says:

    Thanks for the tutorial. this will be really helpful for all the newbies in wordpress

  8. Lonnie Minton says:

    Thanks for this post. I have been wondering what the WordPress Custom Field was and how to use it. Just have not taken the time to figure it out. Your detailed post provides the info all in one place and very well done – a good tutorial.

  9. Muhammad Qasim says:

    very nice dear
    I just purchased church theme and was confused abt custom field but thnx to millionclues.com who let me know

  10. Wow Article , I thought it was exceedingly great

    I look ahead to more great postings like this one. Do you have a subscription I can subscribe to for new posts?

  11. Alicia says:

    Great article and explanation for newbies!

    I have a question though….I have created a custom field to display unique images on each page. I want these images to be links. How do I do this? Each image is customized for each page and the links are different for every page.

    Thanks!

  12. NavaPavan says:

    Thanks for the lice tutorial. Everyone are unaware from Custom fields. They have to work on custom fields for better work.

  13. WordPress Video Tutorials-39 Step by Step Videos http://www.filesonic.com/file/199042372

7 Pings / Trackbacks.

  1. Zodomatica - Bits of Tzaddi's Life says:

    […] solution uses custom fields. Here’s a tutorial on custom fields in case you need […]

  2. […] Related: How to Use Custom Fields, a complete tutorial with examples. […]

  3. […] asked the following question on the post – WordPress Custom Fields Tutorial for the Total Newbie: Great article and explanation for […]

  4. […] If you are new to WordPress Custom Fields, you should have a look at this – WordPress Custom Fields 101. […]

  5. […] and News paper style WordPress themes uses a Thumbnail image on the homepage. Older themes used custom fields to get this done. Starting with 2.9, WordPress lets you upload an image and set it as the post […]

  6. Using custom fields to insert special content | Dynasty Manager says:

    […] http://www.millionclues.com/problogging/wordpress-tips/wordpress-custom-fields-tutorial-for-total-newbie… […]

Leave a Reply

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

*