Add Background Image to Blog Page

This code adds a background image to your blog page only. Any page which uses the blog page template from the Page Attributes meta box on any Page Edit screen, will use this background image. The background image can be added via the WordPress customizer. If one is not added, a fallback image from your child themes images folder will be displayed.

This tutorial was written in response to a request from a member:

I’m trying to create a custom background for the blog page only. I have a graphic of a cup of coffee. I don’t want to use Custom Background Extended as it’s out of date so I added the graphic to the content folder under images and put code in to pull that for the background. Not successful. Any suggestions that are within my skill set?

Demo Video

Here’s the demo video

Also note, if you have also used the Custom Background function in the customizer, the image you added using that featured will be removed only from the blog page template.

Code Installation

After you download the files below, you’ll need to follow these simple instructions:

1. Upload the page_blog.php file to your child themes root directory.
2. Add the 2 .js files from the js folder to your child themes js folder.
3. Copy and paste the code from the customize.php file to your child themes customize.php file or paste it at the end of your child themes functions file, ( excluding the opening php tag ).
4. Add the image named blog.jpg from the images folder to your child themes images folder or replace it with your own image using the same file name and extension.

Here’s the files logged in members can download:

Related Tutorials

• Genesis Page Templates for Background Images
• How To Remove Custom Background Image On Any Page
• CSS To Add Different Background Image To Cover Full Body On Specific Page