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:
- Upload the page_blog.php file to your child themes root directory.
- Add the 2 .js files from the js folder to your child themes js folder.
- 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 ).
- 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:
Was This Tutorial Helpful?