Meta boxes are used to add metadata to your WordPress posts and page. When you create a WordPress post or page, metadata is automatically created and added to you content, such as the date and time, author, title and so on. You can also add your own metadata using custom meta data boxes.
Create a custom meta data box in the post or page editor
To add a custom meta data box, you must first ensure they are visible on the WordPress post and page editor. Create a new post/page or edit an existing entry, then click the Screen Options button at the top of the page.
In the Boxes panel, ensure Custom Fields is checked.
Scroll down the page and you’ll see a new Custom Fields panel available.
Click the Name dropdown menu to edit an existing metadata field used in your theme.
Alternatively, click the Enter New button to create a new metadata entry.
Enter a metadata field name and a value in the text boxes, then click Add Custom Field to save.
Create custom fields using a plugin
For extended custom metadata creation and editing features, you may wish to try a plugin called Advanced Custom Fields. Used in many premium WordPress themes, the plugin allows you to create custom metadata fields with ease and display them in a wide variety of locations on your WordPress site.
To get started, in the WordPress admin dashboard, select Plugins > Add New. Search for Advanced Custom Fields, then install and activate the plugin.
Once activated, you’ll find a new Custom Fields item has been added to the sidebar. Click it to proceed.
Click the Add New button to begin creating your custom fields. In the Add New Field Group page that opens, first enter a title, then click + Add Field.
Complete the form, entering a Field Label, Field Name and Field Type (choosing from text, text area, number, email, password and more). 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 govern when the metadata field is displayed.
Once you’ve completed that section of the form, continue to the Location panel to define when a where your custom metadata box will be displayed. Use the dropdown menus to review available settings.
Lower down the page, the Options panel can be used to configure the field order (if you have multiple fields groups defined), the meta box position and styling preferences. You can also choose to hide default items from the WordPress post/page editor screen (which is similar to the Screen Options panel we used earlier).
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.
Displaying metadata created with Advanced Custom Fields
If you wish to display captured metadata in your posts, pages or elsewhere in your theme, you’ll find a number of ways available to do so. The simplest method is to embed a shortcode into your content, referencing the Field Name of the metadata box you created. You can view your Field Names by selecting Custom Fields in the sidebar, then editing the Field Group.
Use the following shortcode, replacing Field_Name with the actual field name.
Now click the Preview button, to see how your custom metadata will be displayed to your users.
Should you wish to embed custom fields in your theme files, you can do so using small snippets of PHP code. Edit the theme file in which you wish to display the metadata (good examples are content.php, page.php and single.php) using cPanel File Manager.
Log into the HostPapa dashboard and visit My cPanel. Head to Files > File Manager to view the files and folders stored on your server.
Navigate to your WordPress folder then enter the wp-content > themes folder. Open the folder for your current theme, then select the file in which you wish to embed the metadata.
Ensure you paste the code in an appropriate position in the file, ensuring it’s pasted after this line:
<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; // end of the loop. ?
Use the following snipped to embed the metadata, changing the class name, field name and HTML formatting as required.
<p class="myfieldname"><?php the_field('Field_Name'); ?></p>
Save the file, and head to your site’s front-end to review.
If you notice any problems or if you need any help, please open a new support ticket from your HostPapa Dashboard. More details on how to open a support ticket can be found here.