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.
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 psot 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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
