Many of the Pro WordPress designers are using jQuery script named Backstretch.
The code will automatically re-size your background images to fit the size of the window.
Once you add the code to your js folder, all you need to do is paste the PHP functions code into you child themes functions.php file.
Let’s take a look at how best to install the jQuery and PHP code.
There’s 2 steps you need to follow:
- Create 2 new .js files placed inside a new folder named js in your child themes root directory
- Add PHP code to your child themes functions.php file.
BackStretch Scripts
You will need to create 2 new files using a code editor like Notepad++.
The names of the files as exactly the same as the names in this Gist:
backstretch.js and backstretch-set.js
Here’s what the folder looks like in your child themes root directory:
And here’s what the 2 .js files look like inside the js folder.
Here’s the code which goes in these 2 files:
PHP Functions
You’ll also need to take the PHP code from the above Gist and paste it into your child themes functions.php file.
That’s it.
You can now go to Appearance > Background and upload your background image.
Only Display Background Image On Specific Pages
You can also add a conditional tag to the PHP code of you only want the background image to display on specific pages.
This code is a visual guide on where to add the conditional tag.
//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {
<pre><code>//* Load scripts only if custom background is being used
if ( ! get_background_image() )
return;
if ( is_home() )
wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );
wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
</code></pre>
}You can see the conditional tag: is_home() has been added immediately before the wp_enqueue_script. Change the conditional tag to suit your own preferences.
Theme Background Support
Once you’ve added the .js script, go to Appearance -> Background and upload a large background image.
If your theme already includes support for a custom background, open up your child themes functions.php file and remove the line of code that looks like this:
add_theme_support( 'custom-background' );The code for supporting custom background images is already included in the Github Gist above so no need to include it twice.
You can also use this script to resize images for your header, footer and different block level elements.
Other Ways To Use Backstretch
You can also paste this code directly into your template files to display the background image
[/code]
Leave a Reply
You must be logged in to post a comment.