Hosting Tutorial & Guide

How to Add Custom Meta Boxes in WordPress Posts and Pages

updated on Sep 08, 2017
How to Add Custom Meta Boxes in WordPress Posts and Pages Meta boxes are commonly used to add meta data to content. By default, WordPress comes with the pre-determined meta boxes for posts. These include the boxes for authors, publishing details, categories, and tags. Custom meta boxes, however, allow you to add more meta data you want in your own way. For example, plugins like Yoast SEO add custom meta boxes for the adding of keywords and meta description to make your posts more SEO friendly. This time, we'd like to come out the simple tutorial of how to add custom meta boxes in WordPress posts and pages

Surely, custom meta boxes provide a solution of adding additional information. However, manually adding them is not intuitive for beginners due to the requirement of coding knowledge. Instead, we suggest you take advantage of a plugin to deal with custom meta boxes in the case you need. The plugin method is convenient, and much simpler.

Create Custom Meta Boxes in WordPress with Plugin

The plugin we recommend here is named Advanced Custom Fields which supports various field types, including text, email, number, password, image, file, checkbox, page link, color picker, etc. It provides enough flexibility for you to add custom meta boxes in WordPress.

In addition, this plugin is really easy to use. With it, you can create the boxes in a visual manner. And also, you can assign the custom boxes to different editing pages as you prefer.

Add the New Meta Box and Multiple Fields

This plugin does not require you to finish some complicated settings. You can start using it by creating the new meta box. For this, you simply need to click the Custom Fields button in your WordPress admin panel. And then, click the Add New button.

Here, you firstly should give it a name, which will appear above your custom meta box. And then, you can add the custom fields based on your needs by clicking the Adding Field button.

Add Field

The adding of your custom fields really depends on what you want to present to your readers. In our example, we are looking to showcase the daily workout of a sportsman. In this case, we add the fields including the working types, the duration, the calories consumption and the running distance. Note that the order of each field can be changed by dragging and dropping them.

Customize Each Custom Field

When adding a custom field, you have to set up some important values for it. We have listed them in the following.
  • Field label and name - The label will appear on the editing screen. And the name would be better the same as the field label, which is a single word with no spaces.
  • Field type - There are 6 main field types this plugin allows, each of which has multiple options for you to choose, such as the checkbox, radio button, text area and many more.
  • Required - You can set this field as the must-choose option or not.
  • Field instruction - If your website has multiple authors, you can enter the extra instructions to help your authors submit data easily.
You may find that there are some other settings you should finish for your field. Note that these settings can be different if you choose different field types.

Set Up Custom Fields

Display the Custom Meta Box

Now, you can move down to the Location section to decide which editing screens can use these custom meta boxes to showcase the additional web content. For instance, you can show the custom meta box when the post type is Post, Page or any of your custom post types.

In addition, if you have created multiple meta boxes to showcase in the same editing screen, you can also enter the order number of them so that the boxes can appear from the lowest to the highest number.

As for the meta data showcase in the front-end of your site, you can show the information before the content, after the content or in the sidebar. Also, you can hide some default options from the editing screen if they are not necessary. As for the meta box style, we personally recommend you to choose the standard option.

Custom Fields Location

Now, you can publish the custom meta box. After that, you can enter and showcase the valuable data easily.