Since WordPress 5.0, the block editor has become the default user interface for creating pages, posts, and templates in WordPress. WordPress block templates, template parts, and patterns have dramatically improved the way that sites are built by making the process more visual, intuitive, efficient, and flexible.
No longer do you need to have extensive coding experience to be able to create WordPress page and post templates. You can do the vast majority of that work visually in the block editor.
If you’re coming from the classic editor, there will be a bit of a learning curve. But don’t worry — it’s pretty straightforward once you get the hang of it.
New to building websites with WordPress? This tutorial is for you, too. Although you may want to read Getting Started With WordPress, first.
Before we talk about how to create a block template, we’ll first discuss what a block template is, how it differs from block patterns and theme templates, and the prerequisites you’ll need to build a block template.
Then, we’ll walk you step-by-step through creating, styling, and implementing your first block template. We’ll also cover using JavaScript with your block template as well as how to customize existing block templates and troubleshoot common issues.
What is a block template in WordPress?
A WordPress block template is a full-page layout that serves as a template for a page or post. It’s composed of a series of components called blocks. Blocks are individual pieces of content like paragraphs, headers, images, dividers, rows, columns, forms, carousels, etc. that can be arranged to create a layout.
Block templates often include template parts — like headers, footers, and sidebars — and patterns created from groups of blocks. Most importantly, block templates should almost always include a content block. The content block displays all the blocks that are added to an individual page or post. Think of it as a dynamic placeholder for page- and post-specific content.
Unlike classic editor page templates, which are PHP-based, block templates are HTML files. If you’re hunting for these files on your server, you’ll find them in your theme’s /templates/ folder instead of in your theme’s /root folder.
The anatomy of a WordPress block template
It’s all well and good to talk about what block templates are, but if you’re new to the block editor, it may be difficult to visualize. The block editor is a visual tool, after all, so seeing an “anatomical drawing” of a block template might be helpful.
Hopefully, his handy infographic will give you a more holistic understanding of the basic structure of a typical WordPress block template and the function of each element involved. It’s best viewed on a larger screen. Feel free to click on the image below to download a PDF version and keep it as a reference.
How do block templates differ from template parts, patterns, and theme templates?
Some of the terminology regarding different aspects of block editing has changed over time as the block editor has evolved. Let’s take some time to clearly define the other elements that are used in the WordPress Site Editor: template parts, patterns, synced patterns (formerly reusable blocks), and theme templates.
What is a WordPress template part?
Template parts are reusable, structural elements that are positioned outside the content area of a page or post. You can only use them when creating your block template or other template parts — you cannot insert them directly into an individual page or post.
Template parts are synced across your site. When you make a change to the template part, it will be reflected across every page or post where that template part is implemented.
A common example of a template part would be a header, as shown below:
Other common template parts include footers, sidebars, and post meta.
What can a template part contain?
A template part can contain other template parts, patterns, and individual blocks.
How do you use template parts within a block template?
You can add your theme’s default template parts either before or after the content area within your block template. You can also create custom template parts or variations on existing template parts — like a custom header for your checkout page or unique sidebar for a specific blog category.
Template parts can also be used for other types of content like modals and lightboxes that display on click or on hover via a custom block. Examples of this include mini carts, login and registration forms, or chatbot interfaces.
What is a pattern?
A pattern is a group of blocks with a predefined layout that can be added to block templates, template parts, or individual pages and posts. A pattern usually includes specific styles and may have aspects that are locked to prevent reordering or deletion of important elements.
Patterns in WordPress can be used in two different ways — synced or unsynced. Unsynced patterns can be edited after insertion into a page or post without affecting other instances of the same pattern.
Synced patterns keep the design and content consistent throughout the site by updating every instance of that pattern every time you make a change, either by editing the pattern itself or as it’s being used within a page or post.
You can choose whether your pattern is synced or unsynced by toggling the sync option when creating one.
What can a pattern contain?
When editing a page or post, patterns can contain other patterns or individual blocks. If you’re using a pattern in a block template, you can also nest template parts within your pattern.
How do you use a pattern?
Patterns can be used in block templates, template parts, and within the content of your pages and posts. Patterns are not synced unless you check the synced option, so unsynced patterns are best suited for layout elements where you might want the style and order of elements to remain consistent, but the content itself may vary from instance to instance.
As of WordPress 6.6, you can alternatively decide to use an override on synced patterns if you want a layout element to remain identical in 99% of use cases but encounter the occasional exception. This might save you a bit of time.
An example of a pattern that you might not want to sync is a pricing table. Let’s say you own a software company, and you sell basic, standard, and premium subscription plans for ten different types of software that you develop. You might want all your pricing tables to look consistent, but the content of those pricing tables — the exact services and features each software and subscription level offers and their respective pricing — may be different for each product.
What is a synced pattern?
Synced patterns are similar to template parts in that when you make a change to any instance of that synced pattern, all occurrences of that pattern throughout your site will be updated to reflect those changes.
Any pattern can be a synced pattern by selecting the sync option when you create the pattern. Once you create the pattern, however, you cannot modify the synced status after the pattern is created. If you want to copy your synced pattern into a new non-synced pattern, you can simply duplicate the pattern and change the sync status.
When you save the pattern, you’ll want to make sure that you only select the unsynced pattern to apply updates, as you’ll be presented with the option to also save the changes to the synced pattern you copied into your new pattern.
A synced pattern seems a lot like a template part — how are they different?
Where synced patterns and template parts differ is that synced patterns relate to user-created content like posts and pages, while template parts relate to your site structure.
How do you use a synced pattern?
Synced patterns should be used when you want to create elements that display in the same way, consistently, throughout your website.
Your pattern may contain some dynamic elements that would necessarily look different from one post or page to another — like a post’s author bio or featured image. But if you changed any static content or style elements, those would be updated throughout the site.
Patterns are not synced unless you check the synced option when creating your pattern, so make sure to carefully consider whether you want your pattern to be synced or not when you create it.
An example of an appropriate use case for a synced pattern might be a newsletter signup form. Perhaps you want to encourage readers to sign up for your monthly newsletter, so you want to include a call to action midway through every blog post.
You want it to look the same on every post, and someday, if you decide to migrate from one email marketing platform to another, you can simply replace the signup form on one instance of your call to action pattern and have it update throughout the entire site, instead of having to update hundreds or thousands of posts one by one.
What is a theme template?
Theme templates are the page and post templates that are included with your theme. They define the default layout and structure of different pages and post types on your website (e.g., single post, archive page, 404 page).
Theme templates are applied automatically based on the type of content being viewed (e.g., single post template for individual blog posts, page template for static pages. Note, however, that your theme may also include alternate templates that you can choose to apply while creating and editing pages and posts.
In addition to your theme templates, some plugins you install may include their own templates associated with specific pages or custom post types. Ecommerce plugins like WooCommerce, for instance, include templates for Cart, Checkout, Single Product, and Product Catalog pages (among others).
Theme templates, templates associated with plugins, and the custom block templates you create will be organized in separate sections in the Site Editor under Appearance → Editor → Templates.
Note that if you need to make changes to existing theme or plugin templates, it’s best to do so via a child theme.
Changes to your child theme’s templates will override your parent theme’s settings, so that when you update your parent theme, your customizations will be retained.
The benefits of creating block templates in WordPress
WordPress block templates are designed to make creating attractive and functional website layouts easier and more efficient for just about anyone. Whether you have minimal technical skills or are an experienced developer, block templates have a lot of advantages.
- Brand consistency. Block templates let you create a consistent, branded appearance and structure throughout your website. You can lock elements of your templates to prevent others from changing styles and content or from reordering or removing certain layout elements.
- Predefined, reusable layouts. Once created, block templates can be reused to quickly generate new content without having to recreate your design for every page and post.
- Customizable. Not only can block templates be modified and customized to fit your specific needs, they can also help you customize the structure of your website. Block templates can be associated with specific pages or custom post types to include layouts and functionality unique to the purpose of those pages and posts. This can help you personalize certain pages for site users (like an account or user profile page) and help you optimize user experience in a way that aligns with your brand’s aesthetic.
- Streamlined workflow. Block templates simplify the content creation process for users, especially those who are not familiar with coding or web design, by providing a visual and intuitive way to build and edit layouts. For developers, block templates speed up the theme and website building process by reducing the amount of PHP coding involved.
The prerequisites to building a block template
Before you get started building your first block template, you’ll need to make sure the following prerequisites are met:
- Access to a server environment. You’ll need either a local development environment using tools like Studio or through your web hosting company.
- Basic knowledge of WordPress. Familiarize yourself with the basics of WordPress, including how to navigate the admin dashboard, create posts and pages, and manage themes and plugins. Consider going through some of the tutorials or courses available on WordPress.org if you need a more structured approach.
- An understanding of the block editor. Get comfortable with the block editor, including how to add, edit, and configure different types of blocks (text, images, galleries, buttons, etc.).
- Developer tools (optional). If you plan to create more advanced block templates, having some knowledge of HTML, CSS, and JavaScript can be beneficial. This is especially useful if you intend to customize block templates beyond what the block editor offers out of the box.
- Familiarity with template hierarchy (optional). Understanding the WordPress template hierarchy can help you better integrate block templates into your theme’s structure.
Next, you’ll need to follow these steps to prepare for creating your block template:
- Install WordPress. Ensure you have a working installation of the latest version of WordPress. This can be on a local development environment or a live server. Ensure that you have admin access to your WordPress site once installed, as you’ll need permissions to create and manage block templates.
- Install and activate a block editor theme. You can find block-editor-compatible themes in the WordPress theme library. If you choose a premium theme from a developer, make sure the theme is compatible with both the block editor and full site editing. Some themes are only compatible with the block editor but do not allow full site editing.
- Install block-compatible plugins. Some plugins come with built-in support for block templates and some are not yet compatible with block templates. Ensure any plugins you use are compatible with the block editor and full site editing.
Once you’ve got your WordPress installation set up, and you have a basic understanding of the block editor, you’re ready to move on to creating your first block template!
How to create a block template, step-by-step
Creating a block template can be relatively quick and easy, depending on the functionality you’ll need and how much content is required. For this example, we’ll create a custom block template for a single blog post page that you can manually apply to any post.
1. Access the Site Editor
Go to your WordPress dashboard and navigate to Appearance → Editor. Then click on Templates.
2. Add a new template
On the Templates page, click the + icon next to the Templates title to select a new template to add. You can select from template types that will automatically apply to specific pages and post types, or you can create a custom template.
If you create a page-specific template, it will only be used for that specific page and can’t be selected as an optional layout for another page. If you create a custom template, on the other hand, you can apply it to any page or post. For this example, we’ll create a Custom template.
Name your template something that is relevant to its use case, then click Create.
Before you start designing your layout you’ll be prompted to select a pattern.
Starting from a pattern might help accelerate the design process if it’s similar enough to the layout you want to create. In this case, however, we’ll start from scratch, so we’ll select Skip.
3. Design your layout
Now we can start adding template parts, patterns, and other blocks. First we’ll add a header, footer, and content area, then we’ll make some additional customizations.
Adding a header and footer block
Click the blue + button in the upper-left corner of the edit screen to reveal the blocks, patterns, and media menu. From here, there are two ways you can add a header and footer.
Choose a template part block. One way to insert a header and footer is to choose the Header and Footer blocks from your theme’s template parts, highlighted in purple in the Blocks tab.
This will insert the default header. If you create a custom template part, you can also choose that from the Blocks tab as well.
Choose a header pattern. The second option for adding a header and footer is to select a pattern from the Patterns tab. You can select a pattern from the WordPress Pattern Directory, Theme & Plugins, or User libraries. You can also filter by synced and not synced patterns.
Adding a content block
The content block is designed to dynamically display blocks that you’ve added to individual pages or posts. If you don’t add a content block to your template, your posts and pages will not display any of the unique content you add.
You can add a content block from the Block library tab. You only need one content block. Adding two content blocks will just duplicate the page/post content.
Add and arrange other blocks
You can add as many other blocks, patterns, and template parts as you need to create the layout you desire. Choose whether you want these elements to display above the content or below it. You can insert blocks above your header and below your footer as well.
Arranging your blocks is as simple as selecting a block or pattern and dragging and dropping it to where you want it to be. You can do this in the visual editor area, or you can click on the List View icon and reorder blocks within the list view.
Customize your blocks
You can customize block-specific options like alignment, spacing, and colors by clicking on the settings icon in the upper-right corner of the editor screen. Then select the Block tab. From here you can adjust some settings in the Settings tab (gear icon) and style elements in the Styles tab (half-filled circle icon).
If there are other appearance attributes you need to adjust for specific blocks that don’t have options available in the Styles or Settings tabs, you can add them via CSS.
Adding custom CSS
Whether you need to make global style changes to elements of your website or only for a specific instance of a block, you can make those adjustments by adding some CSS markup either to the Styles section of the Site Editor, or directly to your style.css file in your child theme.
For this example, we’ll change the font style at the top of our block template so that it defaults to italic. To make sure this style only applies to this particular text block in this specific template, we’ll add a custom CSS class under Additional CSS Classes in the Block Settings panel.
Once you’ve named your new CSS class, save your changes.
Next, you’ll apply your custom style to your CSS class. There are two ways you can do this. The first is by going to Appearance → Editor → Styles, then clicking the Edit Styles icon (pencil).
In the Styles panel, click Additional CSS, enter your styles for your custom CSS class, then click Save.
The second way to do this is to add your custom CSS directly to your child theme’s style.css file. You can find this file in your child theme’s folder, wp-content → themes → yourtheme-child → style.css, on your server using an SFTP program like FileZilla or Cyberduck (check with your web host for the necessary credentials for accessing your website via SFTP).
Download your style.css file and open it in a text editor like Notepad++ or Visual Studio Code. Add your custom CSS, then save your file and re-upload it to your server. You will overwrite the previous file, so make sure you’ve backed up your site before overwriting the old style.css file.
4. Save your template
When you’ve finished making all your changes, click the Save button to save your template. Now you’ll be able to find your template under the Custom section of the Templates menu in the Site Editor.
Using JavaScript with block templates
Using JavaScript with block templates in WordPress allows you to add interactive features and enhance the functionality of your blocks. This guide assumes that you are using a child theme. Here’s a step-by-step guide on how to use JavaScript with block templates:
Step 1. Create a custom JavaScript file
Create a new JavaScript file using the code editing software of your choice and name it something relevant (e.g., custom-block-scripts.js). You can add all your custom JavaScript for any functions you want to include in your block templates here.
For this example, we’ll add an event listener for a button click that will bring up an alert box that says, “Button clicked!”:
document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.my-custom-button'); buttons.forEach(button => { button.addEventListener('click', function() { alert('Button clicked!'); }); }); });You’ll need to specify your selector that you’ll then apply later to the block you’re working with. In this case, we’ve used the CSS class .my-custom-button as the selector.
Next, save your file and then enqueue it in your child theme’s functions.php file.
Step 2. Enqueue the JavaScript file
Go to your child theme directory and open the functions.php file in the code editor of your choice.
To enqueue the JavaScript file, add the following code (replace “custom-block-scripts.js” with whatever your file name is):
function my_custom_block_scripts() { wp_enqueue_script('my-custom-block-scripts', get_stylesheet_directory_uri() . '/custom-block-scripts.js', array('jquery'), null, true); } add_action('wp_enqueue_scripts', 'my_custom_block_scripts');Step 3: Apply your JavaScript to a specific block
In the block editor, select the block you want to enhance with JavaScript. In the block Settings panel, go to the Advanced section and, under Additional CSS Class(es), add the selector name that you used in your JavaScript file (but omit the leading period). Save your changes.
Step 4: Add inline JavaScript (optional)
If you need to add JavaScript directly within the block editor, you can use the HTML block to include inline JavaScript, though this method is less common and generally not recommended for larger scripts.
In the block editor, add a new Custom HTML block.
Now let’s add our custom alert button script. Make sure to add your JavaScript code within <script> tags.
<script> document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.my-custom-button'); buttons.forEach(button => { button.addEventListener('click', function() { alert('Button clicked!'); }); }); }); </script>Next, we’ll add the additional CSS class, my-custom-button (without the leading period), to our button block. Don’t forget to save your changes.
Step 5: Testing and debugging
Ensure that your JavaScript is working as expected by testing the interactive features on the front end of your site.
Here we’re testing the functionality of our custom button, which should show an alert box that says, “Button clicked!” when you click the button.
If you discover any issues, use browser developer tools to debug. Check the console for errors and ensure that your script is being loaded correctly.
How to implement and use a block template
There are a couple of ways you can implement and use block templates in WordPress. You can apply them manually to pages and posts or assign your block templates automatically to specific categories, pages, or post types.
Manually apply a block template to a page or post
To apply a custom block template manually to a page or post, first open an existing page or post or create a new one. Then, in the Attributes panel on the right-hand side of the page editor, select Swap Template from the Template dropdown menu.
Select your custom template from the template preview screen.
Your new page will now use the custom block template. You can add and customize content for your post or page within the block editor, but you won’t be able to edit any of the content that is a part of your block template. That content can only be edited when editing your block template directly. Everything you add to your page or post will appear within the Content block that you included in your block template.
Click the Publish button to make your new page or post live, or click Update to save changes to an existing page or post.
Assign block template to specific post types
You will need to choose the post type that you would like your template applied to before you create your block template. You will not be able to change this later.
Within the Site Editor, you can automatically create templates for:
- Front Page (aka Home Page)
- Pages (choose a specific page)
- Author Archives (specific author or all authors)
- Category Archives (specific category or all categories)
- Tag Archives (all tags)
- Single item: Post (specific posts)
The Custom Template option can be applied manually to any page or post.
You will need to choose the post type that you would like your template applied to before you create your block template. You will not be able to change this later.
If you create a block template and want to change the type of post it is applied to, you can save your block template as a pattern or create a new block template for the post type you want and then insert the pattern into that new block template. You’ll then need to delete the previous block template if you don’t want it to apply to whatever post type you had initially applied it to.
Assign block template to custom post types
If you’ve registered a custom post type, you can automatically assign your block template to a custom post type by adding it to your child theme’s Templates directory and changing the file name to single-yourcustomposttype.php.
For example, we’ve registered a custom post type called Portfolios using the following code in our child theme’s functions.php file:
function my_custom_post_type() {
register_post_type('portfolios',
array(
'labels' => array(
'name' => __('Portfolios', 'textdomain'),
'singular_name' => __('Portfolio', 'textdomain'),
),
'supports' => array( 'title', 'editor', 'comments', 'excerpt', 'custom-fields', 'thumbnail' ),
'public' => true,
'has_archive' => true,
'show_in_rest'=> true,
)
);
}
add_action('init', 'my_custom_post_type');Now we’ll need to download our block template file so we can add it to our theme’s templates folder. Find your block template in the Site Editor by going to Appearance → Editor → Templates in your WordPress dashboard.
Find the template you want to edit, click on it, then click the Edit icon (pencil) next to your template’s name.
In the Editor, click on the Options panel (three vertical dots in upper-right corner), then scroll down to Export and click the Download icon.
This will download your entire theme along with all your custom template files.
Open the zip file and navigate to your child theme’s templates folder. You’ll find your custom block template file there named wp_custom_template_yourcustomtemplatename.html.
WordPress template hierarchy dictates that if you want your template to apply to all posts within a specific post type, you’ll need to prepend the name with “single-” followed by the name of the custom post type. In this case, our custom post type is called “portfolios” so we’ll name our block template file single-portfolios.html.
Now, upload it to your website using SFTP and place it in your child theme’s templates folder.
Now all “portfolio” custom post types will display using your assigned block template.
How to customize existing block templates
You can easily customize existing block templates in the Site Editor, or manually by downloading your theme files and editing the code within your block template file.
Customizing a block template using the Site Editor
To customize a block template in the Site Editor, go to Appearance → Editor → Templates in your WordPress dashboard.
Find the template you want to edit, click on it, then click the Edit icon (pencil) next to your template’s name.
From here, you can add, remove, rearrange, and style blocks to your liking. Click Save to save your changes and have them applied to all associated pages and posts.
Customizing a block template in the code editor
You can edit your block template’s HTML directly in the Code Editor view within the Site Editor. Go to Appearance → Editor → Templates in your WordPress dashboard.
Find the template you want to edit, click on it, then click the Edit icon (pencil) next to your template’s name.
In the Editor, click on the Options panel (three vertical dots in upper-right corner), then scroll down to Code editor and click on it. This will display the HTML for your block template, and you can add HTML blocks directly this way.
But what if you want to edit your template offline? Don’t worry — you can also download your block template’s HTML file and edit it in the code editor of your choice.
In the Editor, click on the Options panel, then scroll down to Export and click the Download icon.
This will download your entire theme along with all your custom template files.
Open the zip file and navigate to your child theme’s templates folder to find your block template.
Open your block template file in your code editor and make your changes. Save your file and re-upload it via SFTP to your child theme’s templates folder.
Troubleshooting common issues with block templates
When troubleshooting issues with block templates in WordPress, you should use a systematic approach to proactively identify any issues, pinpoint the cause, and resolve the problem.
1. Identify the Issue
There are several places you can check to help identify issues with your block template.
- Check the front end of your site to see how the block template is rendered. Identify specific issues such as layout problems, missing content, or styling errors.
- Test for responsiveness by viewing your site on a variety of devices (or device emulators), including mobile, tablet, and desktop. If you see a display issue that only shows up in one device or viewport type, you can likely resolve it with some media queries in your CSS.
- View your site on different browsers to make sure that your template is being displayed consistently across various browsers. If your issue is specific to an individual browser, there may be browser-specific code that you can add to your template so it will display correctly.
- Look at your console tab in your browser’s developer tools to check for any JavaScript errors that might be affecting your block template.
2. Verify block settings and custom CSS
Review the settings for each block in your template. Ensure that all configurations are correct and no required fields are empty. If you have nested blocks, make sure to check the settings on each block. Work your way through the list view in the Editor to make sure you’ve checked all blocks.
Check any custom CSS you’ve added for errors or conflicts. Ensure the CSS is correctly targeting the elements within your block template. Not sure if the correct element is being targeted or whether styles are being applied correctly? Use your browser’s developer tools to inspect any improperly displaying elements.
3. Clear Caches
Sometimes changes that you make on the back end aren’t visible on the front end of the site because the site is serving cached content. You can check your site in incognito mode in your browser to see if caching might be the problem.
If the site displays correctly in incognito mode but not when you are in a normal browser window, then caching may be your issue. There are several areas where you’ll want to clear your cache.
- Server cache. Many web hosts automatically provide server-side caching services. If your web hosting provider uses server-side caching, make sure that you are able to purge that cache.
- A content delivery network (CDN). If you use a CDN like Jetpack’s Site Accelerator, you should clear the cache on your CDN.
- Caching plugins. If you use a site optimization plugin that includes caching, like Jetpack Boost, you should clear your cache there as well.
- Browser cache. After clearing the cache on your server and any caching plugins you may have enabled, your last step is to clear your browser cache. This will ensure you are seeing the latest version of your site.
4. Validate HTML and Code
If your block settings and CSS look correct and caching is not your problem, you might want to dig further into your code.
- Validate HTML with a validator like the W3C Markup Validation Service to check for any HTML errors.
- Enable debugging in WordPress to check for any PHP errors. Add the following lines to your wp-config.php file to enable debugging:
define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('WP_DEBUG_DISPLAY', false);Check the wp-content/debug.log file for any errors related to your block templates.
- Check your PHP code in your block template (if created using PHP) and any custom PHP you may have added in your functions.php file. Review the code for syntax errors or issues with WordPress functions. Problems with your code may not always show up as PHP errors in the debug log — specifically, you may have a function that is coded correctly from a syntax point of view, but is not coded correctly to perform your intended function — so it’s always a good practice to review your code when troubleshooting.
5. Check for plugin and theme conflicts
If the above steps don’t pinpoint your issue, it’s time to check for plugin and theme conflicts. First, you’ll want to back up your site. If this is a live site, you may want to perform this testing on a staging site so that your live site is not impacted during the testing period.
Deactivate all plugins (unless the issue you are seeing is in a block associated with a specific plugin — you’ll want to keep that one enabled but disable all others) and check if the issue persists. If the problem is resolved, reactivate the plugins one by one to identify the conflicting plugin.
If none of your plugins are triggering the issue, it may be a theme conflict instead. Temporarily switch to a default WordPress theme (like Twenty Twenty-Four) to see if the issue is related to your theme.
6. Seek help and read related documentation
Even after you’ve identified the issue, the solution may not be clear, and you may have to reach out to the WordPress support forums, read your theme or plugin’s documentation for common issues and their resolutions, or reach out to a WordPress developer for help.
Common issues and solutions
- Layout problems
- Issue: Blocks not aligning correctly.
- Solution: Check block settings for alignment options. Ensure theme or custom CSS is not overriding block styles.
- Missing content
- Issue: Parts of the template not displaying.
- Solution: Verify that all required blocks are present and configured. Check conditional display settings and ensure elements are not being hidden by theme or custom CSS like “display:none;” or improper z-indexing.
- Styling errors
- Issue: Custom styles not applying.
- Solution: Clear all caches — browser, caching plugin, CDN, and server-side cache. Next, ensure custom CSS is correctly targeting the blocks. Use specific selectors to avoid conflicts and double check that there’s no other CSS overriding your styles by using your browser developer tools to inspect incorrectly displaying elements.
- JavaScript errors
- Issue: Interactive elements not working.
- Solution: Check your browser’s developer tools’ console for errors. Ensure all required scripts are enqueued and loaded correctly.
By going through the steps above and taking a systematic approach to troubleshooting your issues, you’ll be able to accurately diagnose and solve most problems you might experience with your block templates. Even if you are unable to resolve a specific issue yourself, the more information from your troubleshooting efforts that you can provide in the community forums, to a theme or plugin author, or to a freelance developer, the quicker and easier it will be to resolve your issue.
Ready to build your own block templates?
Now that you’ve got an understanding of how to build your own block templates in WordPress, it’s time to get started! If you don’t have a web hosting provider yet, you can install Studio on your computer and create a development site to start experimenting with creating block templates. When you’re ready, you can choose a web hosting provider and take your block templates live.
Don’t forget to make sure your block templates perform at their best and your site is backed up and secure, 24/7. Jetpack Complete can automate keeping your site protected and optimized so you can spend more time focused on your site’s design and content.
Frequently asked questions
Are block templates mobile responsive by default, or do I need to make additional adjustments?
Block templates in WordPress are generally designed to be mobile responsive by default, thanks to the responsive design principles embedded in the block editor. For instance, images and videos adjust to fit the screen size, and text blocks flow naturally within the layout.
However, depending on the theme you are using, the complexity of your layout, and the specific blocks used, you might need to make additional adjustments to ensure optimal responsiveness across all devices.
You’ll first want to ensure that you’re using a modern, responsive WordPress theme. Such themes typically include CSS rules that adapt the layout for various screen sizes.
Ensuring mobile responsiveness
Even though block templates are generally designed to be mobile responsive, that doesn’t mean that your theme’s default mobile styles will work with your block template’s exact layout. Here are a few steps you should take to ensure mobile responsiveness in your block template.
- Preview your template in different screen sizes. Use the block editor’s preview feature to check how your block template looks on different devices. Click on the Preview button and select Preview in new tab. From here you can switch between desktop, tablet, and mobile views to see which elements need to be adjusted in each view.
- Adjust block settings. The native WordPress blocks don’t have device-specific settings for most settings options, but there are certain settings that can be adjusted for better display in mobile.
- Columns block. In the block settings, check the responsiveness options to ensure columns stack on smaller screens.
- Image block. Ensure images scale properly. Use the Wide Width or Full Width settings if supported by your theme.
- Margins and padding. Using percent vs px, em, or rem for your padding and margins may help with getting a better appearance across multiple devices.
- Add CSS media queries. Use CSS media queries to apply specific styles for different screen sizes. Add your custom CSS in the theme’s Additional CSS section or in a custom CSS file.
Example:
@media (max-width: 768px) { .my-custom-template .wp-block-column { width: 100%; } .my-custom-template h2 { font-size: 1.5em; }
Test your custom CSS on various devices and screen sizes to ensure the desired responsiveness.- Optimize images and video for mobile performance. Ensure images are optimized for web and use appropriate sizes to improve load times on mobile devices. Consider using a CDN to serve image and video content and well as using lazy loading to reduce load times.
While WordPress block templates are generally mobile responsive by default, making additional adjustments ensures your content looks great on all devices. Regularly preview and test your templates, use media queries for custom styles, and leverage responsive design principles to enhance the mobile experience.
How do I back up my custom block templates to prevent data loss?
Regularly backing up your WordPress site will ensure that your block templates are able to be restored if your site experiences an issue. There are few different methods that you can use to back up your site.
- Use a backup plugin like Jetpack VaultPress Backup. Configure the plugin to create regular backups of your WordPress database and files.
- Create a manual backup via phpMyAdmin and SFTP. You can back up your database via phpMyAdmin and your website files can be downloaded with an SFTP program.
Back up the database:- Log in to your hosting control panel (e.g., cPanel).
- Open phpMyAdmin and select your WordPress database.
- Click Export and choose the Quick export method in SQL format.
- Download and save the exported database file.
Back up your files:
- Log into your website’s server using your SFTP program of choice and the SFTP credentials provided to you by your web host.
- Select your wp-content folder and download it. If you’ve made customizations to or added files to your root folder that you want to back up, you may want to download your entire root folder.
- Download your theme. You can export your templates by downloading your theme from within the Site Editor.
In the Editor, click on the Options panel (three vertical dots in upper-right corner), then scroll down to Export and click the Download icon.
This will download all your custom block templates as HTML files within your theme’s templates folder.
Store your backups in multiple locations such as cloud storage (e.g., Google Drive, Dropbox) and local storage (external hard drive). Periodically restore backups to a test environment to ensure they are complete and functional. Regular backups and secure storage practices are key to preventing data loss and maintaining the integrity and availability of your WordPress site.
Can I import and export block templates between different WordPress sites?
Yes, you can import and export WordPress block templates between different WordPress sites. There are a couple of ways you can do this. You can either export your templates from one site and upload them to your theme’s templates folder on the other site, or you can copy your blocks from the site editor and paste them directly into a new template within the editor on your other site.
Exporting and importing block templates
You can export your templates by downloading your theme from within the Site Editor.
In the Editor, click on the Options panel (three vertical dots in upper-right corner), then scroll down to Export and click the Download icon.
This will download your theme files as a zip file, including your block templates in HTML format, to your computer.
Next, open the zip file and navigate to your theme’s templates folder. Find the template you want to import to your new site.
Using an SFTP program, log into the server of the destination site. Navigate to your theme’s templates folder and upload the template you downloaded earlier.
Copy and paste template blocks into a new template
On the site you want to copy the block template layout from, open your WordPress dashboard and go to Appearance → Editor → Templates. Choose the template you want to copy and click the Edit icon. In the List view, select all items (you can also select them in the visual editor screen, but it’s more likely you might miss some nested elements).
Press Command/Ctrl + C to copy your blocks.
Next, navigate to your Templates area of the Site Editor in the site you want to paste your blocks into. Create a new template and assign it to a particular page, post, post type, etc. or create it as a custom template.
Click on the Type / to choose a block area in the visual editor and press Command/Ctrl + V.
Your blocks should now all be copied over.
Note: if this template needs to be assigned to a custom post type, you’ll want to make sure that you register that post type on your new site and that your template name matches the custom post type you’ve registered.
What happens to my content if I deactivate or delete a block template?
When you deactivate or delete a block template in WordPress, the impact on your content depends on how the template was used and whether it was saved as a custom template or as part of the theme files. But regardless, your post content would be retained, but anything specific to your block template would be lost.
If you delete a block template that’s being used in a page or a post, WordPress will follow the template hierarchy and look for the next most appropriate template to display your post content with.
For instance, if you created a custom block template and applied it to a specific post, then deleted that template, WordPress would default to single.html. If you deleted a block template that you saved as single.html in your theme files, then WordPress would default to singular.html or, if that doesn’t exist, index.html.
How can I optimize the load time and performance of pages using block templates?
Optimizing load time and performance of pages using block templates in WordPress is not really any different than optimizing your site in general. Strategies include using efficient coding practices and leveraging caching and performance plugins. Here are some techniques you can use to achieve this:
- Use lightweight blocks and limit the use of third-party blocks. Use lightweight blocks and avoid overly complex layouts that can increase page load time. Minimize the use of third-party blocks that may add extra CSS and JavaScript, slowing down your page.
- Compress images. Use image compression tools like TinyPNG or ImageOptim to reduce the file size of images without compromising quality.
- Use appropriate image formats and sizes. Use modern image formats like WebP for better compression and ensure images are sized appropriately for their container.
- Lazy load images. Implementing lazy loading delays the loading of images until they are in the viewport.
- Combine and minify CSS and JavaScript files. Combine and minify CSS and JavaScript files, reducing the number of HTTP requests. Defer JavaScript loading to ensure these files are loaded after the main content.
- Remove unnecessary plugins. Deactivate and delete plugins that are not essential, as each plugin can add its own CSS and JavaScript files.
- Implement caching. Use a caching plugin, server-side caching, and enable object and browser caching to improve performance for returning visitors.
- Optimize your database. Clean up your database by removing post revisions, spam comments, and expired transients. Regularly optimize your database tables to ensure efficient data retrieval. Remove unused tables belonging to deleted plugins and themes.
- Use a CDN. CDNs serve your static content like images, CSS, and JavaScript, from servers closest to your visitors, reducing load time.
- Optimize fonts. Consider using system fonts and host your fonts locally. Preload fonts, especially if you’re using custom fonts, using the <link rel=”preload”> attribute in your site’s header to improve loading times. Here’s some example code:
<link rel=”preload” as=”font” href=”fonts/denmark.woff2” type=”font/woff2” crossorigin>You can monitor your site’s performance and get recommendations for improvement using tools like Google PageSpeed Insights, GTMetrix, and Pingdom. Regularly test your site’s performance to identify and resolve any new issues that arise.
If you are looking for a fairly comprehensive solution to get you started on the road to optimizing your site, Jetpack Boost will optimize your images and content, implement caching, and serve your images and videos via a CDN. Learn more about all of Jetpack’s WordPress performance tools.
Are there any limitations on the number of blocks I can include in a single template?
In WordPress, there is no explicit limitation on the number of blocks you can include in a single template. However, keeping your page templates as simplified as possible for the functionality you require is the best practice.
If your block template layout is very long and overly complex, it increases the amount of HTML, CSS, and potentially JavaScript that needs to be loaded. This can slow down your page load time and increase database queries unnecessarily. It can also slow down the editor and make managing your template content more difficult.
In addition to performance issues, your site visitors may become annoyed and overwhelmed by lengthy pages and slow performance.