How to Add Custom Meta Boxes in WordPress

Using custom meta boxes a great way to add some additional metadata to your content. That is, by adding different custom meta boxes to your WordPress pages, posts, and/or custom post types, you can make your editing interface as a whole look more organized and user-friendly. In fact, many plugin developers use them to create and add custom plugin meta boxes.

Also, we should quickly point out that each content type in WordPress has its own set of metadata that is used to provide more information (date, title, etc.) about the content in question. While WordPress comes with a default custom field box that you can use to add your own custom meta boxes and metadata, this meta box doesn’t offer many options overall.

That’s why we decided to show you how to add custom meta boxes to WordPress posts and post types with the help of Advanced Custom Fields plugin, which is one of the most popular plugins in this category. Stay with us as we explain How to create and add custom meta boxes to your WordPress contenttogether how to display your custom field metadata on your site.

Creating Custom Meta Boxes in WordPress with a Plugin

The name of the plugin we recommend for this task Advanced Custom Fields. This is a very popular and comprehensive plugin option for creating custom fields on your site, and for good reason. If you use this plugin, you’ll be able to add your custom fields almost anywhere on your site (including pages, posts, taxonomies, users, etc.) and you’ll do it quickly and easily.

After installing and activating the plugin, you will be able to see a new menu item named. Custom Fields in your admin bar. go Custom Fields >> Add New To create your custom space. When you do this, you will be redirected to the page named Add New Field Group.

Add a title to your field group (this will be your meta box title). At that time, Press the “+Add Field” button To create a new field. This will open a whole new line of settings.

this Field Label option lets you specify a name for your meta box. This will be the name of the entire section that will appear in the page backend.

this domain name option lets you enter an additional name for your domain. It should be a single word without spaces (but you can use underscores and hyphens). You will copy this name to display your custom field metadata on your site, but you will dwell on it later.

Then you will be able to choose Field type. From text, radio buttons, checkboxes and numbers to images, files, users, classifications and much more.

You will also get to add fields Instructions this can be particularly useful as it tells the user what to add to the given field.

You will then be able to set a number of other options such as Default Value, Placeholder Text, Character Limit and so on.

shoot me Close Space When you’re done setting your options, press to hide them.

If you need more fields in your meta box, hit the “+ Add Field” button again and adjust its options according to your preferences.

Later, Location field allows you to specify the rules that will determine the types of edit screens in which your custom meta box will be displayed. Different post types, post categories, taxonomies etc. you will be able to choose.

Now, in Settings in the field you will be able to select the meta box style (standard or seamless). We recommend setting it as standard.

You will also be able to select the meta box in the page backend (after the content, before or in the right column).

You will also be able to set the location of your Label and Instruction layout and select the Order number (the number that will define the order of your field). The latter is useful if you have multiple field groups set in one location (otherwise you can set this option to 0).

Finally, Hide on screen option allows you to check or uncheck certain meta box fields to show or hide them on your post or page edit screen.

shoot me Publish button (located in the upper right corner of your screen) when you’re done.

Feel free to visit the backend of one of your pages/posts to see what your custom meta box looks like live. Once there, you’ll also be able to use your new meta boxes to add your custom meta data.

Viewing Your Custom Meta Box Data on Your Site

Now that you’ve managed to create your custom meta box, it’s time to display the data you’ve entered in your fields on your site itself (i.e. your page, post, etc.).

go to Field Groups page. Once there, you will have access to your private fields. What you need to do is copy the text displayed in the “Name” field:

You can now use two different options to display the data entered in your custom fields on your site. You can do it too add them with a shortcode or using a PHP code.

To display your custom field data on a single page or post, simply add this shortcode to your content:

[acf field="weather"]

Of course, you should also include the name of your field in quotes.

Another way to do this is to add a line of code to one of your theme files. This method is great if you want metadata to appear automatically on all pages of a certain type.

Access the theme file you want to edit by going to: Appearance >> Theme Editor. Which file you edit depends on where you want your data displayed. These are single.php, blog.php, page.php etc. There may be files.

We used our own free Qi Theme for our example, so we added our code to the blog.php template file. Of course, you are free to add your own code wherever you want.

Enter the code below:

<h2 class="weather"><?php the_field('weather'); ?></h2>

This will display the metadata from our “weather” custom meta box as H2 header on our page. Of course, you should replace the name we put in quotes with your own custom domain name and adjust the HTML to suit your needs.

The code you add to your theme file will display the data you’ve added to your custom meta field on all pages that use the particular page template you decide to edit.

shoot me Update File button and continue to see how your metadata looks on your page/post.

Solution

Whether you need to add a simple line of text or add more advanced metadata, custom meta boxes are a great way to get the most out of your editing screen and make it as intuitive and user-friendly as possible. We recommend using the Advanced Custom Fields plugin to create and add custom meta fields to any of your edit screens. This plugin comes with extensive options that allow you to customize the look of your custom meta boxes in all sorts of ways. Make sure you follow our instructions carefully to learn how to thoroughly customize your custom meta boxes and display your metadata on your WordPress site with ease.