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.

Create a php file in your child theme’s directory named after your template name. For example, special-template.php.

Put this template code into the file:

Save the file.

There is no closing PHP tag needed at the bottom of the file.

The above code creates a template called Template Name. This template has one widget area. Every page that uses this template will have the body class of theme-name-template-name.

Take a quick look at the code and see whether you can determine which parts of the code specify the template’s name, the widget area and the body’s CSS class.

When we add a new widget area to a Genesis child theme (not a template or the homepage),  we edit the child theme’s functions.php,

  • 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:

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.

The third part serves several purposes.

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.
  • creates a CSS class for the body element. This is done with add_filter( ‘body_class’, ‘add_body_class’ ); and function add_body_class( $classes ) {$classes[] = ‘theme-name-template-name'; return $classes;.

If the widget area is not active, this code is skipped, the widget area does not display and the regular Genesis loop is played.

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():

The final part loads the remainder of the Genesis loop.

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.

Copy this code into your functions.php file:

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.
  • Background – should the widget have a background color or an image?

Example CSS for a widget area could be:

Using Your New Template

You new template is complete and ready to use:

  • Create a new page.
  • Select the page template to your new template’s name.
  • Save to draft or publish the page.
  • Configure its content by adding widgets to its widget areas in Appearance>Widgets.
  • View the page.

Creating a Homepage Template

This is as easy as creating any other type of template:

  • create a file called home.php
  • create a template in the same way as shown above but remove the Template Name code i.e do not include this bit:

That is all there is to it.

Demo Genesis Child Theme Templates

These example templates for Genesis child themes are packaged in zip files. Each zip file has three files: style.css, functions.txt and a template file.:

  • upload the template file to your child theme’s directory,
  • copy the contents of style.txt to the bottom of your child theme’s style.css file, and
  • copy the content of functions.txt to the bottom of your child theme’s functions.php file.

Next time you create a page you will be able to select one of the example templates. You can then customize the content of the page by adding widgets in Appearance > Widgets.

Templates included in the download file are:

  • Three Rows – three horizontal widget areas.
  • Three Columns – three vertical widget areas
  • 3-1-3 – three widget  areas in a row, 1 widget area in a row, three widget areas in a row
  • 3-3-3 – three rows of three widget areas.
Download430 downloads

What’s Next?

Buy me dinner and I’ll let you know ;)

Ask questions, make comments and share tips below.

Comments

  1. Laura says

    I can’t thank you enough!! This was a very detailed explanation and I was able to use your info to create a custom page with the widgets that I needed.

  2. says

    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.

    • says

      Thank you Rob, you’ll love my next post. Releasing it tomorrow. It compliments this one. It’s about making Genesis child theme design a lot easier.

    • says

      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 to it. And the blog page has the body class belonging to the “Home” template. Why should this blog page be behaving as though it has the Home template assigned to it in the Page editor when it hasn’t?

      Sorry, to put this Genesis query in this comment section but I thought you might know…

    • says

      H’mmm. I think I’ve worked it out … it’s a WordPress cardinal sin to call your new template “home.php” because there’s already a “home.php” in WordPress so it confuses it a little bit.

      I’ve renamed my new template “Front” and called the file front.php and amended it a little bit and it’s now working. Phew!

    • says

      That’s a strange one! Not sure why it wouldn’t have worked but I’m glad you fixed it.

      I didn’t get to publish the post but it is coming this week.

    • says

      There’s a Genesis Featured Posts widget just for that purpose. There’s a plugin in the WordPress repository that improves the Genesis featured posts widget.

  3. says

    Brilliant post Lee, I was just creating a new home page template for my sample theme and this was more than I was expecting to find – top post and great site.

  4. Joseph says

    When I use your example, I receive the following:

    Fatal error: Call to undefined function genesis_register_sidebar() in… on line 12.

    • says

      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.

  5. says

    Hi Lee,

    This article was amazingly helpful and well written.

    bit confused with the code on the page template. You’ve put the ‘before’ line in there, but none of the divs are closed?

    This means that each of the columns (on the 3-1-3 version are sort of inside each other).

    Unless I’ve missed something?

    I’ve cured this by adding ‘after’ => ”, to each function.

  6. says

    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:

    #three-columns-left h4 {
    background:none;
    font-family: arial;
    }

    in stylesheet, but my widget title is still appearing styled like sidebar titles. Link here:
    http://beta.ourroseylife.com/projects/

    • says

      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.

  7. Jessie says

    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.

  8. Tom says

    I am having the issue where are the widgets are within widgets, placed on the left side of the page. Using WP3.8, Genesis v2.0.1, Agency Child theme v3.0.0

Leave a Reply