Featured Image as Page Title Background in Kadence

Disclosure: This post may contain affiliate links – meaning I get a commission if you decide to make a purchase through my links, at no cost to you.

Looking to set the URL of featured image as the background image URL for Page Titles in Kadence?

A static Page with a featured image
A static Page with a featured image set
Featured image as background for Page Title
Featured image as background for Page Title on the front end

Pages that do not have a featured image continue to use/show the image set in the Customizer.

Follow these steps:

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add custom image sizes


add_image_size( 'page-title-image', 2000, 300, true );

Set the snippet to run everywhere. Save changes and activate.

If your Pages already have featured images set, regenerate thumbnails.

Step 2

Add another snippet.

Title: Set Page Title background image URL to that of featured image for Pages

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() ) {
	// if there is no featured image, abort.
	if ( ! has_post_thumbnail() ) {
	// 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' ); ?>

	.site .entry-hero-container-inner {
		background-image: url(<?php echo $featured_img_url; ?>);
<?php }

This way it is possible to set different background images for different Pages.


Similar Posts


  1. That’s really helpful! How do I customise this to get the same to happen for Posts? I tried changing is_page to is_post and it threw an error.

  2. I’m pretty sure this is just an option now you can click on within the customizer:
    Customizer > General > Page Layout > Design then scroll down to a checkbox for “use featured image for background”.

  3. This is possible via Kadence’s customizer as well. I’m not sure if this feature was available at the time of writing this article.
    But, you need to uncheck the Featured Image under General Settings and check mark it under Design Settings of Single Post settings.

  4. I am trying to figure out a way to add a featured image behind the title on custom post type (and blog post) archives. Any advice?

Leave a Reply

Your email address will not be published. Required fields are marked *