Snippet: Add New Custom Page Header Title Style to Page Settings

  • Updated:

If you want a unique page header for a specific page(s) and you don't like any of the preset page header title styles you could easily add a new style via your child theme that you can select and control the exact output and styling.

The first function in this example add a new style named "My Custom Style" with the ID "my-custom-style-id" (you should change these to something that makes more sense for what you are doing)."

In the second function we are setting the default page header to "disabled" if the custom page header style is selected so we can control the output.

In the last function we are displaying the contents of the "my-custom-page-header-style-id.php" file when your custom page header style is selected. You can of course name the file anything you want or you could even just echo whatever content you want displayed immediately. If you are using WPBakery you could even display a template via the templatera shortcode if you'd like.

/**
 * Register new page header title style.
 *
 * @link https://totalwptheme.com/docs/snippets/add-new-custom-page-header-title-style-to-page-settings/
 */
add_filter( 'wpex_title_styles', function( $styles ) {
	$styles['my-custom-style-id'] = 'My Custom Style';
	return $styles;
} );

/**
 * Disable the page header when using our "my-custom-style-id" custom page header title style.
 *
 * @link https://totalwptheme.com/docs/snippets/add-new-custom-page-header-title-style-to-page-settings/
 */
add_filter( 'totaltheme/page/header/is_enabled', function( $check ) {
	if ( function_exists( 'wpex_page_header_style' ) && 'my-custom-style-id' == wpex_page_header_style() ) {
		$check = false;
	}
	return $check;
} );


/**
 * Insert custom template to replace the page header title when selecting our "my-custom-style-id" custom style.
 *
 * @link https://totalwptheme.com/docs/snippets/add-new-custom-page-header-title-style-to-page-settings/
 */
add_action( 'wpex_hook_main_top', function() {

	if ( function_exists( 'wpex_page_header_style' ) && 'my-custom-style-id' === wpex_page_header_style() ) {

		// Include our custom template file, we could instead echo content here if we prefer.
		get_template_part( 'my-custom-page-header-style-id' );
	}

}, 15 );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top