This is Part 4 of a five-part series on working with WordPress post-meta. If you haven’t, you’ll probably want to start with Part 1.
So let’s break it down. First we’ll hook into the add_meta_boxes hook, and register our metabox for the post editor screen:
function wpsnipp_add_subtitle_metabox() {
add_meta_box(
'wpsnipp-subtitle', // Box ID
__( 'Post Subtitle' ), // Box Title
'wpsnipp_render_subtitle_metabox', // Callback function
'post', // Post-type
'normal', // Context
'high' // Priority
);
}
add_action( 'add_meta_boxes', 'wpsnipp_add_subtitle_metabox' );
Inside the hooked function, we’ll call add_meta_box,
which will register our metabox for us. The third parameter is the
callback function that will render the metabox, so let’s add that next:
function wpsnipp_render_subtitle_metabox() {
// Add an nonce field for security.. we'll verify it later when saving the data
wp_nonce_field( 'wpsnipp_subtitle_metabox', 'wpsnipp_subtitle_metabox_nonce' );
// Retrieve the existing value (if any) to display in the field.
$subtitle = get_post_meta( get_the_ID(), 'wpsnipp_post_subtitle', true );
// Add our input field
?>
<p><input type="text" class="widefat" id="wpsnipp-subtitle" name="wpsnipp-subtitle" value="<?php echo esc_attr( $subtitle ); ?>" /></p>
<?php
}
As you can see, we used wp_nonce_field to add a hidden input field for security. We’ll use another WordPress
function to verify the nonce, once we’re trying to save our data.
You can also see our first post meta function use! We’re using get_post_meta to grab the existing value from the database if it exists to display in the metabox.
Here’s our fancy new metabox below the post editor:
We’re not done yet. If we were to try to publish or save the post, the subtitle field would not save. We’ll set that up next.
// $post_id is passed into the function for us
function wpsnipp_save_subtitle( $post_id ) {
// We need to verify this is the 'save_post' we're looking for
// If our nonce is not found, we'll bail.
if ( ! isset( $_POST['wpsnipp_subtitle_metabox_nonce'] ) ) {
return;
}
$nonce = $_POST['wpsnipp_subtitle_metabox_nonce'];
// If the nonce is not valid, we'll bail
if ( ! wp_verify_nonce( $nonce, 'wpsnipp_subtitle_metabox' ) ) {
return;
}
// If this is an autosave, our form has not been submitted, so we'll bail
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
// If the current user doesn't have permission, we'll bail.
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return;
}
// OK, its safe for us to save the data now.
// Sanitize user input.
$subtitle = sanitize_text_field( $_POST['wpsnipp-subtitle'] );
// Update the meta field in the database.
update_post_meta( $post_id, 'wpsnipp_post_subtitle', $subtitle );
}
add_action( 'save_post', 'wpsnipp_save_subtitle' );
Phew! That looks like a lot of code just to save our subtitle, but
let’s review. The first several lines are performing checks for us to
determine if we’re looking at the right hook. The save_post is fired under several different set of circumstances, so we want to be
sure we have our data, that the data definitely came from our metabox
(checking the nonce), that the user intended to save the data, and
finally that the user is even allowed to save the data.
When we get through all of our checks, We’ll grab the subtitle from the submitted form data (that’s what $_POST is) and sanitize it via sanitize_text_field. Once we’ve done all that, we call our update_post_meta function to save our data. And we’re done!
Now when a user clicks ‘save’ or ‘publish’, when the page is finished reloading, the Subtitle they entered will be populated in the Subtitle metabox.
To wrap this up, let’s review how we would use this in our template. We would likely use this in our template directly below the template tag, the_title().
<?php the_title( '<h2>', '</h2>' ); ?> <?php // Retrieve the existing value (if any) to display in the field. $subtitle = get_post_meta( get_the_ID(), 'wpsnipp_post_subtitle', true ); // If we have a subtitle, let's show it. if ( $subtitle ) : ?> <h3><?php echo sanitize_text_field( $subtitle ); ?></h3> <?php endif; ?>
Here is all of the metabox display/saving code together:
function wpsnipp_add_subtitle_metabox() {
add_meta_box(
'wpsnipp-subtitle', // Box ID
__( 'Post Subtitle' ), // Box Title
'wpsnipp_render_subtitle_metabox', // Callback function
'post', // Post-type
'normal', // Context
'high' // Priority
);
}
add_action( 'add_meta_boxes', 'wpsnipp_add_subtitle_metabox' );
function wpsnipp_render_subtitle_metabox() {
// Add an nonce field for security.. we'll verify it later when saving the data
wp_nonce_field( 'wpsnipp_subtitle_metabox', 'wpsnipp_subtitle_metabox_nonce' );
// Retrieve the existing value (if any) to display in the field.
$subtitle = get_post_meta( get_the_ID(), 'wpsnipp_post_subtitle', true );
// Add our input field
?>
<p><input type="text" class="widefat" id="wpsnipp-subtitle" name="wpsnipp-subtitle" value="<?php echo esc_attr( $subtitle ); ?>" /></p>
<?php
}
// $post_id is passed into the function for us
function wpsnipp_save_subtitle( $post_id ) {
// We need to verify this is the 'save_post' we're looking for
// If our nonce is not found, we'll bail.
if ( ! isset( $_POST['wpsnipp_subtitle_metabox_nonce'] ) ) {
return;
}
$nonce = $_POST['wpsnipp_subtitle_metabox_nonce'];
// If the nonce is not valid, we'll bail
if ( ! wp_verify_nonce( $nonce, 'wpsnipp_subtitle_metabox' ) ) {
return;
}
// If this is an autosave, our form has not been submitted, so we'll bail
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
// If the current user doesn't have permission, we'll bail.
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return;
}
// OK, its safe for us to save the data now.
// Sanitize user input.
$subtitle = sanitize_text_field( $_POST['wpsnipp-subtitle'] );
// Update the meta field in the database.
update_post_meta( $post_id, 'wpsnipp_post_subtitle', $subtitle );
}
add_action( 'save_post', 'wpsnipp_save_subtitle' );
With this tutorial, we’ve only saved our Subtitle field, but hopefully it will get you on the right track and you’ll be able to add your other meta data fields confidently. In the next post, we’ll discuss some useful tools to help you add, save, and manage meta data more easily.
Part 4 of a 5 part series originally written for wpsnipp.com (1, 2, 3, 4, 5)