Creating a Custom WordPress Page Template
I wanted a front-end page template to play around with the new REST API that is now in WordPress 4.7 core. A custom page template gives me the latitude I want at this stage of development, so here is how I did it.
Create the Template File
There are a couple of ways to do this.
Option 1
Clone and edit the existing page.php template. Open page.php in an editor and Save As… api-test.php. Remove the guts of the page containing the while loop for iterating through and displaying posts. For example, my clone of wp-content/themes/twentyseventeen/page.php saved as api-test.php looks like this:
api-test.php
<?php
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer();
The original page meta data properties in the comment at the top have been removed.
Option 2
Start from scratch with a completely blank slate. Create a new php file in the root of your active theme with a single line of code to set the Template Name meta data. Now we have a new custom template that can selected for pages when editing.
api-test.php
<?php /* Template Name: api-test */ ?>
Option 3
This is nearly the same as option 1, only with addition of the meta data property to set the Template Name property like option 2.
Clone and edit the existing page.php template. Open page.php in an editor and Save As… api-test.php. Edit api-test.php replacing the meta data at the top with the Template Name property used in the blank slate option above. Then remove the guts of the page containing the while loop for iterating through and displaying posts. For example, my clone of wp-content/themes/twentyseventeen/page.php saved as api-test.php looks like this:
api-test.php
<?php /* Template Name: api-test */
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer();
Create the Page Slug
Login into the dashboard and add a new page.
If using Option 1, update the permalink slug to match the page filename. For example, api-test
api-test page slug
Select the new template if using options 2 or 3.
select api-test template