How to add custom meta boxes in WordPress posts

Meta boxes add metadata to your WordPress posts and page. When you create a WordPress post or page, metadata is automatically created and added to your content, such as the date and time, the author, and the title. You can also add metadata using custom metadata boxes. 

In this article, we’ll show you how to add meta boxes to your WordPress posts using both of these methods, as well as how to display metadata you’ve created.

Create a custom metadata box in the post or page editor

To add a custom metadata box, you need to ensure they’re visible on the WordPress post and page editor. 

  1. Create a new post or page, or edit an existing entry.
  2. Click Screen Options at the top of the page.

Screen Options

3. In the Boxes panel, check Custom Fields.

Custom Fields

4. Scroll down, and you’ll see a new Custom Fields panel available.

Custom Fields panel

5. Click the Name dropdown menu to edit an existing metadata field in your theme.

Name dropdown

6. Alternatively, click the Enter New button to create a new metadata entry.

Enter New

7. Enter a metadata field name and a value, then click Add Custom Field to save.

Add custom field

Create custom fields using a plugin

You can use the Advanced Custom Fields plugin for extended custom metadata creation and editing features. This plugin also allows you to display metadata in a wide variety of locations on your WordPress site.

  1. In the WordPress admin dashboard, select Plugins > Add New.
  2. Search for Advanced Custom Fields, then install and activate the plugin.

Plugin installation

3. Once activated, you’ll find a new Custom Fields item added to the sidebar. Click it to proceed.

Custom Fields

4. Click Add New to begin creating your custom fields. 

5. In Add New Field Group, enter a title.

6. Click + Add Field.

Add field

7. Complete the form, entering a Field Label, Field Name and Field Type). You can make fields a mandatory requirement, enter a default value, placeholder text, set a character limit, change formatting options, and even create conditional logic rules that to set when the metadata field will be displayed.

Custom Field settings

8. Continue to the Location panel to define when and where your custom metadata box will be displayed. Use the dropdown menus to review available settings.

Location panel

9. Use the Options panel to configure the field order (if you have multiple fields defined), the meta box position, and styling preferences. You can also choose to hide default items from the WordPress post/page editor screen, similar to the Screen Options panel we used earlier.

Options

10. When you’ve completed the New Field Group form, click Publish to save your settings. You can now head back to the post/page editor to view your new custom metadata box.

Custom Metadata box

Displaying metadata created with Advanced Custom Fields

If you want to display captured metadata in your posts, pages, or elsewhere in your theme, there are several available ways to do so. The simplest method is to embed a shortcode into your content, referencing the Field Name of the metadata box you created. 

  1. You can view your Field Names by selecting Custom Fields in the sidebar, then editing the Field Group.

Field name

2. Use the following shortcode, replacing Field_Name with the actual field name.

acf field="Field_Name"

3. Click Preview to see how your custom metadata will be displayed to your users.

4. To embed custom fields in your theme files, you can use small PHP code snippets. Edit the theme file where you want to display the metadata (such as content.php, page.php, and single.php) using cPanel File Manager.

5. Log in to the HostPapa dashboard and visit My cPanel

6. Head to Files > File Manager to view the files and folders stored on your server.

cPanel

7. Navigate to your WordPress folder, then enter the wp-content > themes folder. 

8. Open the folder for your current theme, then select the file in which you wish to embed the metadata.

cPanel File Manager

9. Make sure you paste the code after this line:

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

And before this line:

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

10. Use the following snippet to embed the metadata, changing the class name, field name and HTML formatting as required.

<p class="myfieldname"><?php the_field('Field_Name'); ?></p>

11. Save the file, and head to your site’s front-end to review.

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Related Articles