How to change the Background Image using Featured Image in WordPress with the Genesis Framework

Overview

In this article I’ll explain how you can set the background image for any page or post using its own Featured Image in WordPress. This will allow you to have different background images for different pages or for posts using a custom post type. The default background image set using Customizer or CSS will load when there’s no Featured Image set. This basically gives control to your users to set unique backgrounds from within the Post/Page editor.

While there are plugins to do this from the Dashboard, I prefer adding simple code to achieve this. We’ll also conditionally only allow this behaviour for pages and individual posts of a particular custom post type. So archive pages, blog page, normal posts will use the default background image. You can obviously choose to make it available site-wide.

Note: I build all my websites using child themes on the amazing Genesis Framework for WordPress. This article uses some functions specific to the Genesis framework. I’ll provide indicators where you will need to replace the logic in case you’re not on Genesis.

What do we need?

1. A JavaScript library called Backstrech available here
2. An editor like Brackets, Sublime, NotePad++ or an IDE like NetBeans. You should basically be able to make changes to your theme files.

Step 1: Setting up Backstretch

1. Create a js folder in your child theme folder (in case you don’t already have a folder for holding JavaScript files)
2. Download and save the min (minify) version of Backstretch js in the js folder
3. Create another JavaScript file in the same js folder called backstretch-set.js
   
   
4. Add the following code to the newly created backstretch-set.js file

jQuery(document).ready(function($) {
        $("body").backstretch([BackStretchImg.src],{duration:3000});
});

 

Step 2: Tell WordPress to load Backstretch

1. To load custom JavaScript in WordPress we need to use the wp_enqueue_scripts action_hook in our functions.php
2. I also want to limit the behaviour to specific areas of the website. To do this we will make use of the  is_singular conditional tag
3. Add the following code snippet in your child theme’s functions.php file
   

   Load Backstretch only on Pages

   //* Enqueue scripts and styles
   add_action( 'wp_enqueue_scripts', 'custom_enqueue_backstretch_scripts' );
   function custom_enqueue_backstretch_scripts() {    
       if ( is_singular( array( 'page' ) ) && has_post_thumbnail() ) {
           wp_enqueue_script( 'custom-backstretch', get_stylesheet_directory_uri() . '/js/backstretch.js', array( 'jquery' ), '1.0.0', true );
           wp_enqueue_script( 'custom-backstretch-set', get_stylesheet_directory_uri(). '/js/backstretch-set.js' , array( 'jquery' ), '1.0.0', true );
       
       }
   }

   Or
   Load Backstretch only on Pages and for Posts belonging to a Custom Post Type such as Events

   //* Enqueue scripts and styles
   add_action( 'wp_enqueue_scripts', 'custom_enqueue_backstretch_scripts' );
   function custom_enqueue_backstretch_scripts() {    
       if ( is_singular( array( 'page', 'events' ) ) && has_post_thumbnail() ) {
           wp_enqueue_script( 'custom-backstretch', get_stylesheet_directory_uri() . '/js/backstretch.js', array( 'jquery' ), '1.0.0', true );
           wp_enqueue_script( 'custom-backstretch-set', get_stylesheet_directory_uri(). '/js/backstretch-set.js' , array( 'jquery' ), '1.0.0', true );
       
       }
   }

    

Step 3: Add the logic to use Featured Image as Background Image

1. We still have to tell WordPress to use the Featured Image (if it has been set) as the Background Image. Based on our code above this will be limited to only Pages or Pages and a Custom Post Type depending upon your is_singular conditional tag.
2. This part is a bit specific to the Genesis Framework. You’ll need to find an alternative in case you’re not on Genesis.

   //* Localize backstretch script
   add_action( 'genesis_after_entry', 'custom_set_background_image' );
   
   function custom_set_background_image() {
       $image = array( 'src' => has_post_thumbnail() ? genesis_get_image( array( 'format' => 'url' ) ) : '' );
       wp_localize_script( 'custom-backstretch-set', 'BackStretchImg', $image );
   }

That’s It

Using the WordPress Customizer or even a simple CSS one can easily set the default background image site wide. And now, using the logic above we can also conditionally set a different background image for each page or a post or post type by using the featured image.