This tutorial uses code built in a previous tutorial. If you haven’t seen it already, please view that tutorial first.
Making a web page template from 5 widget areas. I’m using Dynamik Website Builder
When you add a new page to your WordPress website, you add words and images etc. This is similar to creating a document in a word processor.
But what if you want to make a magazine style layout or a modern stripy parallax style page?
Here are some examples…
A simple WordPress post
http://demo.studiopress.com/lifestyle/this-is-a-featured-post-1/
A magazine style homepage
http://demo.studiopress.com/daily-dish/
A parallax style homepage
http://demo.studiopress.com/parallax/
One solution is to make your own web page template using widget areas.
This video follows on from a video tutorial I made showing you how to make 5 widget areas. We are going to reuse those same 5 widget areas in this video. So if you haven’t watched the first video yet, it would make sense to watch it before you attempt this tutorial.
Go to…
- Genesis → Dynamik Custom → Templates
- Name your template and save it!
- The “File” name uses lower case letters and hyphens, the “Template Name” can be upper and lower case with spaces
After saving your new template open the PHP Builder tool…
- Force full width layout
- Replace the Loop, this makes a new function. Make sure you name it.
- Add the genesis(); function
- Wrap the whole block of code in PHP tags
- Copy and paste this code into the page template box, below the PHP Builder dialogue box
Save your changes before we move on!
We’ve now got an empty page template…
We need to put widget areas inside this page template.
Open the PHP Builder tool again
Create your widget area shotcodes using the “Create Widget Area Shortcodes” drop down list
Make sure you get the shortcodes in the correct order.
[top_left][top_right]
[middle]
[bottom_left][bottom_right]
And put each row on it’s own line, you should end up with 3 rows. Top, middle and bottom.
Copy these shortcodes and paste them inside the { curly braces of the template’s function }
Press the [do_shortcode] button. This wraps the shortcodes in the nessessery php code.
Now. Because php was opened at the very top of the template and these shortcodes open php AGAIN we have to close php before the shortcodes and open it again after the shortcodes.
Just inside the opening curly brace make sure you have a space then add { ?> the closing php tag
Just inside the closing curly brace add the opening php tag Save then test your new page template
This is a simple web page template but we can use it as a foundation to build upon.
In future videos we will wrap these widget areas in html. This makes it possible to style the template using CSS.
