WordPress custom fields…what are they? How do they help you?
If you’re not a developer, you might not be familiar with these magical little tools. However, I can almost guarantee that you’ve used and benefited from WordPress custom fields in your day-to-day WordPress life, even if you didn’t know it.
Here’s the thing, though:
WordPress custom fields are not only beneficial to developers. And even if you’re just a regular ‘ole WordPress user (without any special development knowledge), you’ll still want to learn about WordPress custom fields because this concept will unlock a whole new world of possibilities for your site.
In this post, I’m going to explain how to unlock those possibilities. You’ll learn:
Let’s get customizing!
What are WordPress Custom Fields? How Do They Help?
In developer speak, custom fields let you store extra information called “meta-data” using key/value pairs.
In human speak, that basically means that custom fields help you store additional information about a piece of content. You can either just keep this information to yourself and show it in the backend editor. Or, you can display it on the frontend to your visitors.
For example, let’s say you’re writing a review of a product and you want to give it a star-rating out of five.
Without custom fields, you’d need to just write that information into the body of the blog post where you review the product.
But with custom fields, you could create a separate input spot where you can just select the desired rating. In fact, this is what a lot of WordPress review plugins do.
So why is using a custom field better than just writing it into the body of the post? Basically, it makes it a lot easier to work with that data. Now, you could:
- Let people search and filter content by the review rating
- Make sure the review rating always has the exact same styling
- Easily update the review rating in the future
- Etc.
In fact, a huge number of the plugins that you use and love are relying on the principles of custom fields. Some examples – if you have a…
- Events plugin, that plugin will use custom fields to store event dates, prices, etc.
- eCommerce plugin, that plugin will use custom fields to store product prices, details, etc.
- Directory plugin, that plugin will use custom fields to store information about each item in your directory.
Or, you can also use custom fields in a simpler way, like to add some extra information to a blog post. For example, you could display the:
- Location from which you’re writing a post (this would be cool for a travel blog)
- Album you’re currently listening to or book you’re currently reading
- Weight you most recently lifted at the gym (this would be cool for a fitness blog, and it’s the example that I’ll use below)
- Etc.
In a nutshell, custom fields are a big part of what make WordPress so flexible and understanding how to use them will help you create more unique, dynamic WordPress sites.
Easy-to-Use WordPress Custom Fields Plugins
While WordPress does include built-in functionality for custom fields, the easiest way to work with custom fields is with a WordPress custom fields plugin. You have a few great options here…
1. Toolset
Toolset is a popular suite of tools that help you work with WordPress custom fields and post types.
One of the great things about Toolset in comparison to the other tools is that it can pretty much completely eliminate code from the equation.
That is, you’ll be able to display your custom fields information in a really simple way.
Because of that fact, I’m going to use Toolset in the tutorial when I show you how to work with custom fields in WordPress.
Toolset is a premium solution, with plans starting at just $69. You can learn more in our full Toolset review.
2. Advanced Custom Fields
Advanced Custom Fields is a popular option that lets you add a variety of new custom field types through a simple, user-friendly interface.
It also makes it fairly simple to display custom field data, with options to display fields via both PHP or shortcodes.
All in all, this one is super popular for a reason, and makes a great option if you’re a little more technically savvy.
The core version is available for free at WordPress.org. Then, the Pro version starts at just $25.
3. Pods
Pods is a popular free framework that helps you work with both custom fields and custom post types.
I’ve used Pods on a couple of my own sites and found it pretty easy to get started with. It also lets you display custom field data using simple magic tags (rather than PHP), which is convenient. You’ll still need to know a little bit of HTML/CSS to make things look good, but I’m not a developer and I was able to muddle through it.
Pods is 100% free.
4. Meta Box
Meta Box is another popular WordPress custom fields plugin that operates with an approach that’s similar to Advanced Custom Fields.
It supports 40+ different custom field types, including advanced features like repeater groups.
You can also display field information using both PHP or shortcodes.
The core version is free at WordPress.org, and then there are a number of free and premium extensions that add more functionality.
How to Use and Display WordPress Custom Fields With Toolset
All of the plugins above are great options, but I’m going to use Toolset for this tutorial. Again, that’s because it makes it easy not just to add custom fields, but also to take that information and display it on the frontend of your site.
To create custom fields with Toolset, you’ll need the Types module. Then, to display those custom fields, you’ll want the Views or Layouts modules.
For this example, I’ll assume that you just want to add custom fields to a regular WordPress blog post. But you could also use Toolset Types to create your own WordPress custom post type and then add custom fields there.
For this example, let’s say we have a fitness blog and we want to add custom fields to track the numbers on our core lifts (deadlift, squat, etc.).
Let’s dig in…
Step 1: Access Custom Fields Interface
Once you’ve installed Toolset Types, go to the new Toolset area in your WordPress dashboard.
From there, find the post type that you want to add custom fields to – Posts in our example – and click the Add custom fields button:
Step 2: Choose Field Type
This will open a popup where you can choose what type of custom field to add. You’ll want to choose the option that connects to the information you want to display.
For this example – tracking the weight you lift for a specific exercise – you’d want a Number field type:
Step 3: Configure Field
Once you’ve selected the field type, you’ll get a number of options to configure it.
You don’t have to fill out every single setting, but you’ll want to at least enter a name and peruse the rest of the options:
The Conditional display option is a neat feature that lets you display different fields based on other fields.
For example, you could first create a set of radio boxes that list your workouts (push, pull, lower, etc). Then, you could use conditional logic to only display the specific lifts that apply to the workout you selected.
Step 4: Repeat and Save
Now, just repeat the process for all the other custom fields that you want to add.
When you’re finished, give your field group a name (this is the name for the collection of all the custom fields) and click Save Field Group:
Step 5: Add Custom Field Data in WordPress Editor
Once you save your field group, you’ll get a new meta box in the WordPress editor where you can add data to your custom fields.
For example, you can see how I first created a set of radio boxes for the type of workout:
Then, once I select a workout, a new set of custom fields appear for that workout (using Toolset’s conditional logic feature):
Step 6: Display on Frontend
At this point, you’ve stored your data in the custom fields…but that data won’t display on the frontend yet for your human visitors.
To make the information display on the frontend, you can use Toolset’s Views or Layouts modules. For example, here’s what it looks like to create a template to add custom fields to a blog post:
Or, you can also use Elementor Pro…
Consider Elementor Pro to Display Custom Fields Data
If you read WPLift a lot, you know that we’re big fans of Elementor (we use it here at WPLift, so we’re putting our money where our mouths are).
With the premium version of Elementor – Elementor Pro – you can dynamically include custom fields in your Elementor designs via a really simple interface.
Currently, Elementor Pro works with all the plugins I highlighted above:
- Toolset
- Advanced Custom Fields
- Pods
- Meta Box (with a free extension)
So you can still use those same tools from above to actually create your custom fields. But then you’d use Elementor powerful design options to display that data on the frontend.
To insert custom field data in Elementor Pro, you’ll use the new Dynamic option that’s added to existing widgets. For example, you would add a regular Text Editor widget and then use the Dynamic option to insert information from the custom field. You can even prepend or append information:
You can learn more about Elementor’s many features in our full Elementor review.
Final Thoughts
At this point, I hope the gears in your brain are turning with some cool ideas for how you could apply WordPress custom fields to your own WordPress site.
For best results, I recommend also learning about WordPress custom post types, as combining custom post types and custom fields is where WordPress gets really powerful.
Or, if you want an alternative to the method of working with WordPress custom fields that I showed you in this post, you can also check out our guide on how to create a custom Gutenberg block in WordPress, as that will let you accomplish something similar.
Any questions about working with custom fields in WordPress? Ask away in the comments and we’ll do our best to help!
