The Blog

This is a tutorial for beginners, and we were all beginners once.

To a beginner I remember custom fields looking quite pointless. I couldn’t quite grasp what they were for.

Then, after building a few WordPress sites, I watched an excellent tutorial from Chris Coyier over at CSS Tricks and it really opened my eyes. There’s a link at the bottom of this post to Chris’s excellent video series. And that link was generated using a custom field.

To whet your appetite, here’s an example of a search function I built for THET using custom fields. You can select from three options and then WordPress will search through all the posts custom fields until it finds a match.

That’s a really powerful way to harness WordPress custom fields, but we’re going to start with something a little easier.

The project

In this tutorial, we’re going to stick with something simple. All you’ll need is some basic PHP, together with feeling comfortable working with some WordPress files; specifically single.php which you’ll find in http://your-wordpress-url.com/wp-content/themes/your-theme/single.php.

To keep things both easy and hopefully useful, we’re going to create a couple of custom fields which display a credit and a link to a flickr image. I’m using it in this post! The image at the top of the field (custom fields, gettit?!) came thanks to a flickr user called innoxiuss. And if you scroll to the bottom of this page you’ll see a credit that looks like this:

Well that credit is generated thanks to two custom fields and a little bit of php code.

What is a WordPress Custom Field?

Okay. So think of a custom field as a bit of data. It can be anything at all, as long as it’s an alpha numeric string that can be stored in the WordPress database. So a custom field is not an image, it’s the URL of the image.

A custom field has two properties, a name and a value.

For example, the name could be image and the value could be www.yoursite.com/image.jpg.

But here’s the thing: it doesn’t have to make that much sense. The name could be fruit and the value could be apple. And as pointless as that looks, there are instances where that information could come in useful.

Let’s take the real world example of the flickr credit on the bottom of this page. There are actually two custom fields in there. The first is the flickr user and the second is the URL of the photo.

Name: flickr_attribute_url
Value: http://www.flickr.com/photos/innoxiuss/2665404220/

Name: flickr_attribute_name
Value: innoxiuss

How to add a Custom Field

Custom fields are added on the Edit Post page, and it looks like this…

If you can’t see it, then scroll to the top and under ‘Screen Options’ make sure that ‘Custom Fields’ is ticked.

All you have to do is click on the ‘Enter new’ link (in blue) and enter a name for your data under ‘Name’.

Next enter your data’s value under ‘Value’.

Finally, click on the ‘Add Custom Field’ button and you’re done. This is what it might look like…

You can add as many custom fields as you like, and on some posts I have over 20. Here you can see I’ve added two, making sure that the names are unique.

And that’s it. You now have two custom fields each containing a snippet of data.

But without rolling up our selves and getting our hands dirty with some PHP, this isn’t going to do a thing.

Adding the PHP

Here’s the code we’ll be using. Have a read through and see if it makes sense…

Okay, let’s take a moment to go through the code.

First of all, make sure you have created the custom fields in your WordPress post, and that you have the names of the fields exactly right. After all, if there’s no custom field data there’s nothing to do!

We check for the data in the first line:

We use the WordPress function get_post_meta to grab the value for ‘flickr_attribute_name’. If there’s no data there then this statement will be null and the if won’t run. If there is something in that custom field then the code will carry on executing.

But hold on a minute, what’s all that other stuff? Well, the get_post_meta function has the following parameters:

We set our $post_id as the current post using $post->ID. Our $key is the name of the custom field which is ‘flickr_attribute_name’. And finally we set $single to true.

What is single? If it’s set to true it returns a single result as a string. If it’s set to false it returns multiple results as an array. We’ll get on to arrays in later tutorials, but for now we’re going to keep it simple. We only have one value for our flickr credit so we leave it as true.

So now we know we have some data, let’s carry on with the code. We put our content in a DIV so we can style it to our liking

And we also create two variables with our custom field data in. The get_post_meta function works exactly as we described it above.

Again, note that we set the $single parameter to true, because we know there is only one bit of data. How do we know this? Well, in this instance it’s because we’ve set the custom field up ourselves in the WordPress backend.

Finally, we throw together the rest of the HTML, and close off the if statement.

Bringing it together

So we have our custom fields in WordPress and we’ve entered some data into them. We’ve also created the snippet of easy PHP which’ll read this data and display it on the page.

But where does it go?

Well, for this snippet I’ve chosen to put it on the bottom of the single.php page in the wp-content folder, as this is the page that displays single posts.

On my page it comes just before the section, which itself is just before the comments bit. But you could put it anywhere you want.

Just boot up your favourite PHP editor (I like Expresso on the Mac and, predictably, Dreamweaver on the PC) and type in the code.

Save your page, upload, and you should have a lovely flickr photo credit.

What next?

Don’t have flickr photos on your page? Well then this could be a bit pointless. But remember, this tutorial should just give you a basic idea of how custom fields work. Sure, you could have put this flickr information in the post itself but as we’ll see, we can do all kinds of funky things once we have the ability to search custom fields and display data based on their contents.

In the mean time there is some further reading below. Oh, and the further reading is displayed from data in custom fields!