Priyank Vadhavana
Get Started

Templates & Template Parts (Classic + FSE)

Priyank Vadhavana

·

·

Templates in WordPress control how content is rendered on the front end. Whether you are using a classic PHP-based theme or a modern Full Site Editing (FSE) block theme, understanding templates and template parts is crucial for theme development.

📌 1. What Are Templates and Template Parts?

  • Templates: Define the layout for specific pages or post types. Examples include single.php, page.php, archive.php, etc.
  • Template Parts: Reusable sections of templates that can be included in multiple templates, such as headers, footers, or content sections.

Using template parts ensures DRY (Don’t Repeat Yourself) coding and makes themes easier to maintain.

📌 2. Classic PHP Themes

Classic themes use PHP files stored in the theme directory to render content.

🔹 Example: Single Post Template (single.php)
<?php get_header(); ?>

<main>
  <?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', get_post_type() ); ?>
  <?php endwhile; ?>
</main>

<?php get_footer(); ?>

Explanation:

  • get_header() and get_footer() load the header and footer template parts.
  • get_template_part() loads a specific content template part (content-post.php for posts).
  • The while ( have_posts() ) : the_post(); loop renders all posts queried on the page.
🔹 Template Part Example (content-post.php)
<article <?php post_class(); ?>>
  <h1><?php the_title(); ?></h1>
  <div class="entry"><?php the_content(); ?></div>
</article>

Explanation:

  • post_class() adds WordPress-generated classes for styling.
  • the_title() displays the post title.
  • the_content() displays the post content.

✅ Tip: Use template parts for repeated sections like content blocks, headers, footers, or sidebars.

📌 3. Full Site Editing (FSE) / Block Themes

Block themes, introduced with WordPress 5.9, allow developers to build the entire site layout with blocks using HTML templates instead of PHP files.

🔹 Typical FSE Theme Structure
my-block-theme/
├─ style.css
├─ theme.json
├─ templates/
│  ├─ index.html
│  └─ single.html
└─ parts/
   ├─ header.html
   └─ footer.html

Explanation:

  • style.css → Contains theme metadata.
  • theme.json → Centralized configuration for styles, colors, typography, and layouts.
  • templates/ → HTML templates for different page types (index, single, archive, etc.).
  • parts/ → Reusable template parts like headers, footers, and navigation.
🔹 Example: single.html in Block Theme
<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:post-content /-->

<!-- wp:template-part {"slug":"footer"} /-->

Explanation:

  • wp:template-part blocks load reusable parts.
  • wp:post-content block outputs post content dynamically.

✅ Tip: Block themes simplify layout management with the Site Editor, allowing users to edit templates visually without touching code.

📌 4. Key Differences: Classic vs FSE

FeatureClassic Theme (PHP)FSE / Block Theme (HTML)
File Type.php.html
Template StructureTemplates + PHP loops + template partsTemplates + reusable blocks (template parts)
Reusabilityget_template_part()wp:template-part block
Layout ControlCode-basedVisual Site Editor + blocks
Learning CurveModerateBeginner-friendly with visual editor

✅ Summary

  • Templates control page layout.
  • Template Parts allow code reuse and cleaner themes.
  • Classic themes use PHP and template hierarchy; FSE block themes use HTML templates and blocks.
  • FSE simplifies customization through the Site Editor, making it easier to design, manage, and maintain WordPress sites.

Mastering templates and template parts is key to building flexible, maintainable, and scalable WordPress themes.

Priyank Vadhavana