How to create page template without page title in Genesis
If you’re building website using Genesis Sample theme, or any other Genesis framework based theme, you might need to create a page which won’t have page title at the top of it. Especially if page starts with images or other visual content.
In theory you could remove page title in Genesis Sample theme two ways:
One way – find out page ID of the page you need, and then hide title using CSS. It would do the job, but it would still load the title in the background, and then would need to load some additional CSS. Doable, but not great.
Better solution – create custom page template which won’t have page title at all. Eliminating element is much more efficient than hiding it.
This time I’ll show you a simple solution how to create custom page template in Genesis Sample theme, and how to set it for the pages you want in WordPress admin. Here’s our plan:
add css to remove whitespace (padding) between site header and content after removing page title (optional)
How to create custom page template in Genesis Sample theme
By default Genesis Sample theme has one custom page template. It’s called Landing, and it’s located in /page-templates folder.
Landing page template gets rid of header, footer, menu, and other parts of the default Genesis layout, and leaves just the bare minimum – page content. Here how template looks like:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Landing
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_landing_body_class' );
/**
* Adds landing page body class.
*
* @since 1.0.0
*
* @param array $classes Original body classes.
* @return array Modified body classes.
*/
function genesis_sample_landing_body_class( $classes ) {
$classes[] = 'landing-page';
return $classes;
}
// Removes Skip Links.
remove_action( 'genesis_before_header', 'genesis_skip_links', 5 );
add_action( 'wp_enqueue_scripts', 'genesis_sample_dequeue_skip_links' );
/**
* Dequeues Skip Links Script.
*
* @since 1.0.0
*/
function genesis_sample_dequeue_skip_links() {
wp_dequeue_script( 'skip-links' );
}
// Removes site header elements.
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
// Removes navigation.
remove_theme_support( 'genesis-menus' );
// Removes site footer elements.
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
// Runs the Genesis loop.
genesis();To create a new page template we’ll duplicate file landing.php, and will put it in the same directory, just with a different name. For example – without_title.php .
Landing page template removes lots of template parts we need. We’ll strip everything what’s not needed from it’s copy, and will leave only necessary part. Here what’s going to be left then:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
// Runs the Genesis loop.
genesis();That’s all we need:
basic information about template
template name. I used Other, but you might use something more descriptive, like Page without title.
Genesis call.
Now we have the most basic page template possible for Genesis Sample theme, or any other Genesis-based theme.
How to create page template without title in Genesis Sample theme
Since we already have a basic page template, half the work is already done. We’ll need two things to do now.
First – we need to actually remove all the page header markup and all other elements that might be located in entry header. To be precise we need to add this code to the template we previously built:
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );We’re removing entry header html markup, post title, additional post info (date, author, etc.), featured image (if there is any), and breadcrumbs (if they are shown at the entry header).
Second – we need to add body class to our new template in case we’ll need to add specific styling for pages using this template. So we can use this code:
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}We’re adding additional class without-title-page . We’ll need it just in a moment but before that look at the final page template without page title:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
genesis();Basically job done – if you’ll save this template in genesis child theme’s /page-templates directory, you’ll be able to select page template without title in WordPress admin. Like that:
Once we change page template and save changes, page title won’t be visible in the page anymore.
How to remove whitespace between header and page content in Genesis
Now after we removing page title in Genesis Sample theme you may notice that there’s quite large gap between page header and content. Every post and page has this gap by default, and it’s needed in most cases. But if you removed page title and now you want to start page content with images, you probably want to get rid of this gap too.
To remove whitespace between page header and content in Genesis open Customizer in WordPress admin panel, hit Additional CSS tab on the left, and enter this css code:
.without-title-page .site-inner {
padding-top: 0px;
}You probably noticed that we’re using that additional class .without-page-title we added in page template before. This way we’ll be able to set css to specific template only.
From now on all the pages which use page template without a title won’t have gap between header and page content.