Experience the powerful AI writing right inside WordPress
Show stunning before-and-after transformations with image sliders.
Improve user engagement by showing estimated reading time.
Written by Tasfia Chowdhury Supty
Showcase Designs Using Before After Slider.
Developing WordPress themes can be a highly rewarding process, especially when you leverage the powerful block editor (Gutenberg). With the introduction of block-based themes, WordPress developers have been given a highly flexible and scalable platform to design dynamic, content-driven websites. Among the many options available to developers, WordPress classic block-based theme development with template parts is an increasingly popular approach.
This article will take you through the essential components of classic block-based theme development, highlight the importance of template parts, explore the different types of block-based themes, and provide solutions to common questions. Additionally, we will optimize this guide for voice search, Google’s featured snippets, and generative AI to make sure it is accessible and useful to a wide range of developers and website owners.
WordPress classic block-based theme development combines the flexibility of WordPress’ block editor (Gutenberg) with traditional theme-building methods, allowing developers to create themes that use template parts for specific sections of a website. Template parts refer to reusable blocks of code that are included within WordPress themes for areas such as headers, footers, and sidebars.
In block-based theme development, the introduction of Gutenberg blocks allows for enhanced flexibility in the content creation process. By using template parts, you can compartmentalize and reuse specific sections of your website, improving efficiency in development and reducing code duplication.
Using classic block-based theme development with template parts offers a variety of advantages that make the process of building WordPress themes easier and more efficient. Here are some key reasons to consider this approach:
With block-based themes, you gain full control over the design and structure of your website. This approach allows you to create custom layouts and individual sections using blocks while maintaining the traditional theme structure.
Template parts are reusable sections of code that can be included in different places on the website. This reduces redundancy in the theme code, improving maintainability and scalability. For example, a header template part can be reused across multiple pages, making it easier to update without having to modify each individual page.
By using template parts and the block editor, developers can work more efficiently. Instead of creating a new structure for every page, template parts allow for sections like the header, footer, and sidebar to be created once and reused throughout the site.
FSE is a WordPress feature that allows users to edit all aspects of their website, including the header, footer, and sidebars. By combining block-based themes with template parts, you can fully integrate FSE functionality into your website, making customization and content management more intuitive.
Block-based themes and template parts can be optimized for search engines. By using structured blocks with semantic HTML and clear headings, your website is better indexed by search engines. Additionally, using template parts helps maintain clean and organized code, which can contribute to faster page load times and improved SEO rankings.
When developing a block-based WordPress theme with template parts, there are different types and approaches you can explore, depending on your website’s needs. Here are some common types:
These themes combine classic block-based elements like the Gutenberg editor with traditional PHP template files. They allow developers to create reusable sections (like headers, footers, and sidebars) while still using block-based content on pages and posts.
FSE themes use Gutenberg blocks for more than just post content. They allow users to edit headers, footers, and sidebars using blocks, while still leveraging the power of template parts for areas like page layouts and structure.
These themes are lightweight and designed for websites that require simple structures. They focus on minimal styling and layout, and rely heavily on Gutenberg blocks to construct the content. Template parts are used for common elements like navigation bars and footers.
For developers who want complete control over their WordPress site, custom block-based themes allow for complete customization. You can create custom blocks, layouts, and sections, and organize them into reusable template parts.
The first step is to either choose an existing parent theme that supports block-based content or develop your theme from scratch. Popular parent themes that support Gutenberg and block-based layouts include Astra, GeneratePress, and Twenty Twenty-One.
If you’re using a parent theme, it’s important to create a child theme. This allows you to safely modify the theme without affecting the parent theme’s code. Create a new folder in the /wp-content/themes/ directory and add a style.css and functions.php file.
/wp-content/themes/
style.css
functions.php
Template parts are reusable pieces of code that can be added to various sections of your theme. To create a template part, you simply need to create a PHP file (e.g., header.php, footer.php, sidebar.php) and place it in the /template-parts/ folder of your theme.
header.php
footer.php
sidebar.php
/template-parts/
<?php // Register the template part get_template_part('template-parts/header');
Using Gutenberg blocks, you can create custom blocks for specific functionality. For example, you could create a custom product grid block for an e-commerce site or a testimonial block for a business website. Register your blocks in the functions.php file.
If you want to enable Full Site Editing on your block-based theme, ensure that you use block patterns and template parts to manage all theme sections (header, footer, sidebar). This can be achieved by setting up block-based templates in the WordPress site editor.
Finally, ensure that your theme is SEO-friendly. Use semantic HTML within your blocks and templates, optimize images, and minify your CSS and JavaScript files. Tools like Google Lighthouse can help assess and improve site performance.
Template parts are reusable sections of code within a WordPress theme. These parts allow you to modularize the design of your site, such as creating separate template files for the header, footer, and sidebar, which can be reused across multiple pages or posts.
A block-based theme uses the Gutenberg block editor to build and display content. Instead of relying on traditional page builders or custom code, the block editor allows you to create layouts with individual content blocks, offering flexibility in designing pages and posts.
You can create custom blocks by registering them in the functions.php file of your theme. You’ll need to use the Block API to define the block structure, attributes, and render logic. This is especially useful for creating custom content blocks for specific site functions, like product grids or galleries.
Yes, you can. Full Site Editing (FSE) allows you to create block-based templates for the entire site, and template parts can be used within these templates. For instance, you can design and manage headers, footers, and sidebars directly from the WordPress site editor.
For e-commerce sites, using block-based themes with template parts allows you to create a highly customizable and reusable layout. You can create blocks specifically designed for product grids, reviews, and shopping cart functions, while template parts let you reuse common elements across the site, making maintenance and updates much easier
.
WordPress classic block-based theme development with template parts is an innovative approach to building WordPress websites that ensures flexibility, scalability, and maintainability. By combining modern Gutenberg blocks, Full Site Editing (FSE), and reusable template parts, developers can create customized, responsive, and SEO-optimized websites that are easy to manage and update.
Whether you’re building a simple blog, an e-commerce store, or a corporate website, this approach will empower you to deliver high-quality web experiences while maintaining a clean and efficient codebase.
This page was last edited on 12 March 2025, at 3:56 pm
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
How many people work in your company?Less than 1010-5050-250250+
By proceeding, you agree to our Privacy Policy