Summary: Learning about Block Theme Templates and Template Parts.
Block Themes represent the evolution of WordPress theming, leveraging the Gutenberg Block Editor to provide a more flexible and user-friendly approach to building websites. Unlike traditional PHP-based themes, block themes use JSON and HTML to define site structures, offering full-site editing capabilities.
- Full Site Editing (FSE): Allows editing all parts of the site, including headers, footers, and sidebars, using the block editor.
- Template-Based Structure: Utilizes templates and template parts to define the layout and components of different site sections.
theme.json
Configuration: Centralized settings for global styles, typography, colors, and more.
Templates
A Template in WordPress block themes defines the layout and structure for specific types of content or pages on our website. Templates determine how content is displayed, which blocks are used, and how different sections are arranged.
- HTML-Based: Templates are primarily written in HTML with embedded block markup.
- Reusable: Templates can be reused across multiple pages or post types.
- Customizable: Users can modify templates via the Site Editor without touching code.
Template Hierarchy
WordPress employs a Template Hierarchy to determine which template to use based on the type of content being displayed. In block themes, this hierarchy is more streamlined but follows similar principles to classic themes.
Template Files in Block Themes
Block themes use specific template files located in the theme directory.
index.html
: Fallback template for all types of content.single.html
: Template for single posts.page.html
: Template for pages.archive.html
: Template for archive pages.search.html
: Template for search results.404.html
: Template for 404 error pages.
Template Parts
A Template Part is a reusable section of a template, such as a header, footer, or sidebar. Template parts allow us to define these common sections once and include them in multiple templates, promoting consistency and reducing redundancy.
- Header: Contains site title, navigation menus, logos, etc.
- Footer: Includes copyright information, footer menus, social links.
- Sidebar: May contain widgets, recent posts, categories.
- Content Area: The main content block area.
- Custom Template Parts: Specific sections like hero sections, call-to-actions, etc.
- Reusability: Define once, use multiple times across templates.
- Consistency: Ensures uniform look and feel across different site sections.
- Maintainability: Easier to update common sections without modifying multiple templates.
File Structure of Block Themes
/my-block-theme/
├── block-templates/
│ ├── single.html
│ ├── page.html
│ ├── archive.html
│ ├── index.html
│ ├── search.html
│ └── 404.html
├── block-template-parts/
│ ├── header.html
│ ├── footer.html
│ └── sidebar.html
├── parts/
│ └── custom-template-part.html
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
├── theme.json
├── functions.php
└── style.css
block-templates/
: Contains full-page templates.block-template-parts/
: Houses reusable template parts like headers and footers.parts/
: For additional custom template parts if needed.assets/
: Stores stylesheets, scripts, images, and other assets.theme.json
: Central configuration file for theme settings.functions.php
: PHP file for adding theme-specific functions (optional in block themes).style.css
: Contains theme metadata and styles.
Creating and Editing Templates
Using the Site Editor
The Site Editor is the primary interface for creating and editing templates in block themes. Accessible from the WordPress admin dashboard under Appearance > Editor, it provides a block-based interface to manage templates and template parts.
- Access Site Editor:
- Navigate to Appearance > Editor in the WordPress admin dashboard.
- Add New Template:
- Click on the Templates dropdown.
- Select Add New.
- Choose Template Type:
- Select the type of template we want to create (e.g., Single Post, Page).
- Design the Template:
- Use blocks to build the layout.
- Insert Template Parts where necessary (e.g., Header, Footer).
- Save the Template:
- Once designed, save the template with a meaningful name.
Creating a Custom Single Post Template
- Create
single-custom.html
:- In the
block-templates/
directory, create a new file namedsingle-custom.html
.
- In the
- Define the Template Structure:
<!-- wp:template-part {"slug":"header","theme":"my-block-theme"} /--> <!-- wp:post-content /-->
<!-- wp:template-part {"slug":"footer","theme":"my-block-theme"} /-->
Creating and Editing Template Parts
Template Parts are managed similarly to templates via the Site Editor.
- Access Site Editor:
- Navigate to Appearance > Editor.
- Open Template Parts:
- Click on the Template Parts option.
- Add New Template Part:
- Click Add New.
- Choose the type of template part (e.g., Header, Footer, Custom).
- Design the Template Part:
- Use blocks to design the section.
- Incorporate dynamic blocks if needed (e.g., Navigation Menu).
- Save the Template Part:
- Provide a meaningful name (e.g.,
custom-header.html
).
- Provide a meaningful name (e.g.,
Creating a Custom Header
- Create
header-custom.html
:- In the
block-template-parts/
directory, createheader-custom.html
.
- In the
- Define the Header Structure:
<!-- wp:group {"align":"full","backgroundColor":"primary","textColor":"background"} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background">
<!-- wp:site-logo /-->
<!-- wp:site-title /-->
<!-- wp:navigation {"layout":{"type":"flex","flexWrap":"nowrap"}} /--> </div>
<!-- /wp:group -->
Template Hierarchy in Block Themes
In classic themes, WordPress relies heavily on PHP-based template hierarchy to determine which template file to use for different types of content. Block themes shift this approach to a block-based hierarchy, utilizing HTML templates and template parts.
Block themes use a combination of template files and the theme.json
configuration to establish a hierarchy. The system looks for the most specific template available, falling back to more general ones if necessary.
- Specific Post Type Template:
single-post.html
for standard posts.single-product.html
for WooCommerce products.
- General Single Template:
single.html
for all single posts if a specific template isn’t found.
- Fallback Template:
index.html
acts as the universal fallback.
Custom Header
<!-- wp:group {"align":"full","backgroundColor":"primary","textColor":"background","padding":{"top":"20px","bottom":"20px"}} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background" style="padding-top:20px;padding-bottom:20px">
<!-- wp:site-logo {"width":100} /-->
<!-- wp:site-title {"level":1,"style":{"typography":{"fontSize":"2em"}}} /-->
<!-- wp:site-tagline {"fontSize":"small"} /-->
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"space-between"},"fontSize":"small"} /-->
</div>
<!-- /wp:group -->
Custom Footer
<!-- wp:group {"align":"full","backgroundColor":"secondary","textColor":"background","padding":{"top":"20px","bottom":"20px"}} -->
<div class="wp-block-group alignfull has-background-color has-secondary-background-color has-text-color has-background" style="padding-top:20px;padding-bottom:20px">
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">© 2024 My Custom Theme. All rights reserved.</p>
<!-- /wp:paragraph -->
<!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","size":"has-small-icon-size"} -->
<ul class="wp-block-social-links has-small-icon-size">
<li class="wp-block-social-link"><a href="#"><span class="screen-reader-text">Facebook</span></a></li>
<li class="wp-block-social-link"><a href="#"><span class="screen-reader-text">Twitter</span></a></li>
<li class="wp-block-social-link"><a href="#"><span class="screen-reader-text">Instagram</span></a></li>
</ul>
<!-- /wp:social-links -->
</div>
<!-- /wp:group -->
Custom Single Post Template
<!-- wp:template-part {"slug":"header-custom","theme":"my-custom-theme"} /-->
<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide">
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-date /-->
<!-- wp:post-author /-->
<!-- wp:post-featured-image /-->
<!-- wp:post-content /-->
<!-- wp:post-pagination /-->
<!-- wp:comments /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer-custom","theme":"my-custom-theme"} /-->
Leave a Reply