Responsive Widget Background Image

This code adds a new widget area after the header on all pages excluding your front page. You can change the conditional tag so the widget displays anywhere you like.

The widget area includes a background image which is pulled from your child themes images folder by default. It also displays in the WordPress customizer which is where you can change the image or remove it completely.

Here’s the demo video:

The code is tested in the Genesis Sample child theme and should work in any Genesis child theme.

Here’s the code for logged in members:

Step 1 : Add the PHP code from the functions.php file to the end of your child themes functions file.

Step 2 : Add the background image named after-header.jpg to your child themes images folder.

Step 3 : Upload the 3 .js files from the js folder into your child themes js folder. Create a js folder if your child themes doesn’t already include one.

Step 4 : Copy the PHP code from the customize.php file in the lib folder and add it to your child themes customize.php file in your lib folder.

Step 5 : Copy the CSS from the style.css file and paste it before the start of the CSS for Media Queries in your child themes style.css file. You can also integrate the CSS for Media Queries into your existing themes CSS for Media Queries.

Download Files

Sample HTML

Add to a text widget.

Related Solutions

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.