Home Tutorials Using Custom Fields Part One - The Basics

Using Custom Fields Part One – The Basics

Author

Date

Updated on

Category

Custom fields offer a lot of flexibility for WordPress users. And the flexibility goes well beyond 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, let’s 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. Let’s 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 a label, or name of the information, while a value is an 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. Let’s look at the interface where custom field information is entered:

custom fields

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. Let’s 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 the_meta tag as illustrated in the documentation on using custom fields. Just place <?php the_meta(); ?> 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:

<ul class=’post-meta’>
<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 {font-variant: small-caps; color: maroon; }
.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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

10 Ways To Speed Up Post-Building Process With WordPress Gutenberg Themes

There’s no need to explain why I decided to start with Gutenberg-supporting products. All in all, Gutenberg is a well-known and long-awaited product. It is more...

HostPapa Linux Hosting: Reliable, robust and fast

As a small business owner, it can be challenging to find the right hosting provider for your website. HostPapa distinguishes itself from other web...

Are You Making These Costly Mistakes When Outsourcing?

In today’s world, it is almost impossible to find a small business where everything about the business process is done in-house. For most small...

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

Recent comments