How to Make a Widgitized Genesis Page Template

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:

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

<?php

add_action( 'genesis_meta', 'theme_name_template_name_genesis_meta' );
/**
 * Add widget support for this template. If no widgets are active, display the default Genesis loop.
 *
 */

function theme_name_template_name_genesis_meta() {

	if ( is_active_sidebar( 'template-name-widget-name' ) ) {

		remove_action( 'genesis_loop', 'genesis_do_loop' );
		add_action( 'genesis_loop', 'theme_name_template_name_widget_name' );
		add_filter( 'body_class', 'add_body_class' );

		function add_body_class( $classes ) {
   			$classes[] = 'theme-name-template-name';
  			return $classes;
		}

	}
}

function theme_name_template_name_widget_name() {

	if ( is_active_sidebar( 'template-name-widget-name' ) ) {
		genesis_widget_area( 'template-name-widget-name', array(
			'before' => '<div class="template-name-widget-name widget-area">',
		) );
	}

}

genesis();

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:

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

<?php

add_action( 'genesis_meta', 'theme_name_special_template_genesis_meta' );

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.

/**
 * Add widget support for Model template. If no widgets are active, display the default Genesis loop.
 *
 */

function theme_name_special_template_genesis_meta() {

	if ( is_active_sidebar( 'template-name-my-new-widget' ) ) {

		remove_action( 'genesis_loop', 'genesis_do_loop' );
		add_action( 'genesis_loop', 'theme_name_special_template_my_new_widget' );
		add_filter( 'body_class', 'add_body_class' );

		function add_body_class( $classes ) {
   			$classes[] = 'theme-name-special-template';
  			return $classes;
		}

	}
}

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

function theme_name_special_template_my_new_widget() {

	if ( is_active_sidebar( 'special-template-my-new-widget' ) ) {
		genesis_widget_area( 'special-template-my-new-widget', array(
			'before' => '<div class="special-template-my-new-widget widget-area">',
		) );
	}

}

The final part loads the remainder of the Genesis loop.

genesis();

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:

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

<?php

add_action( 'genesis_meta', 'theme_name_template_name_genesis_meta' );
/**
 * Add widget support for this template. If no widgets are active, display the default Genesis loop.
 *
 */

function theme_name_template_name_genesis_meta() {

	if ( is_active_sidebar( 'template-name-widget-name' ) || is_active_sidebar( 'template-name-widget-name-two' ) ) {

		remove_action( 'genesis_loop', 'genesis_do_loop' );
		add_action( 'genesis_loop', 'theme_name_template_name_widget_name' );
		add_action( 'genesis_loop', 'theme_name_template_name_widget_name_two' );
		add_filter( 'body_class', 'add_body_class' );

		function add_body_class( $classes ) {
   			$classes[] = 'theme-name-template-name';
  			return $classes;
		}

	}
}

function theme_name_template_name_widget_name() {

	if ( is_active_sidebar( 'template-name-widget-name' ) ) {
		genesis_widget_area( 'template-name-widget-name', array(
			'before' => '<div class="template-name-widget-name widget-area">',
		) );
	}

}

function theme_name_template_name_widget_name_two() {

	if ( is_active_sidebar( 'template-name-widget-name-two' ) ) {
		genesis_widget_area( 'template-name-widget-name-two', array(
			'before' => '<div class="template-name-widget-name-two widget-area">',
		) );
	}

}

genesis();

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:

genesis_register_sidebar( array(
	'id'		=> 'template-name-widget-name',
	'name'		=> __( 'Widget Name as it shows in Appearance>Widgets', 'theme-name' ),
	'description'	=> __( 'Description of your widget as it appears in Appearance>Widgets.', 'theme-name' ),
) );

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:

widget-title {
     width: 100%;
     float: left;
     clear: both; /* This stops anything sitting left or right of the widget */
     margin-top: 15px;
     margin-bottom: 15px;
     margin-left: 0;
     margin-right: 0;
     padding-top: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     border: 1px solid black;
     background-color: transparent;
     background-image: none; /* if you use an image, replace none with url(http://location-of-the-image.com/image) */
}

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:
```
<?php /*
Template Name: Template Name
*/ ?>
```

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.

[wpdm_file id=”15″]

What’s Next?

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

Ask questions, make comments and share tips below.