I’ve created a single file plugin that combines all the below code for easy use and partly out of boredom.
Displaying the current title is simply echo get_the_title(); and it really just comes down to where you want to display it along with how you want to wrap it via HTML.
WordPress doesn’t have subtitles though so you’ll going to have to create custom post meta to both save and display this data. If you’re unfamiliar with post meta, it’s just additional data attached to a post that we can submit on publish and access at a later date. There generally 3 hooks which allows you to create you post-meta fields:
All of which are valid options but so it’s obvious to the user when managing the screen, it’s easiest to put a subtitle input box underneath the main title box. We can do so simple by adding the following code to our functions file:
/**
* Edit the post-edit form after title input
*
* @param WP_Post $post - Current post object
*
* @return void
*/
function wpse_subtitle_metadisplay( $post ) {
// Post types to display the subtitle field
$acceptable_types = array( 'page' );
// Ensure this post type meets our criteria
if( empty( $acceptable_types ) || ! in_array( $post->post_type, $acceptable_types ) ) {
return;
}
// Get our field value, if it exists
$subtitle = get_post_meta( $post->ID, 'wpse_subtitle', true );
// Set a security nonce
wp_nonce_field( 'wpse279493_subtitle_metadisplay', 'wpse279493_subtitle_metadisplay_field' );
// Display the input in a similar fashion to the post title input box
printf( '<input type="text" name="wpse_subtitle" id="wpse_subtitle" class="widefat" value="%1$s" placeholder="%2$s" style="margin:8px 0 0 0;padding:3px 8px;font-size:1.7em;" />',
esc_attr( $subtitle ),
__( 'Enter subtitle here' )
);
}
add_action( 'edit_form_after_title', 'wpse_subtitle_metadisplay' );
Now that we are displaying our input field, we need to save whatever the user adds to it by using the save_post hook.
/**
* Save the subtitle metadata
*
* @param Integer $post_id - Current Post ID
* @param WP_Post Object $post - Current Post Object
*
* @return void
*/
function wpse_save_subtitle_metadata( $post_id, $post ) {
// If we're not in the right place, bailout!
if( ! isset( $post ) || wp_is_post_autosave( $post ) || wp_is_post_revision( $post ) ) {
return false;
}
// Ensure our nonce is intact
if( isset( $_POST, $_POST['wpse279493_subtitle_metadisplay_field'] ) && wp_verify_nonce( $_POST['wpse279493_subtitle_metadisplay_field'], 'wpse279493_subtitle_metadisplay' ) ) {
// Save our subtitle metadata OR delete postmeta if left empty
if( isset( $_POST['wpse_subtitle'] ) && ! empty( $_POST['wpse_subtitle'] ) ) {
// Save out data to our post
update_post_meta( $post_id, 'wpse_subtitle', sanitize_text_field( $_POST['wpse_subtitle'] ) );
} else {
// If input is empty, delete the value from the database to keep clutter free!
delete_post_meta( $post_id, 'wpse_subtitle' );
}
}
}
add_action( 'save_post', 'wpse_save_subtitle_metadata', 10, 2 );
Finally, now that we are both showing the subtitle field and saving the given input, all we need to do is display this information. We can do so just as we did with the metafield by using get_post_meta().
Navigate where ever you would like your titles to show up and input the following:
<?php
global $post;
$subtitle = get_post_meta( $post->ID, 'wpse_subtitle', true );
?>
<h1><?php echo get_the_title(); ?></h1> <!-- display main title -->
<?php if( ! empty( $subtitle ) ) : ?>
<h2><?php echo $subtitle; ?></h2> <!-- display sub title -->
<?php endif; ?>
Once they’re displayed on the front-end you can style them however you see fit.