I can’t believe I’ve been playing with WordPress for so long and never explored the Custom Fields feature. A website I’ve been working recently has required me to push the boundaries of WordPress, or more appropriately my understanding and knowledge of it. In doing so I’ve bravely slipped deeper into the Advanced Options and lived to tell the tale – the tale of the Custom Fields…

The fundamental functionality of Custom Fields provides you with the ability to expand your posts and their content. They allow you to include extra information and features in your posts that the WYSIWYG editor doesn’t provide itself.

How it works.

When in your Write/Manage posts page, mooch down past Tags and Categories to the Advanced Options – ooh! Down here in these murky depths you’ll encounter the Custom Fields box. In here you’ll see 2 empty textareas labelled key and value.

The key is the name for your custom variable, and the value is, well, it’s value! When you create a custom field, you are creating new meta-data. You then insert a simple line of php into your WordPress template where you want this extra data to appear in the theme and voila! You’re done.

So, the easiest way to show you is with a short example.

Adding Subtitles to your post

I feel subtitles serve more as a presentational feature than anything. And sure, you could always just insert a h2/h3 at the top of your post to act as a subtitle. But sometimes that doesn’t cut it, especially if your subtitle needs to stand out from the post content more than an standard inline header.

Step 1 – Theme files:

In your WordPress theme, you need to enter a line of code to pull in your custom field. Make sure this is within the post loop, the most obvious place is of course directly under your post title. Here you go:

The only bit you may wish to change is the keyword within the parentheses. In this case ‘Subtitle‘. This ties in with the key you create in the post editor, so make sure they’re the same. And only use it again if you wish to display the subtitle somewhere else, for any other custom fields you’ll have to change this.

It would make sense to place this code within header tags:

That’s it for the code!

Step 2 – Post page:

When you’re writing or editing a post, go down to the Custom Fields area in the Advanced Options. Create a key which correspondes to your keyword you set in the code. The value will be the actual Subtitle content. So for example: Key – Subtitle Value – An inside look at Google’s new browser… Add your custom field and save your post.

Step 3 – Check it out:

Check out how it displays on the page. Then utilise the power of CSS to get it looking bob on!

Having more fun

Let’s face it, subtitles aren’t that interesting. But there’s a lot more you can do, a lot of which I’ve still yet to discover. Post Thumbnails

Add the following code to your theme:

" alt="" />

This will include an image, pulling it in from a specific folder. So if you upload all your thumbnail images to the directory /wp-content/post-images/ and then in your post editor set the key as ‘Image-Thumb’ and the value as your image name (eg. picture.png), this will pull in your thumbnail picture and place it in your post. You can control the appearance of the image with CSS.

To actually upload your images to the specified folder, you can use good old FTP or a plugin I’m particularly fond of, because it keeps you in the WP admin area without having to use any external programs: Filosofo Old-Style Upload.

Of course this doesn’t necessarily have to be a thumbnail, it can be a full size image, adding plenty of colour and interest to your blog articles.

For a more advanced alternative to this method, check out Justin Tadlock’s method.

Meta-Data

Some of the examples given on the WordPress Codex page on Custom Fields are the simplest, and the best. What if you fancy adding information relating to your current mood or the weather at the time of writing your post? Try:

Current Mood:

Key: Mood
Value: Happy
Code:

Current Mood: 

Displays: Current Mood: Happy

Listening To:

Key: Listening-to
Value: Fly me to the moon – Frank Sinatra
Code:

Listening to: 

Displays: Listening to: Fly me to the moon – Frank Sinatra

Other ways to display meta-data

To pull in all the meta-data for a post in one fell swoop, go for:

Which will display all the meta-data in an unordered list and add’s classes that can be styled with CSS.

If you want to pull meta-data from a specific post, you can specify which post by the post ID, which data by it’s key and whether to display the data as a single item or pull in an array:

• $post_id is the ID of the post you want to select data from
• $key is the name of the meta-value you want
• $single can be either true of false. If true it will pull in a single string of meta-data, if false it will pull in an array of the custom fields.

Go Play…

Like most things, Custom Fields open doors which you have to walk through and explore. In essence they’re very simple but if used correctly can be pretty powerful, another extension of the basic functionality of Wordress. So go forth and experiment!

For more information on Custom Fields and all things WordPress – visit the WP Codex.