Genesis custom page template with widget area and background image

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ MY DISCLAIMER FOR MORE INFO.

I created a custom page template because I wanted to do three things:

  1. Display an optional full width image just below the header (controlled by the featured image widget)
  2. Have the option to overlay the image with a call to action (text and button) controlled by a widget area
  3. 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!

Genesis Custom Page Template

To apply this to your genesis child theme, (affilink) these are required:

 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.

Jetpack Widget Visibility Plugin

Step Six

Create your new page, and in the “Page Attributes” widget, select “Sales” from the drop down menu below “Template”.

page attributes widget

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.

You should be able to add this to any Genesis Child Theme that supports HTML5. If you have any issues, feel free to use the comments for help.

Source Credit:

Advertisements

2 thoughts on “Genesis custom page template with widget area and background image”

  1. 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?

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.