How to Make a Genesis Page Template That Uses Widgets

The Genesis framework by StudioPress is awesome. Easy to install. Easy to configure. Easy to customize. Stylish.

Every once in a while you will need to create a custom template for your Genesis child theme. A custom template can provide an easy way to display information with a non standard layout. A custom template can allow you to set CSS styles, header images and background images for any page that uses the custom template. Custom page templates provide a powerful way of laying out your website.

Guess what? It doesn’t take long to create a custom template.

This particular method creates a widgitized template i.e a page built using widgets, just like most Genesis homepage templates. The fallback layout for this style of template is a regular post.

This style of template can also be used with shortcodes provided by WP eCommerce and similar plugins so that you can provide a custom layout for individual product category types.

Information You Need to Know About This Guide

All work shall be done in your child theme’s directory.

There is a download link for example custom templates at the bottom of this guide.

Step 1: Create Your Genesis Page Template

Think of a name for your page template. For example, Special Template.

to add code to register the widget so that a widget area configuration box displays in the WordPress backend under Appearance > Widgets, and

to add code to place the widget in a page so it shows in the site’s frontend in the place we tell it to display.

When we create a template,

we register the widget in functions.php so it can be configured in the WordPress backend, but

we add the code that makes the widget display in the site’s frontend to the template file.

Did you spot the difference? When we add a new widget area to the archive template or single page template (the pages you see when you view a blog post etc…), we add all the code to functions.php. To add a widget to a template like home.php or landing.php, we add some of the code to functions.php and some of the code to the template.

Let’s examine the above code

The first bit gives a label to the template.

This is the name for the template that is seen in the WordPress page editor screen where you choose a template. You would replace the second ‘Template Name’ with your template’s name:

<?php /*
Template Name: Special Template
*/ ?>

The second part fetches META information like the page title, page description, keywords and CSS file links.

In your own template, you would replace theme_title with the name of your theme and you would replace template_name with the name of your template. Remember to use underscores instead of spaces between words.

It creates a function to test whether the widget area (sidebar) in the template is active i.e it asks whether a widget has been placed into it in Appearance > Widgets.

If the widget area is active it:

removes the default genesis loop that displays posts. This is done with remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );.

hooks the widget area into the loop so that it will be displayed. This is done with add_action( ‘genesis_loop’, ‘theme_name_template_name_widget_name’ );. In your template, you would replace widget_name with your widget’s name e.g my_new_widget.

The fourth part is the function for the widget. This is the code that makes the widget display provided there is something to display in the widget. It is referred to in the third part, above, as an add_action():

Adding Another Widget

We can add another widget by duplicating the fourth part of the code with appropriate changes to widget-name and widget_name (notice one uses a hyphen and the other uses an underscore) and by adding another add_action( ‘genesis_loop’, ‘theme_name_template_name_widget_name’ ); below the existing add_action line in the third part of the code. We must also change the line if ( is_active_sidebar( ‘template-name-widget-name’ ) ) { in the third part to include a test for the additional widget. For example, if the template included two widgets, the template code would become:

Register the Widget in Functions.php

Your new template will work fine as it is but none of your widget areas will display because there is nowhere yet for you to configure their content. We need to register the widgets in your child theme’s functions.php file. Registering the widgets will add widget area configuration boxes to Appearance > Widgets.

Duplicate the above code for each widget in your template. Be sure to make appropriate changes to the the ‘id‘, ‘name‘ and ‘description‘.

Styling the Widgets

Your widgets may need some styling to make them display exactly as you want. This styling is done with CSS and should be attached to a class with the same name as your widget title (it is the title you replaced for widget-name in the line ‘before’ => ‘<div>’, in your template. In the example code, the class is widget-name.

Elements of a widget’s style you may want to change are:

Width – how wide should the widget area be? Specify this as a fixed number of pixels or as a percentage.

Height – how tall should the widget area be? Specify this as a fixed number of pixels or as a percentage.

Float – should the widget float to the left or right side of the page. Options are left, right and none.

Clear – should anything display to the left, right or both sides of the widget? Options are left, right, both and none. When a widget is far left of the page, set clear: left; and if it is far right of the page, set clear:right;.

Margin – should there be space to the top, right, left or bottom of the widget between the widget and its surroundings? Specify this as a fixed number of pixels or as a percentage. May also be set to auto.

Padding – should the content of the widget area be separated from the sides of the widget area i.e pushed inwards? Specify this as a fixed number of pixels or as a percentage.

Border – should the widget have a borderline? Specify this as a fixed number of pixels. Specify its type and a color.

Oh my goodness, what a wonderful article and website you have. It has been such a savior as I’ve been looking for this exact information for a website redesign I am working on. Now if I can just figure out what I did wrong with the CSS as two of my widgets aren’t showing, I’m great. TY for sharing your knowledge. I wouldn’t have gotten this far without your website.

Thanks, Lee. I’m not sure if you’ve released it yet. However, I have a question. I’ve just created a widgetized page template exactly as here on the Sample Child Theme you can download for free. I called the new template home.php and it’s working. I have a static home page and have set my latest posts to go on a page I’ve called “Blog”. Unfortunately, the widgets are appearing on this blog page as well as the home page, even though the home page has the Home template assigned to it but the blog page doesn’t have a template assigned… Read more »

This happens when the name of the function you’ve created doesn’t match the function name used to activate the code within the function. If you build a lot of themes or like tweaking themes, use the Dynamik child theme for Genesis. I use it most of the time now.

Great tut! Just one question, probably really simple but how would I style the widget title (h4) for this page. I want to have the widget titles appear differently than they do on the sidebar, I added this:

Sorry for taking so long to reply. You need to use something like this that narrows the change to the content area only:

#content .widget-wrap h4 a {
font-weight:bold;
color: green;
}

Also notice that the above styles the child ‘a’ tag.

Vote Up0Vote Down Reply

5 years ago

Jessie

This was exactly what I was looking for! But I hit a snag. At first the template was working and showing the page’s content. But after finalizing the template with the widget area, my content’s no longer appearing.

Hi Simon. We removed the download manager used by the site. Not all downloads were restored. Will add these files to our GitHub repository today. Ourselves, we now use page builders to define content layout. Page builders are usually more convenient than page templates. Visual Composer is robust. You can see it in action on this page and on this site’s home page.

Vote Up0Vote Down Reply

3 years ago

Atila

Thanks for the tut! Works great. The only issue is that if I add more then 2 widget areas, they are not displaying. :(

Vote Up0Vote Down Reply

1 year ago

Atila

It actually works great. Just had to read the actual code and add some markup. Thanks! o/