The custom field is a useful and customizable WordPress feature that lets you show additional information about your posts. It helps you assign more data to it, such as disclosures, contact details, and so on.
In this article, you will learn further about what custom fields are and how you use them on your WordPress site.
Table of Contents
What are WordPress Custom Fields?
Before learning about custom fields, let’s discuss what fields mean in WordPress.
When you’re writing a post, WordPress saves it into two areas. The first part is the content itself, while the second one is the details about your post. In the latter, you can store more information such as text, numbers, dates and such – which is then called metadata.
Metadata is handled with key/value pairs. As you’ll see later on, the key is the name of the custom field while the value is the information that you want to show on a related post.
However, not all kind of data can be shown in this default WordPress field, which means you have to create a custom one.What’s great, you’ll be able to have tons of WordPress custom fields once you know how to do it right. Here are some examples of what information you can show:
- Currently reading
- Now listening
- Author information
- Sponsored post disclaimer
Keep in mind that WordPress custom fields are different from custom posts. The latter is a preformatted post that has a specific purpose, like a product or review pages. You can use both in the same place or put them separately.
Without much further ado, we are now going to show you how to easily add custom fields on your WordPress post!
How to Add WordPress Custom Fields to Your Post?
There are two methods that you can use to make a WordPress custom field — with a dedicated plugin or manually editing your theme. You’ll learn the steps as well as the advantages of using either of them.
Using The Advanced Custom Fields Plugin
Making use of Advanced Custom Fields Plugin will simplify the process of adding and showing custom fields on your post. The steps are pretty fast and straightforward, too.
Once you activate the plugin, navigate to its settings on your WordPress dashboard and click Add New. It will allow you to configure a new field group.To start making one, click the Add Field. You have to enter all this required information:
- Field label — the name of custom field on the plugin’s edit page
- Field name — the name of the custom field that will serve as the key in the metadata
- Field type — the type of information you want to show (email, phone number, data, etc)
- Location — the part of your post where you want to show the information
You can also automatically set this custom field to be in a specific post type. For example, there will always be a location metadata in every regular post. In order to do so, you have to configure it in Show this field group if section.
While this tool is free, there is a premium option with more features that starts from $25.
Nonetheless, it is important to note that using this plugin will only help you create and manage lots of custom fields, not to publish them on the front end of your site.
All the data you make will be saved on the WordPress database instead.
To show a custom field on your website, you need to edit the theme files manually.
Add WordPress Custom Fields by Editing Your Theme
While using a plugin will make it super easy for you to add custom fields, you can learn how the process really works if you edit it manually in your theme.
The aim here is to insert several lines of code to your theme file so that it can show the additional information you want to provide on your site. It may sound technical but the manual process of making a custom field is actually easier than it seems.
The first thing you need to do is open the WordPress editor by clicking on one of your posts. Look for the three-dot menu at the top right corner and choose Options. A popup window will appear and at the bottom, you can check Custom Fields.You’ll notice there is now a custom field section under your post editor, that looks like this:Type in the name of your custom field on the left and the value on the right. Then, click Add Custom Field or Enter New to create more of it if you need.
However, to make it visible on your site, you have to look for a function called WordPress loop on your theme file and edit it accordingly. By default, it looks like this:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; else: ?> <?php endif; ?>
We’ll show you real-life usage examples.
Let’s say you want to give a little bit of information about your store’s location. After you complete the required columns and add the custom field, it’s time to grab the theme file by using FTP, such as FileZilla.
The file location is in public_html/wp-content/themes.Once you’re in there, find the folder of your active theme. In this case, our example is the default twentyseventeen. After that, locate the single.php file and click edit/view button. You’ll be able to edit it on your default text editor.
In our example, we add these lines before the loop ends to recall the store location custom field.
Note: The WordPress loop will vary depending on what page you’re editing and what theme you are using.
<div class="store-location"> <p>Visit our store at: <?php echo get_post_meta($post->ID, 'location', true); ?> </p> </div>
More details on the code:
- get_post_meta() — the command to retrieve a post meta field
- $post->ID — the associated post in which the information will show
- ‘location’ — the custom field that we created previously
- true — the command will return only the first value of the specified meta key
Now you can save the file and upload it back to your website. There will be an additional line like this at the end of your post.What you see above is when the custom field is displayed at the bottom of your post, just before the comments. However, you have the freedom to put the code everywhere on the loop based on where you need the custom field to show.
For instance, if you want it to be at the top of your post, just add the snippets before this line
while ( have_posts() ) : the_post();
Be aware that this is pretty basic steps to display custom fields on your site. If you want to learn more advanced implementations, you need to master PHP first before taking things further.
Also, if you want to test many things on your site, we suggest that you learn to use a child theme. It allows you to have tons of modification without breaking the main theme.
Custom fields can help you assign more data to your posts to provide additional useful information for your readers.
There are two methods to use custom fields and as you have learned, the steps are quite easy to implement.
For a more simple process and better custom field management, we suggest that you use the Advanced Custom Fields Plugin that is available for free.
Or you can choose to manually add it via WordPress post editor.
Either way, you still have to edit your theme file in order to display the custom field on your website. And if you follow our steps, it’s actually easier than it seems.
If you have any questions about WordPress custom fields, be sure to comment down below!