FrugalWebGuy is Merging with Michael Mann Web Design under the new Title of I Do Web Work

Child Theme Development – Custom Meta Box

Video Available (Signup to Access - Members Only)

In this training we will look at adding a custom meta box to our child theme to do something I see asked for quite often, a way to hide the page title per page. Some themes will come with an option to hide a page's title while others do not. Let us begin.

Note: This training is assuming you are doing this in a child theme. The reason for a child theme is to help prevent changes or additions to a parent theme from being overwritten what that parent theme is updated. In addition, this is only part 1 of a 2 part series.

If you are following along with our child theme series ( ) or have a child theme you are using, we will be working to add some code to the functions.php file. For our purposes, this will be fine as we will be looking to add one meta box with only one option. As your needs grow, you might be interested in pursuing the plugin option. This training is in the works and will be available shortly.

Adding a Meta Box

The first block of code we will want to add is the code for creating the meta box. A metabox is simply a container for the options we will be adding later. We will be using the built-in add_meta_box function to create the meta box.

/* Adds a meta box to the post editing screen */
function prfx_custom_meta() {

	add_meta_box( 'mysimple_meta', __( 'Hide Title', 'mysimple-textdomain'), 'mysimple_meta_callback', 'page');

}

add_action( 'add_meta_boxes', 'mysimple_custom_meta');

That will create a metabox which will show only on editing pages. If you want to hide the title on pages and posts, the following will do that for you. Just replace the code above with the code below.

/* Adds a meta box to the post editing screen */
function mysimple_custom_meta() {

	$screens = array( 'post', 'page' );

	foreach ( $screens as $screen ) {

		add_meta_box(
			'mysimple_meta',
			__( 'Hide Title', 'mysimple-textdomain' ),
			'mysimple_meta_callback',
			$screen,
            'side', //  The part of the page where the edit screen section should be shown. Can be 'normal', 'advanced', or 'side' default = advanced
            'high' // The priority within the context where the boxes should show. ('high', 'core', 'default' or 'low') default = default
		);
	}
}

Note: This will show a meta box but render an error because we have not yet created the content for the meta box. The 'side' and 'high' options deal with the placement of the meta box on the page. With these settings, it will place the meta box over to the side at the very top.

Other Possible Options

'side', // The part of the page where the edit screen section should be shown. Can be 'normal', 'advanced', or 'side' default = advanced
'high' // The priority within the context where the boxes should show. ('high', 'core', 'default' or 'low') default = default

Meta Box Content

Many tutorials on the web will show this part by adding a simple textbox. However, we want a checkbox, so we will add one now.

/* Outputs the content of the meta box */
 function mysimple_meta_callback( $post ) {
 wp_nonce_field( basename( __FILE__ ), 'mysimple_nonce' );
 $mysimple_stored_meta = get_post_meta( $post->ID );
 ?>
<p>
<input type="checkbox" name="hide-title" id="hide-title" <?php checked( $mysimple_stored_meta['hide-title'][0], 1 ); ?> value="1">
<label for="hide-title" class="mysimple-row-title"><?php _e( 'Hide Title', 'mysimple-textdomain' )?></label>
</p>
<?php
 }

Notice, we have placed the input box in front of the text. If you wish to reverse theses, just reverse the input and label like this:

<p>
<label for="hide-title" class="mysimple-row-title"><?php _e( 'Hide Title', 'mysimple-textdomain' )?></label>
<input type="checkbox" name="hide-title" id="hide-title" <?php checked( $mysimple_stored_meta['hide-title'][0], 1 ); ?> value="1">
</p>

Now you should see something like this:

 

Saving the Metabox Options

Right now if you selected to hide the title and updated the page, your choice would not be saved. So, let's add in a function to save our choice.

/* Saves the custom meta input */
function mysimple_meta_save( $post_id ) {
 
    // Checks save status
    $is_autosave = wp_is_post_autosave( $post_id );
    $is_revision = wp_is_post_revision( $post_id );
    $is_valid_nonce = ( isset( $_POST[ 'mysimple_nonce' ] ) && wp_verify_nonce( $_POST[ 'mysimple_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
 
    // Exits script depending on save status
    if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
        return;
    }

    // Checks for input and saves
    $hide_title = ( isset( $_POST['hide-title'] ) ) ? $_POST['hide-title'] : "";
    update_post_meta( $post_id, 'hide-title', $hide_title );
 
}

add_action( 'save_post', 'mysimple_meta_save' );

So, what this save code does is first check to see if it's an autosave, a revision or otherwise not having a valid nonce (which means we did not change the hide title checkbox) then it drops out and allows WordPress to save/update the page/post in the normal way. Otherwise, if we updated the checkbox and the nonce codes match, it updates the hide-title option in the database. Now the cleaverness happens in the "Check for input and saves" section, which will clear out the hide-title option if you uncheck the box and save, which allows the checkbox to return unchecked, and therefor display the title.

Conclusion

Now that we have a hide title option for pages and posts, we will see that the page title still shows, whether we tell it to hide it or not. The reason for this is that creating the option is only the first part of the solution. The second part is to tell the theme to hide the title if we tell it to hide it on an individual post/page option.

This Training Series

Part I: Child Theme Development - style.css
Part II: Child Theme Development - functions.php
Part III: Child Theme Development - Custom Meta Box