You know how every blog post you write displays the author’s name, the date it was published, and its category on your feed and article page? What if you wanted to add more custom fields there? Well, you’re in luck! WordPress custom fields lets you do that.
WordPress custom fields are simple bits of blogging functionality that are built into the core software. They allow users to bind custom metadata with their content to enhance its readability and make it more functional. In this post, we’ll show you how you can get started with managing and using custom fields in WordPress.
Let’s put everything into context before we begin!
What Are WordPress Custom Fields?
A custom field is a type of metadata that allows you to store information with your content. Typically, it consists of a key (a constant) and value (a variable) pair. The key is used to identify the field and the value is the information that will be displayed.
WordPress custom fields allow users to bind additional data to their posts, which is especially useful for when you want to display certain types of information with each post. For instance, if you’re a travel blogger, then you may want to add a custom field called Today’s Location, which lets your readers know where you were when you were writing the post.
Here are some more examples of custom fields that you can use:
- Quote of the day.
- Weather updates.
- Statuses.
- Key ingredient.
- Reference links.
- Contact information.
- Pinterest-specific images.
Once you’ve added the custom field, you can display it in just about any pre-defined area of your WordPress theme, such as before a post, at the end of a post, or in the sidebar. WordPress custom fields give you more control over the content that’s displayed and where it will be displayed than widgets do.
WordPress custom fields are simple bits of blogging functionality that can actually be pretty useful – if implemented correctly. But before we jump into the tutorial, let’s take a look at why you might want to use custom fields on your WordPress website.
Why Should I Use WordPress Custom Fields?
WordPress custom fields allow users to customize the content they publish on their site, enhance its visual appeal, and make it easier to digest. Here’s why you may want to add WordPress custom fields to your posts and custom post types:
- More flexible than custom widgets. Widgets display the same content on every page, whereas custom fields allow you to output different content on every page and aren’t limited to widgetized areas.
- Better control over placement and display. Allows you to leverage your theme’s hooks and conditional tags to control the placement and content of what is displayed on the front-end of your website.
- Customizable. Since custom fields are basically code snippets that you add to your theme’s files, they’re fully customizable. You can style WordPress custom fields however you’d like using CSS.
Managing and using WordPress custom fields can be a bit tricky at first, especially if you don’t have a lot of experience messing around with metadata. But once you’ve come to grips with it, you’ll be able to make your content stand out and get noticed.
How Do I Manage WordPress Custom Fields on My Site?
There’s a few things you’ll need to know to get started with using WordPress custom fields on your website like a pro. By default, the custom field option is hidden from your Edit Post screen. To make it visible, click on the Screen Options button in the top-right corner and check the Custom Fields box.
Once you’ve enabled it, the Custom Fields widget will appear right below your text editor. It should look something like this:
Extend Your Theme With Custom Fields
In its simplest form, custom fields allow users to display customized content on their website’s front-end. In this section, we’ll show you how you can add a custom field for the author’s location, edit your theme’s file, and have it show up on the front-end. Note that anytime you are making changes to your theme files, you will want to first create a child theme if you haven’t already.
Navigate to the Custom Fields widget from the Edit Post screen. Add a Name and Value for the custom field and click the Add Custom Field button once you’re done.
Next, open up your currently active theme’s single.php file and add the following lines of code in the WordPress Loop:
https://gist.github.com/rafaysansari/99678b780c409c1e302ba8780f453b6a
Be sure to save the single.php file when you’re done. Finally, preview the post you added the custom field to.
Now, if you write a new blog post, you can change the value of the custom field in it to something entirely different. For instance, if we wanted to write a new blog post and set the location to, say, Toronto, it would look something like this:
And here’s how it’ll look like on the front-end:
Hide Custom Fields From Your Users
Hiding custom fields from your site’s front-end is pretty simple. All you have to do is add the following lines of code at the end of your currently active theme’s functions.php file:
https://gist.github.com/rafaysansari/a84ca734941a203ddd04905f5237fcd7
Once you’ve saved the files, all of the custom fields added to posts on your site’s front-end will be hidden. Whenever you want to display them again, simply remove the remove_post_custom_fields() function from the functions.php file.
Using Plugins
If you’d rather not mess around with your theme’s files or any sort of coding for that matter, you can always opt for a plugin solution instead.
Advanced Custom Fields is one of the most popular, free WordPress plugins out there that allows you to integrate custom fields into your content using an intuitive interface. It comes with multiple input types right out of the box such as text, image file, checkbox, date picker, gallery, and more.
Key Features:
- Support multiple input types.
- Comes with an intuitive user interface.
- Uses native WordPress metadata for optimal results.
Custom Field Suite markets itself as a visual custom fields management plugin. It allows WordPress users to create and manage custom fields easily using their clean and intuitive admin user interface. In addition to this, the plugin comes with 12 different field types to choose from including text, WYSIWYG, file upload, and more.
Key Features:
- Comes with 12 different custom field types.
- Features a lightweight API for loading field values.
- Incredibly easy to set up.
How Can I Use WordPress Custom Fields on My Site?
As we mentioned above, there are a number of ways you can use custom fields on your website to deliver more value to your readers. In this section, we’ll show you some different ways to leverage WordPress custom fields.
With a Conditional Statement
One of the best ways to display custom fields is by using a conditional statement. This ensures that if you forget to add a value to the key for a particular post, the default value will replace it.
https://gist.github.com/rafaysansari/e7fa0162dccd69ce0c2d340b800541b5
In the code above, if the key location doesn’t get a value on a particular post then the message Today’s Location: I’m flying to the next destination! will be displayed on the screen in its place.
Only Display Posts With Specified Custom Field
Should you find yourself needing to display only those posts that have a specific custom field, you might want to combine custom field functionality with the query_posts() function. This might come in handy for when you want to group a bunch of posts together or sort them based on custom fields.
To do this, simply copy/paste the following line of code above the WordPress Loop in your currently active theme’s single.php file:
https://gist.github.com/rafaysansari/138bb0f071c5970d5b4dbe51eefdf5a9
Additionally, you can extend it to only display the posts that have the key location and value Toronto.
https://gist.github.com/rafaysansari/b03deffa015a0984d56f52de1531ce5b
Rewrite Guest Author’s Name
If you allow guest posts on your blog, then it’s important to be able to give the writer some credit for their work in the form of a byline. However, creating a new user account for them on your site’s back-end might not be a great solution for you – especially if they’ll only be writing one or two posts.
In such cases, WordPress custom fields come in handy. Basically, what you do is you use an existing account to publish the post from the WordPress back-end and then replace the author’s name with the guest author’s name using custom fields. Here’s how:
https://gist.github.com/rafaysansari/3cc8d8c047fee82b25f605e2b23d0a89
Set Post Expiration Date
If you’re running an online store and want to offer limited-time promotional offers, then you might consider using custom fields to get the job done. The concept here is that you’re creating a key called expiration and setting its value to the date stamp for when you want the post to be removed from your site. Here’s how:
https://gist.github.com/rafaysansari/c102ed2c61cdf87c5f27ebe1e0cca06f
All you have to do now is remember to add a value for the expiration custom field key in the posts that you want to have expire after a given duration.
Conclusion
WordPress custom fields offer a simple solution for adding custom text and bits of functionality to your website without installing a plugin or limiting yourself to widgets. We encourage you to try the techniques we covered in this post on your own and share your experience with us.
Were you able to add WordPress custom fields to your website? Which custom fields did you add to posts and pages Let us know by commenting below!
Epicurean Theme