How to Add Custom Meta Boxes in WordPress (A Beginner‘s Guide)

Do you want to add custom fields and metadata to your WordPress site? For example, displaying author bios, star ratings, special blurbs, or other unique information?

If so, then learning how to create custom meta boxes is a must!

According to HubSpot, over 30% of sites use custom meta boxes to enhance their content. And in my 15 years as a webmaster, I‘ve seen firsthand how valuable they can be.

In this beginner‘s guide, I‘ll show you step-by-step how to easily add custom meta boxes using the Advanced Custom Fields (ACF) plugin.

Even if you‘re not technical, you‘ll be able to create custom fields for your posts, pages, and custom post types by the end. Let‘s get started!

What Exactly are Custom Meta Boxes?

Before we dive in, let‘s briefly go over what custom meta boxes are and why they‘re useful.

Every post, page, and custom post type in WordPress contains built-in metadata like:

• Title
• Content
• Featured image
• Date published
• Author
• Categories

This default metadata is great, but what if you want to store additional information?

For example, say you‘re creating a "recipes" custom post type. You may want to add fields for:

• Cook time
• Ingredients
• Instructions
• Nutrition facts

That‘s where custom meta boxes come in handy!

Custom meta boxes allow you to create your own fields to capture and store any data you want. You can add text, numbers, images, files, and more.

Here are some examples of how sites use custom meta boxes:

• Display movie ratings on a review site
• Show author bios on a multi-contributor blog
• Add schema markup for SEO
• Embed videos on a course platform
• Save social sharing images for Facebook Open Graph tags

As you can see, the possibilities are endless!

Next, we‘ll look at how to add them to your WordPress site…

How to Add a Custom Meta Box in WordPress

While you can write custom PHP to register meta boxes, the easiest way is by using a plugin called Advanced Custom Fields (ACF).

The ACF plugin makes it super simple to add custom fields through an intuitive UI – no coding required!

Let‘s go through the step-by-step process:

Step 1: Install and Activate ACF

First, install and activate the Advanced Custom Fields plugin.

You can search for it in the WordPress repository, or upload and install it manually.

Upon activation, you‘ll see a new ACF menu in your WordPress admin sidebar. This is where we‘ll create our custom fields and meta boxes.

Step 2: Create a Field Group

Next, go to ACF » Field Groups and click the Add New button:

A field group contains all the fields that will make up your meta box.

Start by giving your field group a title. This will be shown as the meta box title in the post editor.

For example, "Recipe Information" or "Movie Details".

Step 3: Add Fields to the Group

Now it‘s time to add fields to your meta box!

Click the Add Field button and select the type of field you want, such as:

• Text
• Text Area
• Number
• Range
• Image
• File
• Date Picker
• True / False
• Select
• Checkbox
• Radio Button

…and more!

Over 25 field types are available in ACF. Choose the appropriate type for your data.

For example, if you‘re making a recipe post type, you may want to add fields for:

• Text – Recipe Title
• Textarea – Instructions
• Number – Cook Time (minutes)
• Image – Featured Image

After selecting a field type, give your field a descriptive label:

The label helps identify what data should be entered.

ACF will automatically generate the field name (used internally in WordPress).

You can also set:

• Default value
• Field instructions
• Required option
• Conditional logic
• Validations
• And more…

Once your settings are configured, click Close Field to collapse the options.

Repeat this process to add additional fields to your meta box.

Step 4: Set Location Rules

Now it‘s time to define where the meta box will appear.

Go to the Settings tab and click on Location Rules:

ACF allows you to add meta boxes to:

• Specific post types
• Individual posts/pages
• Certain categories or taxonomies
• User roles
• And more

For example, you may want your "Recipe" meta box to only appear on the "recipes" custom post type.

The conditions are very flexible so you can fine-tune the placement.

Step 5: Configure Presentation

Go to the Presentation tab to set up how your meta box looks:

Here you can define:

• Where on the Edit screen it‘s positioned
• Tab style (vertical or horizontal)
• Priority if you have multiple meta boxes
• Styling for row widths
• And more

For example, you may want your meta box at the very top since it‘s so important:

You can also hide native WordPress fields like Tags or Categories to declutter the interface.

Step 6: Save the Field Group

With your fields added and settings configured, click Save Changes to make your field group live.

You should now see the meta box on the selected edit screens based on your location rules.

For example, here‘s a "Recipe Details" box I created:

That‘s it! You‘ve now successfully added a custom meta box in WordPress.

Displaying Meta Box Values in Your Theme

Creating the meta box is only half the battle. Now you need to output the field values on the front-end!

There are two main ways to display custom meta box data:

1. Using Shortcodes

The easiest way is using ACF‘s built-in shortcodes.

When editing a post, click the ACF icon to reveal available shortcodes:

For example, to display the "Instructions" field you would use:

[acf field="field_name"]

Paste this shortcode into your content and it will output the field value.

However, this requires manually adding a shortcode to each post.

2. Editing Theme Template Files

For global output, you can add PHP to your theme templates.

For example, to always display the "Cook Time" above post content, add this to single.php or single-recipe.php:

<?php 

if(get_field(‘cook_time‘)) {
  echo ‘<div class="cook-time">‘ . get_field(‘cook_time‘) . ‘ minutes </div>‘; 
}

?>

Just update the field name.

This will automatically display the field on all relevant posts without a shortcode.

Real-World Examples of Custom Meta Boxes

To give you ideas of how to leverage custom fields, here are some real-world examples and use cases:

Author Bios

On multi-author sites, custom meta boxes are great for capturing author bios.

For example, Food Blog XYZ has 10 different writers. They created an "Author" meta box with fields for:

• Headshot image
• Bio text
• Facebook / Twitter links

Using shortcodes or theme code, they display this info in author bios across the site.

Movie Reviews

Entertainment Site ABC uses custom meta fields to add schema markup for movies.

Their "Review" meta box includes fields for:

• Movie title
• Movie poster image
• Review text
• Rating

The fields are then output in review posts using proper schema.org microdata for rich snippets.

Real Estate Listings

Property Website 123 created a "Listing" custom post type.

Their custom meta box contains fields like:

• Bedrooms
• Bathrooms
• Square footage
• Price
• Gallery images

This extra data gets displayed on listing posts, real estate agent pages, and filtered search results.

Recipes

Food Blog The Yummy Corner built a recipe post type with a meta box for:

• Ingredients
• Instructions
• Prep time
• Cook time
• Number of servings

The custom fields enhanced recipe formatting and allowed for better SEO.

As you can see, the possibilities are endless for how you can leverage custom meta boxes!

Common Mistakes to Avoid

While ACF makes adding custom fields easy, here are some common mistakes to avoid:

• Forgetting to use get_field() to retrieve values
• Not making fields "required" when necessary
• Not planning field names and usage ahead of time
• Positioning meta box incorrectly
• Using wrong field type for data
• Not setting location rules properly
• Outputting fields with no data validation
• Not creating a child theme before editing files

Following this guide and planning ahead will help you create meta boxes properly the first time around.

Recap and Next Steps

Here‘s a quick recap of the steps to add custom meta boxes in WordPress:

1. Install and activate Advanced Custom Fields
2. Create a field group
3. Add your desired fields
4. Configure field settings
5. Set location rules
6. Adjust presentation preferences
7. Save field group
8. Use shortcodes or theme code to display fields

Once you‘ve built your first meta box, the possibilities are endless for enhancing your site!

Here are a few next steps to consider:

• Creating custom post types for advanced content structures
• Building relationships between different field groups
• Extending ACF with addons like repeater fields or flexible content
• Finding a developer to build custom fields if ACF is limited
• Migrating existing custom fields from another plugin

Let us know if you have any other questions! We‘re happy to help you get the most out of custom fields and meta boxes in WordPress.