In this tutorial, we are taking a look at WordPress custom fields, what they are and how you can use them to make a much more dynamic site!
What Are Custom Fields?
Custom Fields are available when you create a new page or post from the WordPress admin panel. You enter in a key, the name of the custom field as well as the value. The key will be saved so that you can reuse it from any page or post in the future (choose-able from a drop-down menu) while the value is something that is specific to each post.
What Can You Do With Them?
The quick answer would be, everything and a bit more. The more explanatory answer would be that you can use them to extend your post with content that WordPress by itself does not allow you to enter, without the extensive PHP knowledge needed to create a plugin.
Example: Over on the MacAppZone website, there is a 180×180 pixel image next to each post. If you were to put this in the content of the post and just left align it, you would end up with it only to the left of the post content itself, not the title. Nor would you be able to place the post-metadata under it. This is where custom fields come in handy. You can set up a special field where you for each post insert a URL of the image you want, in a specific size. Then in the template for the index page, you simply add the image tag where is needed in the HTML code, and make its source to be just a tiny bit of PHP code that we can get from the WordPress Codex.
How Do You Include Them In A Theme?
It’s quite a simple process. First create your values in the new post page in the administration panel of WordPress. Once you have your key set, make a note of it, in this case I call it “newsimg”. Navigate to where you want to put it inside of your theme (say the index.php) and insert this code.
1 2 3 4 | <?php $newsimg = get_post_meta($post->ID,"newsimg",true); echo $newsimg; ?> |
Let’s go through what the code above does. This is my preferred way of doing it by loading the value into a variable and outputting that as I feel it gives a simpler outputting code (and I can place the making of the variable somewhere else on the page).
First, we state the variable called newsimage and says that it is to be equal to the code that gets the post meta (the custom fields) from WordPress.
The function that is called get_post_meta has a few settings. It’s options is outlined like this (as a generic default):
1 | get_post_meta($post_id, "key",$single = true); |
The first option specifies the ID of the post that we want this to load the custom field from. In the case of the code we put in, we are calling the WordPress ID of the current post, then after the comma, we enter in the key that we have set up in the post surrounded by quotes (as it is a value). The final option can look a bit daunting and confusing but it really isn’t. It lets you tell WordPress if you allow multiple instances of this custom field. If this is set to the value of true, you can only add one instance of “newsimg” per post. If you instead set this to false, you tell WordPress to, if there are many instances of “newsimg” in the custom fields for the same post, load these into a PHP array that you can then output as you want. In our example here, we are doing it basic and thus leaving the setting as true as we only need one instance per post.
Wherever you have put this code, it must stay within the WordPress Loop or it will not work. If it is placed outside of the loop, nothing will happen as it cannot call some core post values it needs in order to display the field.
In future weeks, we’ll be taking a look at more advanced uses of these custom fields, including array outputting and when you might want to use these. We’ll also take a look at how this site’s tutorial display system is built, all using custom fields and a little bit more PHP coding.