Introduction to Post Meta

Extending WordPress Posts

By default, WordPress posts include a Title and the Content. If we want to store additional information with a post, we need to store it somewhere. In this example, I want to look at adding a Subtitle to a post.

I’ve presented this topic at conferences and the slides for my Introduction to Post Meta are available online.

Custom Fields

To add a Subtitle we are going to leverage the Custom Fields functionality of WordPress. When editing a post, you can use the Custom Fields area by:

• Clicking the Screen Options dropdown in the top right corner of the page
• Checking the Custom Fields checkbox
• Scrolling down the page to the newly revealed Custom Fields Metabox

Adding a Value via the Custom Fields

Name and Value

When adding custom field information, we need to provide two things:

• Name this is the key we will use to retrieve the information we store
• Value this is the value we will retrieve in our code

In this example, we’ll use: fe_subtitle for our Name and “Seize the day” for our Value.

Once these values are in place, we save the post to make sure the value we entered gets stored. We do this by clicking Update (or Save Draft) in the Publish box.

Our Goal

Once we’ve successfully stored the “Seize the day” value in WordPress, our goal is to display these words when we display the page. We will display this information by using PHP code. The PHP code is part of our theme. I’ve created a demo child theme based on the free Twentysixteen WordPress theme. This demo child theme includes all the code examples in this post and in my talk Introduction to Post Meta.

How to Display the Post Meta Subtitle

Here is the code, I’ve added to my PHP template to display the value stored under the key fe_subtitle.

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id, 'fe_subtitle', true );

if ( $subtitle ) {
    echo '<h2>' . esc_html( $subtitle ) . '</h2>';
}

How the Information Is Stored

When we add values via the Custom Fields, they are stored in a database table called wp_postmeta. The table looks something like this:

There are four columns:

• meta_id an auto-incrementing number to uniquely identify each row in the table
• post_id the ID of the post this information is associated with
• meta_key the key (or name) our value is stored under (in our example we’ve used fe_subtitle)
• meta_value the value stored (in our example, the subtitle is “Seize the day”)

How we Retrieve the Information

We retrieve this information with the get_post_meta() function. This function takes three parameters:

• $post_id the ID of the post the information is associated with
• $meta_key the key (or name) our value is stored under
• true this last value can be true or false but in my work, I find I never use the value false. For a great discussion of when a value of false would make sense, see this article on Why do we use true for the third parameter of get_post_meta()?

Referring to the wp_postmeta table above, the following line

echo get_post_meta( 4, 'fe_subtitle', true );

would display “Extend WordPress Posts”.

Improve Your Custom Field Metaboxes

While the default WordPress Custom Field functionality is often sufficient, I prefer to use CMB2 when modifying post meta values. By itself the CMB2 plugin does not do anything. However, it does allow you to add impressive fields for modifying post meta values with a minimum of code.

For example, the following code adds a color picker and stores the result in post meta under the key fe_color

add_action( 'cmb2_admin_init', 'fe_color_metabox' );
/**
 * Use CMB2 to create a color picker metabox for `fe_color`.
 *
 * Requires: [CMB2 plugin](https://wordpress.org/plugins/cmb2/).
 */
function fe_color_metabox() {
    $cmb = new_cmb2_box( array(
        'id'            => 'fe_color_metabox',
        'title'         => esc_html__( 'Color Metabox', 'fe_talk' ),
        'object_types'  => array( 'post' ), // Post type.
    ) );
    $cmb->add_field( array(
        'name'       => esc_html__( 'Title Color', 'fe_talk' ),
        'id'         => 'fe_color',
        'type'       => 'colorpicker',
    ) );
}

Resulting Color Picker Field

Post Meta Resources and Related Reading

• Introduction to Post Meta Slides
• WordPress Database as a Spreadsheet
• Link to child theme with code examples
• Why do we use true for the third parameter of get_post_meta()
• Meta Keys that Start with an Underscore
• What is Post Meta? An intro to WordPress Custom Fields by Justin Sternberg
• CMB2 Plugin
• CMB2 Documentation

Image Credit

Pexels

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.