How to Create a Custom Page Template in Genesis

Templates. Template in WordPress is a feature used to create and design specific pages to use custom functionality without touching the other pages. Most of the time we see different features are included with each template.

A template can be for anything for anything. It could be for your front page design, post page, about page, archive page, landing page or even custom post type page. It all depends on how you want to show a specific page using template feature.

With the feature of clean code in Genesis framework, life seems to be so easy to work on a template for a site build on Genesis child theme. There i count generally two types of template.

1. Automatic templates based on Conditional tag
2. Custom template

Why Do We Need This?

Templates are needed when

• You need custom page design for the specific page
• You need different features on a particular page
• You want to design custom post type archive or single page differently than normal archive pages.
  and more…

How templates works?

A single template works if the condition match. Suppose we have a landing page. If one user is active on that page, the function checks it and works what written in landing-page.php. You may want to read conditional tags guide to know more.

One can manually control the Template for specific pages using the desired template on “Page Attributes” on Editor screen (still it’s works based on the conditional tag).

How to create a template?

There is a simple way to create a template for the specific page. The steps are should be followed as

1. Create a Blank template and Name it
2. Add the required code/snippets
3. Add a pinch of CSS

Let’s Start,

1. Create a simple template

Here, I am going to create a hello-bar.php template for testing purpose. Assume this can be used on any type of page (archive, about us page or custom post type).

Add the following in hello-bar.php (create one under child theme)

<?php
/**
* Template Name: Hello Bar
* Description: Template for a Hello Bar page
*/

genesis();

Okay, what does that genesis() function actually do? If we look in /genesis/lib/framework.php, it calls get_header(), then builds the main content area, then calls get_footer().

So, we have now Header, Empty content are and footer. You can manually use

get_header(); // displays header
do_action( 'custom_content_area' ); //function to do the stuff
get_footer(); //displays footer

instead of using

genesis();

Make sure the path is like /wp-themes/child-theme/hello-bar.php and now
Go to any page and >> Page attributes >> Select the ‘Hello Bar’ template.

You have created your first custom template. Congo. Party.

2. Add the required code/snippets

As we have created our template we can tweak the styles and can add some additional functions using some snippets.

a) Adding custom body class

Replace the 1st snippet with this one in hello-bar.php

<?php
/**
* Template Name: Hello Bar
* Description: Template for a Hello Bar page
*/

//* Add custom body class
add_filter( 'body_class', 'custom_body_class' );
function custom_body_class( $classes ) {
	$classes[] = 'hello-bar';
	return $classes;
}

genesis();

b) Remove contents

Let suppose you want to remove footer widgets. We will use

//* Remove Footer Widgets
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

c) Adding Contents

Here, some of the snippets you can use in your template
1. Adding widgets
2. Register a sidebar

d) Layout

We can easily change and force the specific layout to show using different layout options

//* Force page layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_content' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar_sidebar' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_sidebar_content' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_content_sidebar' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Make sure that every snippet is added before closing genesis(); function and should only one <?php tag at the first line of the file.

Here is one example of a custom template having different functions like widgets and different layout option enabled.

<?php
/**
* Template Name: Hello Bar
* Description: Template for a Hello Bar page
*/

//* Add custom body class
add_filter( 'body_class', 'custom_body_class' );
function custom_body_class( $classes ) {
	$classes[] = 'hello-bar';
	return $classes;
}

//* Remove Footer Widgets
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

//* Define a layout here it is full-width (no-sidebar)
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

//* Display hello bar widget area
add_action( 'genesis_before_content', 'template_hello_bar_widget' );
function template_hello_bar_widget() {
    genesis_widget_area(
    'hello-bar', array(
        'before' => '<div class="hello-bar widget-area"><div class="wrap">',
        'after'  => '</div></div>',
    ) 
    );
}

genesis();

Make sure to register widget area in functions.php to make the widget work. Use this snippet in your child theme’s functions.php

//* Register Hello Bar widget areas in functions.php
genesis_register_widget_area(
	array(
		'id'          => "hello-bar",
		'name'        => __( "Hello Bar", 'genesis-sample' ),
		'description' => __( "This is the Hello Bar section.", 'genesis-sample' ),
	)
);

Drag widgets from Appearance >> Widgets

3. Add a pinch of CSS

Don’t forget to add the taste.

.hello-bar {
}

Explore some snippets on StudioPress or in Genesis Tutorials section.
Thank you.

Reference:
https://developer.wordpress.org/themes/basics/template-hierarchy/
https://www.billerickson.net/full-width-landing-pages-in-genesis/