1

So I am working on a website. I'd like it so that on the interior pages of the site, there is a different title and subtitle representing that page. Unfortunately, the theme I am working with doesn't originally have the heading in the header but in the content area.

The solution I want: I want to create a global title and subtitle within the header that changes with each page. Blog, Contact, etc.

Things I have tried:

  1. Looked to see if there were any plugins. Tried GP Hooks, only seemed to work for the theme generatePress. Others didn't work the way I'd hoped.

  2. I tried to edit the header.php file by adding this div:

    <div class="row"><div class="heading col-md-12 col-sm-12 col-xs-12"><h1><?php echo $pageTitle ?></h1></div></div>

then I went in the child theme and added this code to the functions.php file:

if (body_class === page-id-2){ $pageTitle = 'THE CROSS LIFE'; }

I know this is probably the wrong way to do this but I was trying to see if this would work for a particular page. I'm still studying coding and javascript so some much-needed help would be appreciated. Am I doing the if statement wrong? Or is there a way to do this that I'm completely ignorant about?

website: http://yourcrosslife.com/test/sample-page/

2 Answers 2

0

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.

1
  • 1
    oh, my God! I was stumped for hours over this. This is exactly what I was looking for! YOU ARE A LIFE SAVER! And I just learned something new. Thank you so much! Sep 11, 2017 at 17:56
0

If your theme is properly built, you could use a plugin such as Yoast SEO to manage your titles.

If not, you could add the title tags in your child theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.