• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

How to Create a Custom Page Template in Genesis

Last Updated on July 4, 2019 Favorited: 0 times

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/

Related Posts

  • Post list design showing featured image when hovered in Genesis
  • Gutenberg Page Template for Genesis
  • Post Page Blog Archive Template with Layouts in Genesis
  • Landing Page Design Template with Background Image in Genesis
  • Widgetized Landing Page in Genesis

Categories: Free Content, Genesis Tutorials Tags: custom, Genesis, Template

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service