Fun with Custom Fields

A little known.. and little used.. cool little feature in WordPress is the ability to use custom fields. I have to admit that I was a WordPress user for quite some time before I realized how cool this little tool can be. This post explores some of the possibilities of using custom fields in the WordPress.Org (self-hosted) software.

You can display all sorts of things:

• Current mood
• Currently reading
• Currently listening to
• Todays weather

These small tid bits of information can be added to the bottom of each post easily through the use of Custom Fields.

But first – where do you find custom fields?

In your WordPress administration panel, click “Write” then scroll down, beneath the text box where you write your post and you will see a blue bar with the words “Custom Fields”…. click the plus sign in the top right-hand corner of that blue bar and you see the following:

You see two fields there that you can fill out:

• Key: this is the name of the custom field
• Value: this is the information that appears in the custom field

It sounds simple enough – - but why use it.. and how??

Let’s use a very simple example. Since I’m a big music fan – I can add a “Listening To” bit at the bottom of each post using Custom Fields. This is what I would do if I wanted to do that:

1. Click the Write tab in the top menu of my WordPress Administration Panel
2. Write my post as I usually would
3. Scroll down to the Custom Fields section (shown above)
4. Type the following in box labeled “Key”: Listening To:
5. Type the name of the song in the box labeled “Value”
6. Click the button labeled “Add Custom Field”
7. Publish my post

As long as I have the correct template tag in my template, then my “Listening To” data will appear on my post, wherever I’ve coded it to appear. The information stored in custom fields is considered meta-data and can be displayed on your blog by the use of this simple template tag:

<?php the_meta(); ?>

On this blog – at the bottom of this very post, and on the single post only – you should see the following: “Listening To: Metallica: The Black Album”.

Now, you can style that information any way you’d like using CSS. The source code for my particular custom field looks like this:

<p><ul class='post-meta'>
<li><span class='post-meta-key'>Listening To::</span> Metallica: The Black Album</li>

</ul>

It’s important to note that you only need to add a Key once. That is: one time for keys.

In the future, if I want to add a “Listening To” to any of my posts.. the key will always be there in the drop down menu that says Select (see the Custom Fields screenshot above.) I just need to select the key I wish to use in that drop down menu and type my value into the “Value” box. There is no need to add the same key over and over again.

Here’s a cute use for podcasters. Say you don’t publish a podcast in every single blog post that you do – - but in the posts that you have published a podcast, you want to start out the post with a cute podcasty-type icon or image to set it apart from the rest. Going further – - you want that podcasty-type icon or image to appear in the post excerpt on your archives and search results page. (Just using this template tag: the_excerpt – will not accomplish this for you since the excerpt tag strips out those images you upload and stick into your blog posts).

You can create a Custom Field for your Podcast posts by following these simple steps:

1. First, upload your image. To make it easy – let’s make that image 100 pixels wide and 100 pixels in height.
2. Visit the Custom Fields area of the Write page in your WordPress administration panel
3. Creat a new key by typing “podcast” in the Key box (without the quote marks)
4. Type the path the the uploaded imade in the Value box (i.e. http://yourdomain.com/wp-content/uploads/image.gif)
5. Click Add Custom Field
6. Create a second key by typing “thumb-class” in the Key box (without the quotes)
7. Type ‘thumb-class’ in the Value box (again, without the quotes)
8. Click the Add Custom Field button

Following the above steps, you have created two keys: 1.) podcast key that contains the podcast image and 2.) the thumb-class key that will allow you to style the podcast image in your CSS using the ‘thumb-class’ value.

Now when you make a post with a podcast broadcast in it – - you can add the ‘podcast’ and ‘thumb-class’ custom fields to just that post and you will insert the cute little podcasty-icon that you created JUST for your podcast posts.

But WAIT! Of course, there is more . . in order for it to appear in your posts, you will need to add some code bits to your template. (in your index.php, single.php, category.php and/or archive.php (wherever you want this icon shown in the posts):

After this code bit¹ :

if(have_posts()) : while(have_posts()) : the_post();

Add this code bit:

// check for podcast
$podcast= get_post_meta($post->ID, 'podcast', $single = true);
// check for thumb-class
$thumb-class = get_post_meta($post->ID, 'thumb-class', $single = true);

This code bit simply retreives the custom field keys and values and assigns them to the . To display it in your post, you’ll need this code bit and you will need to place it before the_content or the_excerpt in order for the image to display before your post:

<?php // if this is a podcast
if($podcast!== '') { ?>
	<p>
	<img src="<?php echo $podcast; ?>"
	class="<?php if($thumb-class !== '') { echo $thumb-class; } else { echo "alignleft"; } ?>"
	/>
	</p>
<?php } // end if statement

// if this is not a podcast
else { echo ''; } ?>

This code bit inserts the podcasty-type image/icon right before your post content, or excerpt. With this example, you can go further to style the output of that image by opening your Stylesheet file (click Presentations –> Theme Editor in your WordPress administration menu, then click the Stylesheet link to open the editor for this file)…and style the CSS however you’d like:

.alignleft {float: left; margin: 0 10px 0 0;}

.thumb-class {float: left; width: 100px; height: 100px; margin: 0 10px 0 0; padding: 4px; background-color: white; border: 1px solid silver; }

Each time you make that podcast post – you will have to remember to insert the path to the podcast image in the Value field, after choosing the ‘podcast’ key in the drop down menu (remember – you only have to create custom fields ONCE). This also gives you the ability to change out the podcasty-type icon/image you use… for instance, if you create podcasts on different topics (i.e. sports, tech, current evenings, celebrity gossip.. the possibilities are endless!)

You can, of course, use this concept for anything outside of podcasts. Say you’re a sports blogger and you blog about different types of sports – - using this Post Images with Custom Fields concept – you can create keys for Baseball, Football and Basketball and use corresponding images in the values for those keys.

Or a cooking blog? Icons for seafood, vegetarian, vegan, deserts..etc..etc.

Hopefully this little blurb on custom fields gives you a good introduction on the possibilities of their use. You can read more about the use of custom fields in the WordPress Codex: Using Custom Fields.

There have been some good plugins developed around the concept of custom fields, as well:

Field Layout Manager – lets you display your custom fields in a sorted html table. FML also lets you group fields and give them custom names.

Get Custom Field Values – Easily retrieve and control the display of any custom field values/meta data for posts, inside or outside “the loop”. The power of custom fields gives this plugin the potential to be dozens of plugins all rolled into one.

1. The Loop [↩]