Share and Enjoy

WordPress custom fields: Usage and Tips

WordPress allows the authors to attach the extra fields. These custom fields are basically the random data that you don’t to mix with the Post text. For instance you want to add a thumbnail to each post or want to display your Mood at the end of every post. In this tutorial, I am going to show you how can add Custom Fields, and then use it in your Themes. I will also add some examples to make you understand in a more better way.

How to add Custom Field?

You can add a custom field when writing a new Page/Post or editing an existing Page/Post. There is a whole section with the name Custom Fields in that Page, look at the image below.

custom_fields_2

As you can see there are two things in the section. First Name of the Custom Field and second is the Value of Custom Field. Let say you want to add a thumbnail to your post, enter “tn” in Name field and the url of the thumbnail in the Value Field. Look at the image below.

custom_fields_3

Now click the Add Custom Field button. Congratulations, you have added the custom field. It was pretty simple wasn’t it? One thing important that I’d like to tell you that you can use the same name for multiple custom fields. For instance, if you want two thumbnails to be added as custom fields, you can either use two different names (tn1 and tn2) for both images or you can us “tn” for both fields.

Once you have added the Custom Field, WordPress starts showing the most used Custom Fields Names in a drop down box in the custom field section, if you want to enter a new Name, you can click the enter new link, that will allow you to add a new Name.

custom_fields_4

How to use Custom Fields in the Themes

Now you’ve added your Custom Fields, questions is how you can use those fields inside your theme. You can use the following two functions in order to retreive key values.

  • get_post_meta
  • get_post_custom_values

I recommend using get_post_custom_values because this function is useful if you wish to access a custom field that is not unique, ie. has more than 1 value associated with it. Also use this function inside The Loop. Now lets see how we will get the thumbnail values we set when writing the post,

while (have_posts()) :
	the_post();
	$tn = get_post_custom_values("tn");
	print '<img src="$tn[0]" alt="Thumbnail" />';
endwhile;

Practical Uses of Custom Fields

There are literally hundreds of usage of custom fields. Guys have used it in plugins, the famous WP Post Rating also utilizes custom fields. Following are a few examples,

1- Post Thumbnails
This is the best and most common use of custom field (in my opinion). A thumbnail adds a value to your layout and post itself. Many blogs shows small images with post excerpts. A few examples are DoshDosh.com, Hongkiat.com Smashing Theme’s blog also uses the Custom Fields to display thumbnails against each post. You can see a live preview here.

In order to show a thumbnails, go to “Media Library” and upload the thumbnail you want to use. Now add a custom field with name thumbnail and in value of the field, enter the URL of image you just uploaded.

Open your theme files (index.php, archive.php, category.php or single.php) and get the value of thumbnail and print that in image’s src attribute,

while (have_posts()) :
	the_post();
	$thumbnail = get_post_custom_values("thumbnail");
	print '<img src="$thumbnail[0]" alt="Thumbnail" />';
endwhile;

2- Show specific posts on Home Page
You are running your portfolio on a WordPress powered website and you want to show your featured work on the home page. You can do the trick with the help of Custom Fields. Edit the post you wants to show on home page and add a custom field, call it “featured” and set its value to “true“. Open index.php in your theme’s folder and right after the call of get_header(); function, put the following code

get_header();
query_posts('meta_key=featured&meta_value=true');

This code will only fetch the posts that has the featured custom field. You can also limit the number of posts fetched here by using showpost parameter. You code should look like

get_header();
query_posts('showposts=X&meta_key=featured&meta_value=true');

Replace the X with the number of posts you want to show on home page.

There are many other usages of custom fields which I am going to share with you soon in another post. I hope you found the above tips and tricks useful. BTW I am master in typo mistakes, if you find (I am sure you will) please let me know :)

Enjoyed this Post?

Share and Enjoy

Facebook Feeds