WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Add Custom Meta Boxes in WordPress Posts and Post Types

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

Last updated on October 4th, 2017 by Editorial Staff
354 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Custom Meta Boxes in WordPress Posts and Post Types

Do you want to create custom meta boxes for your WordPress posts, pages, and custom post types? Custom meta boxes are commonly used to provide a better user interface for adding custom fields (meta data) into your content. In this article, we will explain what is a custom meta box, and how you can easily add custom meta boxes in WordPress posts and post types.

How to add custom meta boxes in WordPress posts

What is a Custom Meta Box in WordPress?

Custom meta box is a more user friendly interface to add custom fields (meta data) in your posts, pages, and other custom post types.

WordPress comes with an easy to use interface that helps you create content like posts and pages, or custom post types.

Normally, each content type consists of the actual content and its metadata. Metadata is information related to that content like date and time, author name, title, and more. You can also add your own meta data by using custom fields.

Custom fields

However, adding metadata using the default custom fields box is not very intuitive. This is where custom meta boxes come in.

WordPress allows developers to create and add their own custom meta boxes on post edit screens. That’s how most popular plugins add different options on your post edit screens.

For example, the SEO title and meta description box inside Yoast SEO plugin is a custom meta box:

Category SEO Title and Meta description in Yoast SEO

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

Creating Custom Meta Boxes in WordPress

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.

Upon activation, the plugin adds a new menu item labeled ‘Custom Fields’ to your WordPress admin bar. Clicking on it will take you to the custom fields page.

This page will be empty since you haven’t created any custom fields yet. Go ahead and click on the ‘Add New’ button to continue.

Add new custom fields group

You will be taken to the ‘Add New Field Group’ page.

Here you need to provide a title for your field group. This title will be used as the title of your meta box.

After that you can start adding your fields. Simply click on the ‘+ Add Field’ button to add your first field.

Add your fist field

This will bring up the field settings form. First you need to provide a label for your field. This label will be displayed in your meta box before the field.

Creating a new field for your custom meta box

After that you need to select the field type. Advanced Custom Fields plugin allows you to choose from a whole range of options. This includes text, textarea, radio buttons, checkboxes, full WYSIWYG editor, images, and more.

Next, you need to provide field instructions. These instructions will tell users what to add into the field.

Below that, you will find other options for your field. You need to carefully review these options and adjust them to match your needs.

Field settings

Next, click on the close field button to collapse the field.

If you need to add more fields to your metabox, then click on the ‘+ Add Field’ button to add another field.

Close field and add another

Once you are done adding fields, you can scroll down to the location section. This is where you can define when and where you want your meta box to be displayed.

Location rules

Advanced Custom Fields comes with a handful of predefined rules for you to choose from. For example, you can select post types, post category, taxonomy, page parent, and more.

Next, comes the meta box options settings.

First you need to choose the order number. If you have multiple field groups defined for one location, then you can select the order number for them to be displayed. If you are unsure, then leave it as 0.

Meta box options

Next, you need to choose the meta box position on the page. You can choose to show it after the content, before the content, or in the right column.

Below that, you will need to choose a style for your meta box. You can choose it to be like all other WordPress meta boxes, or you can choose it to be seamless (without any meta box).

If you are unsure, then select Standard (WP Meta box) option.

Lastly, you will see a list of fields normally displayed on a post edit screen. If you want to hide a particular field on your post edit screen, then you can check it here. If you are not sure, then its best to leave them unchecked.

Once you are done, click on the publish button to make your field group live.

Publish your field group

Congratulations, you have successfully created your custom meta box for your WordPress post or post type.

Depending on your settings, you can now visit your post or post type to see your custom meta box in action.

Custom metabox preview

You can use this custom meta box to add meta data into your posts or post types. This data will be stored in your WordPress database when you save or publish the post.

Displaying Your Custom Meta Box Data in WordPress Theme

So far we have successfully created a custom meta box and displayed it on our post edit screen. The next step is to display the data stored in those fields on your WordPress theme.

First, you need to edit the custom field group you created earlier. On the ‘Edit Field Group’ page, you will see your custom fields, and their names.

Field names

You will need these fields names to display them on your website.

Advanced Custom Fields allows you to do that in two different ways.

First, you can use a shortcode to display a custom field into your post.

[acf field="article_byline"]

You can also display them by adding code into your WordPress theme files. If you haven’t done this before, then take a look at our beginner’s guide on how to copy and paste code in WordPress.

You will need to edit the theme file where you want to display the data from these fields. For example, single.php, content.php, page.php, and so on.

You will need to make sure that you add the code inside the WordPress loop. The easiest way to make sure that you are entering the code inside the loop is to look for a line in your code that looks like this:

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

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

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

Your custom field code would look something like this:

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

This code will display the data entered into the article byline field of our custom meta box.

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

Here is another example:

<blockquote class="article-pullquote">

<?php the_field('article_pullquote'); ?>

</blockquote> 

Don’t forget to replace the field names with your own field names.

You can now visit the post where you have already entered the data into your custom fields. You would be able to see your custom meta data displayed.

Custom fields displayed on a website

Advanced Custom Fields is a very powerful plugin with a lot of options. This tutorial only scratches the surface. If you need more help, then don’t forget to check out the plugin’s documentation on how to further extend it.

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 step by step guide on how to boost WordPress speed and performance for beginners.

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.

354 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

13 Comments

Leave a Reply
  1. Michele says:
    May 21, 2018 at 10:53 am

    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!

    Reply
  2. amazigh says:
    Dec 4, 2017 at 5:35 pm

    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

    Reply
  3. Likith Reddy says:
    Jul 24, 2017 at 12:04 pm

    Hey I wanna build a music portal website with WordPress can u plz help me?

    Reply
    • Jose says:
      Dec 11, 2017 at 3:39 pm

      Hello. Any success with the music portal yet?

      Reply
  4. Dominika says:
    Jun 16, 2017 at 1:49 pm

    Is possible to create custom fields and add them to product list in eshop?

    Reply
  5. Cristina says:
    Jun 16, 2017 at 1:29 pm

    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!
    :-)

    Reply
    • WPBeginner Support says:
      Jun 16, 2017 at 10:37 pm

      Hi Cristina,

      You are welcome and thank you for the kind words. :)

      Reply
  6. Marijn says:
    Jun 14, 2017 at 7:36 am

    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!

    Reply
  7. eze says:
    Jun 13, 2017 at 6:19 am

    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

    Reply
    • WPBeginner Support says:
      Jun 13, 2017 at 10:48 pm

      Hey Eze,

      We have covered those topics. See how to add a portfolio in WordPress and then how to sell ebooks in WordPress.

      Reply
  8. Alan says:
    Jun 13, 2017 at 5:48 am

    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?

    Reply
    • Jodi Shaw says:
      Nov 10, 2018 at 6:47 pm

      I want to know the same thing. I would like to wrap my post date and place it next to my blog post title for every post in h2 header. So that every post grabs the right date and looks like 06/22 | (blog post title)

      Reply
      • WPBeginner Support says:
        Nov 12, 2018 at 3:56 am

        Hi Jodi,

        For that first you need to select the date and time format in WordPress settings. After that you will need to edit your theme files to do that.

        Reply

Leave a Reply Cancel 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
SeedProd Logo
SeedProd Coupon
Get 50% OFF SeedProd Coming Soon Page plugin for WordPress.
Cozmoslabs
Cozmoslabs Coupon
Get 15% OFF on Cozmoslabs WordPress premium plugins.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.