Blank template

Chap theme includes page templates such as full width, one sidebar, two sidebars, text. All of these are normal templates that include the header, footer and sometimes sidebars.

But for special use cases, a blank template can be useful – a landing page of some sort, some information similar to a Word document or a PDF that can be easily edited and shared, a promotion page or anything else.

Here are instructions for creating a page template that displays nothing but the post content.

First, in order to add custom templates you should be using the child theme. To add a new template simply create a file in the child theme directory /chap-child/template-blank.php which uses the same content as a normal page template from the main theme /chap/page.php:

PHP
/wp-content/themes/chap-child/template-blank.php
<?php
/**
 * Template Name: Blank
 */

if(!defined('ABSPATH')) {
	exit; // Exit if accessed directly
}
?>

<?php while(have_posts()): the_post(); ?>
	<?php get_template_part('templates/page', 'header'); ?>
	<?php get_template_part('templates/content', 'page'); ?>
<?php endwhile; ?>

The Template Name comment can specify which name the template uses when choosing it in the editor from the Page Attributes metabox:

Selecting the blank template from Page Attributes metabox

Next up we need to add some code that modifies the theme behavior when this template is used. This code can be added to the child theme’s functions.php:

PHP
<?php

/* ... */

/**
 * Blank template.
 * Only post content is displayed.
 */
add_action('wp', function() {
	if(is_page_template('template-blank.php')) {
		/**
		 * Disable rendering core parts.
		 */
		remove_all_actions('chap_render_header');
		remove_all_actions('chap_render_mobile_menu');
		remove_all_actions('chap_render_sticky_menu');
		remove_all_actions('chap_render_footer');
		/**
		 * Disable sidebars.
		 */
		add_filter('chap_option_sidebar_disable_all', function() {
			return true;
		});
		/**
		 * Use masthead title, which is not displayed in this case.
		 * For SEO purposes the page title is still rendered in an 
		 * invisible <h1> tag at the start of the <article>.
		 */
		add_filter('chap_option_title_in_masthead', function() {
			return 'enabled';
		});
		/**
		 * Hide featured image.
		 */
		add_filter('chap_option_featured_image_position', function() {
			return 'hidden';
		});
		/**
		 * Use full width layout.
		 */
		add_filter('chap_page_type', function() {
			return 5;
		});
		/**
		 * Hide AMP template elements.
		 */
		add_action('amp_post_template_css', function() {
			?>
			.amp-wp-header,
			.amp-wp-article > .amp-wp-article-header,
			.amp-wp-footer {
				display: none;
			}
			body {
				padding-top: 0;
			}
			.amp-wp-article,
			.amp-wp-article-content {
				margin: 0;
				max-width: 100%;
			}
			.amp-wp-article-content > .ui.container {
				max-width: 1280px;
				margin: 0 auto;
				padding: 0 2em;
			}
			<?php
		}, 10, 2);
	}
});

This code prevents rendering header, featured image, footer, menus and sidebars when the blank template is used, as well as ensures that the page content is not restricted to any width, so that you have full control over that from the editor.

On AMP pages we can’t just remove template parts at will, because it will leave unused scripts and invalid page structure that will invalidate the AMP page. The solution here is to just use CSS to hide everything but the content.

Now when visiting the page with a blank template all that is shown is the page content:

Blank template

The page content could be anything – landing page presets, content presets, an image or just plain text. You’ll probably want to wrap your content in the [container] shortcode or Container block to keep it contained in the center, as well as add some divider shortcodes ([divider hidden section /]) or blocks before and after your content.

Example page
Example blank page
Block editor
<!-- wp:gsui/container -->
<div class="ui container wp-block-gsui-container"><!-- wp:gsui/divider {"hidden":true,"section":true} -->
<div class="ui hidden section divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider -->

<!-- wp:gsui/header {"content":"Frequently asked questions","as":"h2","size":"small","display":true} -->
<h2 class="ui small header wp-block-gsui-header display">Frequently asked questions</h2>
<!-- /wp:gsui/header -->

<!-- wp:gsui/content {"preset":"page-faq-text","templateLock":false} -->
<div class="wp-block-gsui-content"><!-- wp:paragraph -->
<p>This page contains the list of frequently asked questions related to Product. Please read it before contacting the support directly. If the question isn't listed here, you can proceed to the support. For any other inquires you can contact us directly.</p>
<!-- /wp:paragraph -->

<!-- wp:gsui/header {"content":"General","size":"large","dividing":true} -->
<div class="ui large dividing header wp-block-gsui-header">General</div>
<!-- /wp:gsui/header -->

<!-- wp:gsui/header {"content":"Contribution, if any, in a wiki, for example, the production of a Larger Work?"} -->
<div class="ui medium header wp-block-gsui-header">Contribution, if any, in a wiki, for example, the production of a Larger Work?</div>
<!-- /wp:gsui/header -->

<!-- wp:paragraph {"textColor":"grey"} -->
<p class="has-text-color has-grey-color">Any material to the risks and costs (collectively "Losses") arising from claims, lawsuits and other legal actions brought by a third party modifications of this License and the Program which: (i) are separate modules of software may accept certain responsibilities with respect to the page or pages you are not considered parts of the terms applicable to software source code, which must also duplicate this License are fulfilled for the electronic transfer of data.</p>
<!-- /wp:paragraph -->

<!-- wp:gsui/divider {"hidden":true} -->
<div class="ui hidden divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider -->

<!-- wp:gsui/header {"content":"Under claims of patents that are in compliance with the distribution?"} -->
<div class="ui medium header wp-block-gsui-header">Under claims of patents that are in compliance with the distribution?</div>
<!-- /wp:gsui/header -->

<!-- wp:paragraph {"textColor":"grey"} -->
<p class="has-text-color has-grey-color">"Recipient" means anyone who receives the Program (or any work based on the same place counts as distribution of Your modifications, or for any work that under any applicable law prohibits or restricts You from fully and/or specifically complying with all distributions of the Licensed Product, including Modifications made by that particular Modification has been obtained.</p>
<!-- /wp:paragraph -->

<!-- wp:gsui/divider {"hidden":true} -->
<div class="ui hidden divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider -->

<!-- wp:gsui/header {"content":"Does that Commercial Contributor must include the Contribution?"} -->
<div class="ui medium header wp-block-gsui-header">Does that Commercial Contributor must include the Contribution?</div>
<!-- /wp:gsui/header -->

<!-- wp:paragraph {"textColor":"grey"} -->
<p class="has-text-color has-grey-color">If Contributor's Modifications are Contributor's original creation(s) and/or Contributor has sufficient rights to use, reproduce, modify, display, perform, internally distribute within Your organization, and Externally Deploy Covered Code or any other combinations which include the Program specifies a version number of this license.</p>
<!-- /wp:paragraph -->

<!-- wp:gsui/divider {"hidden":true} -->
<div class="ui hidden divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider -->

<!-- wp:gsui/header {"content":"Legal","size":"large","dividing":true} -->
<div class="ui large dividing header wp-block-gsui-header">Legal</div>
<!-- /wp:gsui/header -->

<!-- wp:gsui/header {"content":"No hardware per se is licensed hereunder?"} -->
<div class="ui medium header wp-block-gsui-header">No hardware per se is licensed hereunder?</div>
<!-- /wp:gsui/header -->

<!-- wp:paragraph {"textColor":"grey"} -->
<p class="has-text-color has-grey-color">Contributor hereby grants Licensee a nonexclusive, royalty-free, world-wide license to reproduce, analyze, test, perform and/or display publicly, prepare derivative works of, publicly display, publicly perform, distribute and sublicense the Licensed Program to a jury trial in any resulting litigation.</p>
<!-- /wp:paragraph -->

<!-- wp:gsui/divider {"hidden":true} -->
<div class="ui hidden divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider -->

<!-- wp:gsui/header {"content":"Recipient understands that although each Contributor must agree that the name of the Derived Program?"} -->
<div class="ui medium header wp-block-gsui-header">Recipient understands that although each Contributor must agree that the name of the Derived Program?</div>
<!-- /wp:gsui/header -->

<!-- wp:paragraph {"textColor":"grey"} -->
<p class="has-text-color has-grey-color">"License" shall mean the terms for work inserted which is freely accessible, which conforms with the object code. You may create Derivative Works under any applicable law and the following in a manner equivalent to the Original Code other than as may be published from time to time.</p>
<!-- /wp:paragraph -->

<!-- wp:gsui/divider {"hidden":true} -->
<div class="ui hidden divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider -->

<!-- wp:gsui/header {"content":"As an author, you agree to work written entirely by you?"} -->
<div class="ui medium header wp-block-gsui-header">As an author, you agree to work written entirely by you?</div>
<!-- /wp:gsui/header -->

<!-- wp:paragraph {"textColor":"grey"} -->
<p class="has-text-color has-grey-color">No one other than this License, the term of this Agreement will be given a distinguishing version number. Once Original Code or Modifications has been derived from this software without specific, written prior permission.</p>
<!-- /wp:paragraph -->

<!-- wp:gsui/divider {"hidden":true} -->
<div class="ui hidden divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider --></div>
<!-- /wp:gsui/content -->

<!-- wp:gsui/divider {"hidden":true,"section":true} -->
<div class="ui hidden section divider wp-block-gsui-divider"></div>
<!-- /wp:gsui/divider --></div>
<!-- /wp:gsui/container -->