Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Custom Meta Boxes in WordPress Posts and Post Types

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to create custom meta boxes for your WordPress posts, pages, and custom post types?

WordPress adds metadata to your content automatically, such as the publication date, categories, and tags. However, you may also want to add your own custom meta data.

In this article, we will show you how to easily add unique information to your content, by creating a custom meta data box in WordPress.

How to add custom meta boxes in WordPress posts and post types

What is a Custom Meta Box in WordPress?

When you create posts and pages, or custom post types in WordPress, that content usually has its own metadata. This metadata is information related to the content like date and time, the author name, title, and more.

You can also add your own metadata using the default custom fields box.

Adding custom meta boxes in WordPress posts

Pro Tip: Can’t see the Custom Fields box in the post editor? Then see our guide on how to fix custom fields not showing in WordPress.

The Custom Fields box is a good solution if you just want to add custom metadata to a few posts. However, if you plan to add lots of unique information to your content, then it makes sense to create a custom metadata box.

In fact, many of the popular WordPress plugins add custom meta boxes to the Edit screen for posts and pages. In the following image, you can see how easy it is to add SEO information to your post, using a custom meta box provided by AIOSEO.

The All in One SEO (AIOSEO) WordPress plugin

Having said that, let’s see how you can easily add custom meta boxes in WordPress posts and post types.

How to Add Custom Meta Boxes in WordPress Posts and Post Types

The easiest way to add custom meta boxes to WordPress is by using Advanced Custom Fields. This plugin allows you to attach all kinds of extra information to your posts and pages, and then show that data to visitors using a shortcode.

The first thing you need to do is install and activate the Advanced Custom Fields plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Create a Custom Meta Box

Upon activation, visit the ACF » Field Groups page from the WordPress admin sidebar.

Here, click on the ‘Add New’ button.

Adding a custom field to your WordPress website

You can now create the custom fields that will appear in the metadata box.

To start, you’ll need to type a title into the field that shows ‘Field Group Title’ by default. This will appear in the WordPress content editor, and it will be used as the title of your meta box.

With that being said, you should use something descriptive, especially if you manage a multi-author WordPress blog or share the dashboard with other people.

How to easily add custom meta data to your website or blog

Once that is done, you’re ready to add the first field to your meta box.

Add Custom Fields to the WordPress Meta Box

To start, open the ‘Field Type’ dropdown and choose the type of field you want to add, such as the Date Picker, Checkbox, or Text field.

Adding custom fields to the WordPress content editor

After that, type in a label for the field.

Advanced Custom Fields will show this label before the field, so it will help users understand what information they need to enter.

The Advanced Custom Fields WordPress plugin

Advanced Custom Fields will generate the ‘Field Name’ automatically, so you can leave this field empty.

With that done, you may want to type in a ‘Default Value.’ This will be added to the page, post, or custom post type automatically if the user doesn’t add their own information.

Adding default values to custom WordPress fields

You may see more options depending on the kind of field you’re creating. For example, if you selected ‘Image’ from the ‘File Type’ dropdown, then you can choose the image format.

Most of these options are self-explanatory so you can follow the onscreen instructions to configure the custom field.

When you’re happy with how the field is set up, click on the ‘Close Field’ button to collapse the section.

Adding custom data to a website or blog

You can now add more fields to the custom meta box by clicking on the ‘Add Field’ button.

Then, simply configure the field by following the same process described above.

Saving a custom field group

Add a Custom Meta Box to the WordPress Content Editor

When you’re happy with how the custom meta box is set up, you’ll need to define where and when the meta box will appear.

To do this, scroll to the ‘Settings’ section and then click on the ‘Location Rules’ tab.

Controlling where custom content appears in the WordPress content editor

Advanced Custom Fields can add the box to all kinds of content. For example, you can show the meta box on specific post types, categories, taxonomies, navigation menus, and more.

Simply use the dropdown menus to choose where the meta box will appear in your WordPress dashboard. For example, if you accept guest posts then you may want to add the box to all posts in the ‘Guest Posts’ category.

Creating content rules using a WordPress plugin

After that, click on the ‘Presentation’ tab.

Here, you can choose the meta box style, where it appears on your WordPress blog, and where the label and instructions will appear.

ACF's presentation settings in the WordPress dashboard

If you plan to add multiple boxes in the same location, then you can change the order they appear in by typing into the ‘Order No’ field.

For example, showing the most important meta boxes towards the top of the screen may improve your editorial workflow.

If you’re unsure, then you can leave this field set to 0.

Reorganizing fields in the WordPress content editor

On this screen, you’ll also see a list of all the fields that WordPress usually shows on the post edit screen.

If you want to hide a field, then simply check its box. For example, if you’re using custom fields to create an author info box, then you may want to hide the default ‘Author’ field.

Hiding fields in the WordPress post editor

When you’re happy with the changes you’ve made, click on ‘Save Changes’ to make the field group live.

You’ve now successfully created a custom meta box for your WordPress post, page, or custom post type. Depending on your settings, you can now visit the post editor to see the custom meta box in action.

An example of a custom meta data box, created using a free WordPress plugin

Displaying Your Custom Meta Box Data in WordPress Theme

You’ve now successfully added a custom meta box to the WordPress dashboard. Any information users type into the meta box will be stored in the WordPress database when they save or publish the post. However, this information won’t appear on your website by default.

With that in mind, let’s make sure the custom metadata appears in your WordPress theme, so visitors can see it.

You can do this using shortcode or by editing your WordPress theme files.

How to Display Custom Metadata using Shortcode

Adding a shortcode in WordPress is the easiest method, and allows you to control exactly where the information appears on your website.

For example, if you’ve created a ‘Star Rating’ field, then you can show this information after the post title, inside the content, in the footer, or anywhere else simply by adding a shortcode.

However, you will need to add a shortcode to every page, post, or custom post type manually. This can take a lot of time and effort, especially if you have a lot of content.

To get a field’s shortcode, go to ACF » Field Groups. Then, hover over the field group that you want to display and click on the ‘Edit’ link when it appears.

Editing a meta data field group

You’ll now see all the fields that make up this group.

For each field you want to display, make a note of the value in the ‘Name’ field.

How to show custom data in your WordPress theme using shortcode

With that done, go to the page, post, or custom post type where you want to show the custom metadata.

You can now click on the ‘+’ icon and type in ‘Shortcode.’

Adding shortcode to a WordPress page or post

When the right block appears, click to add it to your layout.

You can now add the following shortcode to the block, making sure to replace "article_byline" with the name of the field you want to show.

Adding custom meta data to a WordPress theme

You can now repeat these steps to add multiple custom fields to the post.

When you’re happy with the changes you’ve made, either click on the ‘Publish’ or ‘Update’ button. Now, simply visit your WordPress website to see the custom metadata in action.

An example of custom meta data, displayed using a shortcode

How to Display Custom Metadata by Editing Your WordPress Theme

If you want to show custom metadata in the same location on every page, post, or custom post type, then you can add code to your WordPress theme files.

This can save you time in the long term, but it isn’t the most beginner-friendly method. You’ll also lose all the custom code the next time you update your WordPress theme, which is why we recommend creating a child theme. You can then add your custom code to the child.

If you haven’t edited your theme files before, then take a look at our beginner’s guide on how to copy and paste code in WordPress.

You’ll need to edit the file where you want to show the custom metadata. This will vary depending on your theme, but you’ll usually need to edit your site’s single.php, content.php, or page.php file.

Once you have the right file, you’ll need to add the code inside the WordPress loop. To find this loop, simply search for the following code that looks something like this:

	<?php while ( have_posts() ) : the_post(); ?>

You can then paste your code after this line and before the line that ends the loop:

	<?php endwhile; // end of the loop. ?>

As an example, your custom field code should look something like this:

	<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

Notice how we wrapped the code in a h2 heading with a CSS class. This allows us to format and style the custom field later by adding custom CSS to our theme.

Here’s another example:

<blockquote class="article-pullquote">
 
<?php the_field('article_pullquote'); ?>
 
</blockquote> 

When adding code to your theme, don’t forget to replace the field names.

With that done, you can visit any post where you’ve already entered data into the custom fields. You will now see your unique metadata in action.

How to add custom fields to a WordPress theme

We hope this article helped you learn how to add custom meta boxes in WordPress posts and post types. You may also want to see our guide on how to create automated workflows in your WordPress site or see our expert pick of the best SEO plugins and tools that you should use.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

16 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Michele says

    Hi, does your plug in also sets the position for the existing metas in WP, such as date or author?
    I need to visualize the data before the title and can’t find a way.
    Thank you, bye!

  3. amazigh says

    hi thanks very much for your very useful plugin.
    just i would like to know if there are any way to add calendar Field as meta-box

  4. Cristina says

    I just want to say that I **love** your blog.
    It covers everything and anything from basic to expert level and always offers alternatives and/or links to dig into in case one needs more advanced instructions.
    I have been working with WordPress on a daily basis for a few years now, but I still look forward to your newsletters and always check in to see if there’s anything there for me, even only inspiration for new stuff to learn and implement on my websites!
    So, from the bottom of my heart, thank you!
    :-)

  5. Marijn says

    Hi, thanks for this explanation!
    I created a custom checkout field (2nd email adress) for WooCommerce without the use of Advanced Custom Field plugin.
    How can I create a meta box with this plugin for this custom checkout field? The location settings (which edit screens will use these advanced custom fields) doesn’t have the option for checkout pages?
    Thanks in advance!

  6. eze says

    wp beginner please u guys didn’t add what was needed on how to start a blog.. like adding a portfolio, adding an e-book for sale and other similar things like this

  7. Alan says

    I want to add a custom field for a custom taxonomy and then have that output on every post with that particular taxonomy. Does anyone know if this is possible?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.