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 tablepost_id
the ID of the post this information is associated withmeta_key
the key (or name) our value is stored under (in our example we’ve usedfe_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 undertrue
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
Leave a Reply