Uncategorized

Use a Featured Image in the Title Bar in Kadence Theme

  1. Install a Code Snippets.
  2. Create a new snippet called “Add custom image sizes” (the name is important) with the following code:
add_image_size( 'page-title-image', 2000, 420, true );
  1. Add a helpful description so you know what the tag is used for.
  2. Add appropriate tags so you can easily find related code snippets. I use the tag “kadence title” for mine.
  3. Install the Regenerate Thumbnails plugin (you can delete it afterwards) and use it to regenerate your thumbnails. (You can miss the step if you do not already have featured images attached to your pages and/or posts) then run it from Tools > Regenerate plugins. Click the Regenerate Thumbnails for the x Featured Images Only button.
  1. Create a second snipped called “Page Title Settings” with the following code:
add_action( 'wp_head', 'wn_page_title_featured_image' );
/**
 * Set Page Title background image URL to that of featured image for Pages
 * @link https://webnolo.com/featured-image-as-page-title-background-in-kadence/
 */
function wn_page_title_featured_image() {
	// if we are not on a static Page, abort.
	if ( ! is_page() ) {
		return;
	}
	
	// if there is no featured image, abort.
	if ( ! has_post_thumbnail() ) {
		return;
	}
	
	// grab the url for the featured image in the specified size.
	$featured_img_url = get_the_post_thumbnail_url( get_the_ID(), 'page-title-image' ); ?>

	<style>
	.site .entry-hero-container-inner {
		background-image: url(<?php echo $featured_img_url; ?>);
	}
	</style>
<?php }
  1. Set the tags, settings and display options.

That’s it. Now, when you add a Featured Image to your posts, it will appear as the background in the Title bar.

Thanks to WebNolo for sharing this info!