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.
What is WordPress Classic Block-Based Theme Development with Template Parts?
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.
Key Features:
- Classic theme structure combined with modern block-based elements.
- Use of template parts to separate and reuse page sections.
- Custom Gutenberg blocks for more flexible layouts and content.
- Streamlined theme development and easy integration with Full Site Editing (FSE).
Why Choose WordPress Classic Block-Based Theme Development with Template Parts?
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:
1. Flexible and Customizable Themes
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.
2. Increased Reusability with Template Parts
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.
3. Improved Development Workflow
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.
4. Full Site Editing (FSE) Compatibility
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.
5. SEO Benefits
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.
Types of WordPress Classic Block-Based Themes with Template Parts
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:
1. Standard Block-Based Themes with Template Parts
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.
Features:
- A mix of traditional PHP templates and modern Gutenberg blocks.
- Template parts for sections like headers, footers, and sidebars.
- Reusable block patterns for content layout.
2. FSE (Full Site Editing) Block-Based Themes with Template Parts
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.
Features:
- Full control over the entire website design, including theme areas (header, footer, sidebar).
- Use of template parts within block-based layout.
- Full compatibility with the block editor and block patterns.
3. Minimal Block-Based Themes with Template Parts
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.
Features:
- Lightweight, minimal styling, and design.
- Customizable with the Gutenberg block editor.
- Reusable template parts for easier maintenance.
4. Custom Block-Based Themes with Template Parts
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.
Features:
- Fully customizable design and structure.
- Advanced custom block development.
- Tailored template parts for specific site sections.
How to Develop WordPress Classic Block-Based Themes with Template Parts
Step 1: Choose a Parent Theme or Build from Scratch
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.
Step 2: Create Your Child Theme
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.
Step 3: Register and Create Template Parts
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.
<?php
// Register the template part
get_template_part('template-parts/header');
Step 4: Create Custom Blocks for E-Commerce or Content
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.
Step 5: Integrate Full Site Editing (FSE) Features
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.
Step 6: Optimize for SEO and Performance
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.
Frequently Asked Questions (FAQs)
1. What are template parts in WordPress?
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.
2. What is a block-based theme in WordPress?
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.
3. How can I create custom blocks for my WordPress theme?
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.
4. Can I use template parts with Full Site Editing (FSE)?
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.
5. Why should I use block-based themes with template parts for e-commerce?
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
.
Conclusion
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.
