This solution creates a front page widget area and enables you to add a background image via the WordPress customizer.
Here’s the image added via the customizer and displayed as the background to the call to action bar after the header in the Beautiful Pro child theme by StudioPress.
This enables the theme user to easily change the widgets background image without touching code.
You can also set a default background image added to your child themes images folder named front-page-1.jpg.
In this example, the widget is hard coded into a front-page.php file and uses the genesis_after_header hook. You can also use the code in your functions file with any Genesis hook and conditional tag.
The code has been written to create a call to action bar below the header on the front page which can be populated with 1 or more widgets which you can display inline using CSS code or for the use of column classes HTML in 1 text widget.
This solution uses jQuery which ensures the image always covers the widget background when the screen changes to any size.
Once you install the code, you can then add multiple widgets to the new widget area or use columns HTML in a text widget as used in the above screenshot.
Code Installation
The folder members can download below, contains 3 files and 3 folders:
# Step 1 : Upload the front-page.php file to your child themes root directory.
# Step 2 : Add the files in the js folder to your child themes js folder or upload the entire js folder to your child themes root directory if your child theme does not contain a js folder.
# Step 3 : Add a front-page-1.jpg image to your child themes images folder.
# Step 4 : Add the customize.php file from the lib folder to your child themes lib folder or upload the entire lib folder to your child themes root directory if your child theme does not contain a lib folder.
# Step 5 : Add the CSS from the style.css file to the end of your child themes style.css file.
# Step 6 : Add the PHP code to the end of your child themes functions.php file using a code editor. Do not copy and paste the opening php tag.
Download files & folders
Members can login and download all the files and folders below:
Leave a Reply
You must be logged in to post a comment.