All right, today we’re tackling WordPress custom fields: which when you boil them down to their most basic definition are handy little places where you can add more “stuff” to your posts.
WordPress posts are a collection of various components, like the title, the body, the author name and publishing date, etc. Pretty much all of the things that can be used when displaying or sorting posts.
WordPress custom fields allow you to display and/or sort posts by additional info, and you can use them for virtually anything. These extra pieces of information are referred to as ‘meta-data.’
Creating WordPress Custom Fields
To demonstrate, let’s use a basic custom field to add something to our posts, then add it into our theme so it shows up when people view the post. Let’s say, for example, that we want to add a “Tip of the Day” to the posts on our blog.
On the post (or page) editing screen, look below the excerpt box for “Custom Fields” section. If you can’t find it, use the “Screen Options” tab at the top of the screen to make sure custom fields are active.
Now, as this is your first custom field, you’ll notice that you are being given the opportunity to add a new one. Once you’ve used at least one custom field on at least one post, this will change into a dropdown list of all the custom fields currently on use on your blog, with a separate link to create a new one if needed.
Adding a custom field is a two step process. First you’ll need to give this field a name (or a “key,” to use the technical term). This name will be how you identify and select this custom field across different posts. For our tip of the day example, I would go with something like “
Tip of the Day.”
The second step is defining the value you’d like to assign to this specific post. In our example, this is where we’d put the actual tip we’re offering, so I would probably be adding something like “Always save a backup of any files you are editing in your theme BEFORE you make any changes!”
There, I now have a new custom field with a unique value assigned to this post. Next question: what do I do with it?
Displaying WordPress Custom Fields
There are two primary ways of displaying WordPress custom field data: one is pretty basic, and the other a little more complex, allowing for more advanced applications.
First off, you can display all of a post’s custom fields with the “
the_meta();” template tag. This will return an unordered list of all the custom fields on the current post, displaying the key and value for each, nicely separated by a colon.
Here’s an example: say that in addition to our “Tip of the Day,” we also had a custom field to display what we had for breakfast. In that scenario,
<!--?php the_meta(); ?-->
Would display the following:
Tip of the Day: Always save a backup of any files you are editing in your theme BEFORE you make any changes!
My Breakfast: Steak and Eggs
Tada! In addition, the entire list is given a CSS class of “
post-meta” and the keys themselves have a class of “
post-meta-key“so you can easily dress up the two sections with some CSS styles if you want!
Note: this template tag only works inside the loop, as that’s the only way it knows what post you’re looking at.
More Advanced Custom Field Action
To access the value of a specific custom field data at a time, you can always turn to the trusty “
get_post_meta();“. With this tag you can specify three parameters:
The first two are pretty self explanatory, providing the ID of the post you need data for, and which specific custom field you want to access.
To grab the current post’s ID, you can access the
$post variable that WordPress conveniently stores while running The Loop. Just set the first parameter to “
$post->ID” and WordPress will look at the current post being displayed and grab the ID for you. If for any reason you wanted the data from a different post, just look up it’s ID, and use that here instead.
$meta_key parameter is the name, or key, of your custom field (in our example, that would be “Tip of the Day”). Easy enough, right?
Lastly, we have
$single parameter. This value is used to tell WordPress to return a single result as a string that can be printed, rather than storing your metadata in an array (which is the default).
If that last part sounded like Greek, don’t worry about it. If you aren’t familiar with, or looking to use an array, just remember to set the third parameter as ‘true’ and you’ll be all set.
Okay, let’s put this see this code in action. I want to add this to my single post pages, so I’m going to open
single.php. You should open the file that applies to whatever you’re trying to accomplish.
Next step is to place the code wherever you want it (inside The Loop, of course!). First, we’ll need to assign the data to a variable, so we can then turn around and echo it out.
First, define your variable with the function we just covered, like this:
<!--?php $tipoftheday=get_post_meta($post->ID,'Tip of the Day','true'); ?-->
Couple of things to notice here. I’m using the
$post variable like we discussed earlier to grab the ID of the post currently being displayed in The Loop. Notice that because this is a variable, and not a string, this does not need the quotations the other parameters do. If I were entering a specific post ID here, I would need the quotes, as that would be considered a string.
Next I’ve added the label we gave our custom field back in the beginning, and finally, I’ve set the
$single as “true” so I get a string that I can display in the next step.
Feel free to copy and paste this code, just be sure to change the variable name to your own.
Next we are going to echo out the variable we just created, which will display our data on the screen.
I’ll be adding mine just after the
the_content(); tag, so it shows up just under my post content. I’ll also wrap the code in a paragraph tag so that I can style it with CSS later on, and add some text identifying this as the Tip of the Day:
Tip of the Day:
Now I can add my CSS and I’m good to go! I’ve added a label that will be the same every time, and then echoed out my variable, which will change from post to post, displaying the data that applies to that page!
Here’s what the two blocks of code look like when combined:
Tip of the Day:
You can use the
get_post_meta(); tag to do a lot of things on not only single post pages, but on category pages, or on your homepage. You can use this custom field data to display groups of posts or add things like customized links or opt-in forms or, well, anything really.
Let me know in the comments what cool additions you’re making to your site with custom fields!