February 26, 2014 / IST / How-to Guides, Web Development.

Custom Fields are most powerful key of WordPress. Custom Fields are a form of meta-data that allows you to store arbitrary information with each WordPress post. While this does not sound so powerful, it is the single most powerful component of WordPress posts and content types (aka post types). This meta-data is handled with key/value pairs. The key is a “name” which identifies the specific field thus it is a constant and should stay the same for all posts however you can use the same key multiple times within one post. The value is the information that will be displayed for the field when you call it in your WordPress theme thus it can change with each post.

How to add custom field to a Post

First things first: When in your post editor screen, make sure you have the Custom Fields option checked.

Screen Options - Custom Field

Now let’s take a look at a very basic example of WordPress Custom Fields in Action. While editing your posts, you see this section called Custom Fields. Scroll down a little, and you should see one. We will use that box to add the post author’s mood at the time of writing. So you will add the name “Today’s Mood”, and then you will add the value which can be Happy, Sad, Excited etc.

Custom Fields to display the Mood

Now once you add this field, and save the post. This additional arbitrary information related to your post is stored in the database, and it can be called anywhere within your WordPress theme. So for this very basic example, we will use the very basic way of displaying it in the post. Let’s say, you want to display your mood before the person reads the post, so they know what to expect. Well, then you will open your single.php file and add this code inside the WordPress loop:

<?php the_meta(); ?>

It will display something like this:

Today’s Mood: Happy

Now by using the_meta hook, you will display all fields associated with that post. This is great when you have one field, but if you have 5 different fields that you want to display at 5 different locations, then we will have to use get_post_meta hook. Let’s say you want to display the custom field at a separate location by itself, then you will add the following code within the post loop.

<?php echo get_post_meta($post->ID, 'key', true); ?>

Note: replace the key value to whatever your key (Custom field’s name) is.

What if you have a custom field like ‘songs’ for the songs you were listening while writing the post? Well you can have multiple ‘songs’ keys and have different values stored from the backend. Then inside your loop paste a code like this:

<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
	<h3>This post is inspired by:</h3>
		<?php foreach($songs as $song) {
			echo '<li>'.$song.'</li>';
			} ?>

Note the trick here is the third parameter “false”. By changing it to false, we tell the function to return an array of the values for the specified key. This is a very handy trick for displaying multiple key values. It will display like:

This post is inspired by:

  • Songs Track……1
  • Songs Track……2
  • Songs Track……3
  • Songs Track……4

Now make Custom field and take most welcome feature of WordPress