Overview

A custom page template is a PHP file with a special Template Name: comment that site owners can assign to any page from the editor — the standard way to give a landing page, contact page or full-width page its own layout.

Your first page template

Create page-templates/full-width.php:

<?php
/**
 * Template Name: Full Width
 * Template Post Type: page, post
 *
 * A page with no sidebar, content spanning the full container.
 */

get_header();
?>

<main id="main" class="site-main site-main--full-width">

    <?php while ( have_posts() ) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

            <header class="entry-header">
                <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            </header>

            <?php if ( has_post_thumbnail() ) : ?>
                <figure class="entry-hero">
                    <?php the_post_thumbnail( 'full' ); ?>
                </figure>
            <?php endif; ?>

            <div class="entry-content">
                <?php
                the_content();

                wp_link_pages(
                    array(
                        'before' => '<nav class="page-links">' . esc_html__( 'Pages:', 'gdc-starter' ),
                        'after'  => '</nav>',
                    )
                );
                ?>
            </div>

        </article>

        <?php
        if ( comments_open() || get_comments_number() ) {
            comments_template();
        }
        ?>

    <?php endwhile; ?>

</main>

<?php
get_footer();

Open any page in the editor. In the Template panel of the page settings sidebar, "Full Width" is now an option. Choose it and the page renders with this file.

How the header works

• Template Name: is required — it is the label shown in the editor and how WordPress finds the file.
• Template Post Type: (WordPress 4.7+) makes the template available to other post types. Leave it out and it applies to pages only.
• The file can live in the theme root or one folder deep. A page-templates/ folder keeps the root tidy.

A landing page template with editable sections

Page templates are where the_title() and the_content() combine with your own markup. Here the title becomes a hero heading, and the page content fills a centred column below a call-to-action band:

<?php
/**
 * Template Name: Landing Page
 */

get_header( 'minimal' );
?>

<main id="main" class="landing">

    <?php while ( have_posts() ) : the_post(); ?>

        <section class="landing__hero">
            <?php the_title( '<h1 class="landing__title">', '</h1>' ); ?>

            <?php if ( has_excerpt() ) : ?>
                <p class="landing__lead"><?php echo esc_html( get_the_excerpt() ); ?></p>
            <?php endif; ?>

            <a class="button button--primary" href="<?php echo esc_url( home_url( '/contact/' ) ); ?>">
                <?php esc_html_e( 'Get in touch', 'gdc-starter' ); ?>
            </a>
        </section>

        <section class="landing__body">
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </section>

    <?php endwhile; ?>

</main>

<?php
get_footer();

The page excerpt doubles as the hero's lead sentence. Enable excerpts for pages with add_post_type_support( 'page', 'excerpt' ); in your setup function so the owner can edit it.

Page template or page-{slug}.php?

Detecting a template in code

To load a script only on landing pages, test the template file name:

<?php
if ( is_page_template( 'page-templates/landing.php' ) ) {
    wp_enqueue_script( 'gdc-starter-landing', get_template_directory_uri() . '/assets/js/landing.js', array(), GDC_STARTER_VERSION, true );
}

Practice

• Create the Full Width template and assign it to a page.
• Create the Landing Page template, enable page excerpts, and build a page with it.
• Make the Full Width template available to posts with Template Post Type: page, post.