Chap WordPress theme
Chap

Adding a custom page template

WordPress page templates can be used to have a different look and feel on different pages. By default Chap theme comes with 5 page templates:

Full width page
Page with no sidebars
Page with one sidebar
Page with two sidebars
Text

These templates can be applied by selecting on from the Page Attributes metabox while editing the page.

Adding a custom template

Custom page templates should be placed in the child theme’s root directory. A template that should show up in the Page Attributes metabox should be named with the template- prefix, such as /chap-child/template-custom.php.

The template should be based on the theme’s page.php or any of the default template-*.php files.

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

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 comment block on the top of the file specifies the display name that is used for the template in the Page Attributes metabox.

Since the Chap theme uses a template wrapper that eliminates the need to duplicate layout code, such as header, footer or sidebars, the page template file is very slim, containing only calls to render the page header and content.
Even the while loop is not necessarily required as the page will generally only have 1 content “post” but adhering to WordPress standards should make the implementation compatible with plugins that potentially inject more posts to the page loop.

The templates/page-header.php template that is being requested in the code is an optional template that does not exist by default, so it can be omitted as well. Simplifying things further, a custom template can look as small as this:

PHP
/wp-content/themes/chap-child/template-custom.php
<?php
/**
 * Template Name: Custom template
 */
defined('ABSPATH') || exit; ?>

<?php get_template_part('templates/content', 'page'); ?>

Here you have a template that has a display name, cannot be navigated to directly and renders the page content by calling the default templates/content-page.php template. For reference, the content-page.php template is what does most of the heavy lifting for putting the page content together:

PHP
/chap/templates/content-page.php
<?php
/**
 * Single page content.
 */

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

<article <?php post_class('content'); ?>>

	<?php do_action('chap_render_page_title'); ?>

	<?php do_action('chap_render_featured_image'); ?>

	<?php the_content(); ?>

</article>

<?php if(!is_page_template('template-full-width.php')): ?>
<div class="ui hidden clearing divider"></div>
<?php endif; ?>

<?php do_action('chap_after_page_content'); ?>

Should you wish to customize that you can omit calling the content-page.php template in your custom template file and simply add similar code instead.

Modifying the page layout of your template

Given that a custom template in Chap theme can be as slim as a couple of lines of code, how would one go about customizing how the whole page is laid out? For that filters in your child theme’s functions.php can be used.

For rendering the page layout, Chap theme uses a function to determine how many sidebars to display and which container, if any, to use. This function applies a filter called chap_page_type that you can utilize to give your custom input based on which template is being used.

PHP
/wp-content/themes/chap-child/functions.php
<?php

...

/**
 * Returns which type of page to display.
 *
 *   0 - page with no sidebars
 *   1 - primary sidebar + page
 *   2 - page + primary sidebar
 *   3 - primary sidebar + page + secondary sidebar
 *   4 - secondary sidebar + page + primary sidebar
 *   5 - full width page
 *
 * @return int Page type.
 */
add_filter('chap_page_type', function($type) {
	if(is_page_template('template-custom.php')) {
		return 0;
	}
	return $type;
});

The above filter makes it so that when the custom template (template-custom.php) is used then the page will not render any sidebars.

You can add more conditions and return different values to control multiple templates with the single filter. For example, when returning 5 you will have full control in the template-custom.php of what is displayed below the theme header and above the theme footer.

You could split the page into 2 columns, displaying the content on the left, and something else on the right:

PHP
/wp-content/themes/chap-child/template-grid.php
<?php
/**
 * Template Name: 2 column grid
 */
defined('ABSPATH') || exit; ?>

<div class="ui two column stackable grid">
	<div class="column">
		<?php get_template_part('templates/content', 'page'); ?>
	</div>
	<div class="column">
		Something else here
	</div>
</div>

Or you could limit the page content to a custom width:

PHP
/wp-content/themes/chap-child/template-container.php
<?php
/**
 * Template Name: Container
 */
defined('ABSPATH') || exit; ?>

<div class="ui container" style="max-width:900px!important">
	<?php get_template_part('templates/content', 'page'); ?>
</div>

Or even wrap the whole content up in a segment:

PHP
/wp-content/themes/chap-child/template-segment.php
<?php
/**
 * Template Name: Big segment
 */
defined('ABSPATH') || exit; ?>

<div class="ui big primary raised padded segment">
	<?php get_template_part('templates/content', 'page'); ?>
</div>

With some additional filters it’s even possible to create a blank custom template that renders only the post content.