Using Custom Fields Part One - The Basics
Custom fields offer a lot of flexibility for Wordpress users. And the flexibility goes well beyound posting the status of your current mood or the latest book you are reading. Over a course of a number of posts, we are going to take a look at what can be done with custom fields. (which is a lot!) My hope is to offer a good resource of learning material for those wishing to utilize custom fields to their full extent. Now instead of jumping immediately into things, lets start things slow and work our way up.
The best place to start when first attempting anything new and unfamiliar in Wordpress is to consult the documentation. With that in mind its unfortunate that the available documentation and examples regarding custom fields is lacking. Not to mention scattered. Few seem to have a good understanding of custom fields. Which is why we will attempt to fill in the gaps and unify a few of the basic things to start. Lets go over the document page I referenced.
The docs label the information presented by custom fields as meta-data, (Wikipedia has an interesting article on understanding the term metadata) the important thing to note about this meta-data is the key and value relationship of the data. The easiest way to think of the terms is that a key is the label, or name of the information, while a value is actual information related to the key. It is worth noting that any keys you create are accessible later via a drop down menu available when writing a post, the value however is entered per post. Lets look at the interface where custom field information is entered:
The red box is the drop down menu we talked about a moment ago. The green box is where new keys are entered. The blue box is where a value is entered. And all of this is can be found beneath your main post writing area under the bar labeled custom fields. Easy enough. Lets go through a quick example. Start a new post, enter in any key and value you wish and publish the post. Make sure to keep in mind the difference between a key and a value.
If your current theme doesn’t have meta-data preconfigured, nothing will display. If that is the case, how do we get the information to display? We use the
tag as illustrated in the documentation on using custom fields. Just place
somewhere within The Loop and Wordpress will display the information you entered into the key and value areas of your post at that location.
And as shown in the docs Wordpress will then output source similar to the following:
<li><span class=’post-meta-key’>Curently Reading:</span> Calvin and Hobbes</li>
<li><span class=’post-meta-key’>Today’s Mood:</span> Jolly and Happy</li>
</ul>
And of course styling is as simple as editing the styling attributes for the UL and SPAN classes:
.post-meta-key {color: green; font-weight: bold; font-size: 110%; }
That about covers the basics. We’ll look at some advanced custom field concepts the next lesson. Including finally how to style per post. If you’d like to do some homework, read the advanced techniques for custom fields from the codex.
Complete Lessons Listing:
Part Two Styling Per Post
This post may very well be a life saver for me. I use custom fields on every post I make to let my users know what country each post is related to by displaying little country flags under the post titles. I recently switched themes though and on the new one, the custom fields were displaying all funky. I for the life of me couldn’t figure out how to edit the way they looked, but looks like I won’t have that problem anymore. Thanks!
Glad it helped! You might find the future custom field posts interesting as well. Stay tuned.
thanks brian
i been researching or you can called it messing around
with cfield when i want to took up a notch in my next
theme..this one really bring some light to it
[…] exciting things that can be done with custom fields! If you haven’t already taken a look at Part One, give it a quick read to bring yourself up to date with the rest of us. In this post (and the posts […]
Yep, I finally got the custom fields working (and displaying!) correctly after using some of the code in this post. Thanks heaps, mate!
This is really helpful. Do you know of anyway to execute PHP via a custom field?
I’m trying to execute ?php echo rating_bar(’unique’,'5′); ?
When I add it as a custom field, and echo that field through my template, it just prints the PHP code as text, and doesn’t execute.
Any suggestions?
I don’t know if it will work for custom fields too, but runPHP plugin allows you to execute PHP within the posts.
Thanks, I tried that (and a variety of others), and nothing seemed to work.
Bummer
My hands are tied then. I’ve never experimented with executing php within custom fields.
[…] Using Custom Fields Part One - The Basics (first of a two-part series) […]