Custom fields are a powerful WordPress feature that lets you add extra data to your posts and pages. While they‘re often overlooked in favor of flashy page builders, custom fields give you the flexibility to add all sorts of extra content and functionality to your WordPress site.
In this in-depth guide, we‘ll cover everything you need to know about custom fields in WordPress. You‘ll learn how to enable and add custom fields, display them in your theme, and harness their power with advanced tips and tricks. Let‘s get started!
What are WordPress Custom Fields?
Custom fields, also known as post meta, let you store and display additional data for your posts, pages and custom post types. Some examples of information you could store in custom fields includes:
- Extra text that you don‘t want cluttering up the main content area
- Data like prices, weights, dimensions for products
- Dates like an event start/end date or expiry date
- Media like photos, videos, and file attachments
- Location data
- And just about anything else you can imagine!
By default, WordPress includes a Custom Fields meta box on the post/page editing screen. However, this basic tool requires you to manually enter field names and values which isn‘t very user-friendly, especially for non-technical users.
Fortunately, there are plugins available that make it much easier to create and manage custom fields. We‘ll discuss those later in this post. But first, let‘s look at how to enable and use the native custom fields feature.
How to Enable and Use Custom Fields in WordPress
The Custom Fields meta box is hidden by default in newer versions of WordPress. To enable it:
- Go to the post or page editor screen
- Click the three-dot menu icon in the top-right corner and select Options
- Check the Custom Fields checkbox
- Click Enable & Reload
The Custom Fields meta box will now appear below the content editor. Here‘s how to add a custom field:
- Enter a name for your custom field in the Name field
- Enter the value in the Value field
- Click Add Custom Field
Your new custom field will appear in the list with the name and value you specified. You can add multiple custom fields to a post by repeating the process.
To remove a custom field, simply delete the value and WordPress will remove the field when you update the post.
How to Display Custom Fields in Your WordPress Theme
Once you‘ve added custom fields to a post or page, you‘ll likely want to display that information on the front-end of your site. To do this, you‘ll need to edit your theme template files.
Before editing any theme files, it‘s a good idea to create a child theme. That way, you can make changes without worrying about losing them when you update the parent theme.
Here‘s a basic example of how to display a custom field in your single post template (single.php):
<p>
<?php
$custom_field = get_post_meta( get_the_ID(), ‘custom_field_name‘, true );
if ( $custom_field ) {
echo esc_html( $custom_field );
}
?>
</p>Make sure to replace custom_field_name with the actual name of your custom field.
This code checks if the custom field has a value using get_post_meta(). If it does, the value is displayed within a <p> tag. The esc_html() function is used to safely output the value and prevent cross-site scripting (XSS) attacks.
You can use this code anywhere in your template files where you want the custom field to appear. Just be aware that it will only display the field for the current post in the loop.
Create Custom Field Interfaces With Plugins
As mentioned, the default Custom Fields meta box is quite basic and not very user-friendly. If you‘re working with clients or team members, it‘s not realistic to expect them to enter custom field names and values manually.
Plugins like Advanced Custom Fields (ACF), CMB2, and Pods make it much easier to create custom field interfaces. With these tools, you can create fields using a drag-and-drop interface and arrange them into intuitive groups and layouts.
ACF is one of the most popular custom field plugins and offers a free version as well as a pro version with more advanced field types and features. Some examples of the fields you can create with ACF include:
- Text fields
- Image fields
- File upload fields
- WYSIWYG editors
- Date pickers
- Google Maps fields
- Repeater fields for creating repeatable groups of fields
- Flexible content fields that let you define multiple field group layouts
To get started with ACF, install and activate the plugin, then go to Custom Fields > Add New to create a new Field Group. Give your Field Group a title and choose where it should be displayed (specific post types, page templates, user roles, etc.).
Click the + Add Field button to add a new field, select a field type, configure the options, then click Publish to save your Field Group. Your custom fields will now appear on the post editing screen for the location(s) you specified.
The pro version of ACF includes a handy feature called ACF Blocks that lets you create custom Gutenberg blocks with fields powered by ACF. This is an easy way to give your clients a user-friendly interface for creating more complex layouts.
Advanced Custom Field Tips and Tricks
Now that you know the basics of working with custom fields in WordPress, let‘s look at some more advanced tips and tricks you can use to get the most out of this powerful feature.
Check if a Custom Field is Empty
In the earlier example of displaying a custom field, we wrapped our code in a conditional tag to check if the field had a value before displaying it. This prevents empty fields from showing up on the front-end.
Here‘s what that code looks like:
<?php
$custom_field = get_post_meta( get_the_ID(), ‘custom_field_name‘, true );
if ( $custom_field ) {
echo esc_html( $custom_field );
}
?>The if ( $custom_field ) part checks if the $custom_field variable has a non-empty value. If it does, the code inside the curly braces is executed. If not, nothing is displayed.
Store and Display Multiple Custom Field Values
Sometimes you may want to store multiple values in a single custom field. With ACF, you can create Repeater fields to do this. But with the default custom fields, you can add the same custom field name multiple times to a post, each with a different value.
To display multiple values, you need to modify the get_post_meta() function to return an array instead of a single value. Here‘s an example:
<?php
$custom_field = get_post_meta( get_the_ID(), ‘custom_field_name‘, false );
if ( $custom_field ) {
echo ‘<ul>‘;
foreach ( $custom_field as $value ) {
echo ‘<li>‘ . esc_html( $value ) . ‘</li>‘;
}
echo ‘</ul>‘;
}
?>This code uses get_post_meta() with false as the third parameter to return an array of all values for the specified custom field. It then loops through the array and displays each value as a list item.
Display Custom Fields Outside the Loop
By default, template tags like get_post_meta() only work inside the WordPress loop. But what if you want to display a custom field in the sidebar or somewhere else outside the loop?
To do this, you need to use the get_queried_object() function to get the current post object. Here‘s an example:
<?php
$post = get_queried_object();
$custom_field = get_post_meta( $post->ID, ‘custom_field_name‘, true );
if ( $custom_field ) {
echo esc_html( $custom_field );
}
?>This code gets the current post object using get_queried_object() and assigns it to the $post variable. It then uses $post->ID to get the post ID and retrieve the custom field value.
Note that this code will only work on single post pages. If you want to display custom fields on archive pages or elsewhere, you‘ll need to modify it to fit the context.
Search Posts by Custom Field
Out of the box, WordPress doesn‘t allow you to search for posts by custom field values. However, there are a few plugins that add this functionality:
- SearchWP – A powerful search plugin that lets you search by custom fields, taxonomies, and more.
- Relevanssi – A free search plugin that supports searching by custom fields.
- FacetWP – Lets you create custom search filters based on custom fields, taxonomies, and more.
With these plugins, your users will be able to find posts based on custom field values, making it easier for them to find the content they‘re looking for.
Use Custom Fields for Post Expiration
Want to make a post expire after a certain date? You can use custom fields to store an expiration date and modify your theme to check for expired posts.
First, add a custom field to the post with the expiration date in Unix timestamp format. You can use an online tool like EpochConverter to get the timestamp.
Then, add this code to your template file:
<?php
$expiration_date = get_post_meta( get_the_ID(), ‘expiration_date‘, true );
if ( $expiration_date && current_time( ‘timestamp‘ ) > $expiration_date ) {
echo ‘This post has expired.‘;
} else {
// display post content
}
?>This code retrieves the expiration_date custom field value and compares it to the current timestamp using current_time( ‘timestamp‘ ). If the current time is greater than the expiration date, it displays an expiration message instead of the post content.
There are also plugins like Post Expirator that can handle post expiration for you.
Conclusion
Custom fields are a versatile tool that let you add all sorts of extra data to your WordPress posts and pages. While the default custom field interface is a bit clunky, plugins like ACF make it easy to create user-friendly custom field groups.
To recap, some of the key points we covered include:
- Enabling custom fields in WordPress
- Adding custom fields to posts and pages
- Displaying custom fields in your theme files
- Creating custom field interfaces with plugins like ACF
- Checking if custom fields are empty before displaying
- Displaying multiple custom field values
- Displaying custom fields outside the loop
- Searching posts by custom fields
- Using custom fields for post expiration
Hopefully this guide has given you a solid foundation for working with custom fields in WordPress. With a little creativity and coding know-how, the possibilities are virtually endless!
