How to Create a Custom Page Template in WordPress

Custom page templates let you change the layout and design of specific pages without affecting the rest of your site. Below are methods for both classic (PHP-based) themes and modern block (FSE) themes.

Option A: Classic Themes (PHP Template Files)

Step 1: Create the Template File

In your active theme (or child theme) directory, add a new file, for example page-custom.php, with a template header:

<?php
/**
 * Template Name: Custom Landing (No Sidebar)
 * Template Post Type: page
 */
?>
<?php get_header(); ?>

<main id="primary" class="site-main custom-landing">
  <section class="hero">
    <h1><?php the_title(); ?></h1>
    <div class="intro"><?php the_excerpt(); ?></div>
  </section>

  <section class="content">
    <?php
      while ( have_posts() ) : the_post();
        the_content();
      endwhile;
    ?>
  </section>
</main>

<?php get_footer(); ?>

Notes:

• Template Name makes it selectable in the editor.
• Template Post Type (optional) restricts it to certain post types (e.g., page, product).

Step 2: Assign the Template to a Page

1. In the WordPress editor, open your page.
2. Right sidebar → Template (or Page Attributes → Template) → choose Custom Landing (No Sidebar).
3. Update the page.

Step 3: Add Optional CSS

In your theme’s stylesheet or a custom CSS plugin:

.custom-landing .hero { padding: 4rem 0; text-align: center; }
.custom-landing .content { max-width: 900px; margin: 0 auto; }

Common Variations

• Full-width: Remove sidebar markup and widen the content area.
• Different header/footer: Use get_header('alt') and create header-alt.php.
• Per-page hero image: Use the featured image via get_the_post_thumbnail().

Option B: Block Themes / Full Site Editing (FSE)

Step 1: Create a Template File in templates/

In a block theme (or child theme), create /templates/page-custom.html:

<!--
  Template Name: Custom Landing (No Sidebar)
  Template Post Type: page
-->

<!-- wp:group {"tagName":"main","className":"custom-landing","layout":{"type":"constrained","contentSize":"900px"}} -->
  <!-- wp:heading {"textAlign":"center","level":1} -->
  <h1 class="wp-block-heading has-text-align-center"></h1>
  <!-- /wp:heading -->

  <!-- wp:paragraph {"align":"center"} -->
  <p class="has-text-align-center"></p>
  <!-- /wp:paragraph -->

  <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
<!-- /wp:group -->

Notes:

• The HTML comment at the top registers the template for selection in the editor.
• Use Site Editor (Appearance → Editor) to visually tweak the template after creation.

Step 2: Assign the Template

1. Open a page in the block editor.
2. Right sidebar → Template → select Custom Landing (No Sidebar).
3. Update.

Optional: Add Styles via theme.json or CSS

In a block theme, prefer theme.json for global styles:

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/group": {
        "spacing": { "padding": { "top":"2rem","bottom":"2rem" } }
      }
    }
  }
}

Making Templates for Custom Post Types

• Classic: Use Template Post Type: product (or CPT slug) in the PHP header, or target via manage_{post_type} template files like single-product.php.
• Block: In /templates/, use naming like single-product.html or a generic template with the header comment restricting Template Post Type.

Template Hierarchy Tips

• WordPress falls back from specific templates to generic ones (e.g., page-{slug}.php → page-{id}.php → page.php → singular.php → index.php).
• Use a child theme to keep custom templates safe from theme updates.

Troubleshooting

• Template not appearing: Confirm the header comment and file location; clear caches.
• Wrong layout/loading: Check for duplicate template names; ensure you updated the specific page’s Template setting.
• Styles not applied: Verify stylesheet is enqueued (classic) or theme.json scope (block). Clear plugin/CDN caches.

Summary

1. Create a new template file: page-custom.php (classic) or templates/page-custom.html (block).
2. Add the proper template header so it appears in the editor.
3. Assign the template to a page from the editor sidebar.
4. Style via CSS (classic) or theme.json/Site Editor (block).
5. Use a child theme to preserve your customizations.

🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.