I created a custom page template because I wanted to do three things:
- Display an optional full width image just below the header (controlled by the featured image widget)
- Have the option to overlay the image with a call to action (text and button) controlled by a widget area
- Add other style elements, specific to the page, to reduce inline style and the use of <div></div> tags
I was able to hack together a pretty simple solution to accomplish all three functions. This is how it looks. Demo!
To apply this to your genesis child theme, (affilink) these are required:
- HTML5 Supported Theme
- The Jetpack Widget Visibility plugin (if you’re not already using Jetpack)
Let’s Get Started!
Step One
You’ll need to create a new file in your theme folder, name it page_sales.php.
Copy and past this code into that new file and save it.
https://gist.github.com/chrisegg/9848849.js
This code adds the full width image feature and a new widget area to any page using this template. It also strips the page of all layout and adds a new body_class so that we can restyle the page how we want it. Step Two Next we need to register the widget area that will display on top (overlaying) of the full width image. Copy and past this code into your functions.php file at the bottom.
https://gist.github.com/chrisegg/9849194.js
Step Three
You’ll need to add the files listed below to your child theme folder specifically in the js folder. If you do not already have a folder labeled js, you’ll need to create one.
Copy the code from each of these files into a new file with the same name (click the links to copy the code).
Step Four
Making it look pretty! Now we need to add all the elements and classes to make your newly added code look good!
Copy and past this code into your style.css file.
https://gist.github.com/chrisegg/9849464.js
Step Five
Install and activate the Jetpack Widget Visibility.
Once activated, your widgets will have a new feature. You’ll be able to add multiple widgets to any widget area and control when they are visible based on an if statement.
Step Six
Create your new page, and in the “Page Attributes” widget, select “Sales” from the drop down menu below “Template”.
How it all works
With your code in place, you can now start to use your newly created “Sales” page template.
- To add a full width image below the header, just add a featured image to your page.
- To use the overlay widget area, add a text widget to the “Sales Page CTA” widget area, set the visibility to display on your sales page and click save (shown in step five).
- Add some content to the body of your page and when you’re ready, publish the page!
I’ve add some styling to the widget area that allows you to select large or small font size and white or black font color depending on your background image. To utilize this just wrap your text in a <div> tag like this:
<div class=”tagline size color”></div>
You would replace size with large or small and color with white or black.
Source Credit:
- Sridhar Katakam: Many great tutorials that helped me accomplish this.
- Scott Robbin’s Backstretch jQuery plugin
Skip to content
Thanks for this help in creating a new template. It’s fantastic. My problem is that I need to display the default backstretch image on the home page, and when I replaced the backstretch-set.js file, it removed the image from the home page, and I wasn’t able to select the new template for that. So I added the template for “body” into the backstretch-set.js file, but that adds in back in as default for everything. Is there a way to isolate the home page instead of the entire site?
If I understand correctly you would need to remove the wp_enqueue_scripts for backstretch from the functions.php file and place it in the front-page.php file.