This lesson is in a series of exercises to learn how to create block themes, also known as full-site editing themes. You will learn about minimum file requirements, theme setup, and file structure.
WordPress has evolved significantly with the introduction of the Gutenberg editor, which focuses on building content with blocks. To create a block-based theme, you’ll harness the power of these blocks to build dynamic and customizable layouts. Let’s dive into the steps you’ll need to create a block theme.
If you’re interested in learning how to create a block theme using our block theme skeleton, be sure to check out our article, Create a Custom WordPress Block Theme with the Qrolic WordPress Block Theme Skeleton.
Step 1: Set Up a New Theme.
- Navigate to wp-content/themes/ in your WordPress installation.
- Create a new folder for your theme (e.g., qrolicblocktheme).
- Inside your theme directory, create a style.css file with the necessary theme information (name, author, etc.).
- Create a index.php file which will serve as the fallback template for your theme.
Step 2: Define Theme Support for Blocks.
In your functions.php file, add the following code to enable block styles:
function my_theme_setup() {
add_theme_support( ‘menus’ );
add_theme_support( ‘align-wide’ );
add_theme_support( ‘responsive-embeds’ );
add_theme_support( ‘custom-line-height’ );
add_theme_support( ‘wp-block-styles’ );
add_theme_support( ‘editor-styles’ );
add_theme_support( ‘align-wide’ );
add_theme_support( ‘post-thumbnails’ );
add_theme_support(
‘html5’,
array(
‘comment-list’,
‘comment-form’,
‘search-form’,
‘gallery’,
‘caption’,
)
);
add_theme_support( ‘title-tag’ );
add_editor_style( ‘editor-style.css’ );
}
add_action( ‘after_setup_theme’, ‘my_theme_setup’ );Step 3: Create Block Templates.
Block templates define how content is displayed on different parts of your site. These templates are created using HTML and block editor patterns. For example, to create a template for single posts, create a file named single.php and add block patterns relevant to single post content.
More examples of Block Templates:
- index.html
- home-page.html
- archive.html
- single.html
- about-us.html
- contact-us.html
Step 4: Add style for editor and frontend side.
To provide a seamless editing experience, you should style your blocks to match the front end. This can be achieved by enqueuing your theme’s styles for both frontend and editor.
-> Editor side css files Ex:
function mytheme_editor_style_setup() {
wp_enqueue_style( ‘my-theme-admin-style’, get_template_directory_uri() ‘/assets/css/admin/admin.css’, array(), ‘1.0’ );
}
add_action( ‘enqueue_block_editor_assets’, ‘mytheme_editor_style_setup’ );-> Frontend side script and style enqueue Ex:
function mythme_frontend_theme_scripts() {
wp_enqueue_style( ‘style’, get_template_directory_uri() . ‘/assets/css/main.css’, array(), ‘all’ );
wp_enqueue_script( ‘script’, get_template_directory_uri() . ‘/assets/js/script.js’, array( ‘jquery’ ), 1.1, true );
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_frontend_theme_scripts’ );Step 5: The WordPress dashboard editor view of your theme.
open your theme WordPress dashboard and go to Appearance -> Editor.
Your Gutenberg block theme editor Ex:
You can use the default block in the Gutenberg theme as shown in the image below.
Ex: Heading, Paragraph, List, Code, etc.
Step 6: where to create templates.
In a block-based theme, templates are usually created in your theme’s directory. Here we explain how to create a template.
- Go to theme’s directory and create new folder for templates.
- Next create new templates inside the Templates folder like this about-us.html
- Open dashboard click Appearance menu and Inside editor menu display your editor and Click Templates menu to show your created templates “about-us”.
You can edit your template page from the editor side as shown in the image below.
You can edit the template page by going to the Create new “about-us” page from the dashboard page menu and selecting your template page in the page dashboard.
Step 7: How to check if the theme file is ready.
Creating a custom block theme in WordPress is an exciting endeavor that allows for a high degree of customization. However, it’s crucial to ensure that your theme files are set up correctly to work seamlessly with the Gutenberg editor.
-> Check for block support:
In the functions.php file, you should have a function to add theme support for blocks and have the correct theme support added to it.
-> Verify CSS styles:
Next, make sure your theme’s CSS styles are optimized for the block editor. The editor frontend steelsheet and script must be set up correctly.
-> Check template pages:
Save your files and test the custom block template on your site. Ensure that it renders correctly in the editor and on the front end. Experiment with different types of content and layouts to verify that everything functions as expected.
Step 8: how to check output.
- Open a new browser window or tab and visit your WordPress site.
- Next locate the page or post where you’ve implemented your custom blocks.
- Right-click on an element containing your custom block and select “Inspect”. This opens the browser’s Developer Tools.
- Navigate to the Styles tab in the Developer Tools. Check if your custom block styles are applied correctly.
- Lastly, in the Console tab in the developer toolbar, you should also check that the block or pattern you have displayed should not have any errors.
Conclusion
Congratulations! You’ve created a block-based theme in WordPress, harnessing the power of the Gutenberg editor to build dynamic and customizable layouts. Once the website is ready, you can make digital presence shine and sparkle, don’t forget to make optimum use of the WordPress dashboard, and use its features to get maximum benefits.
If you are looking for a software firm to build your website, your search ends here. We use the Gutenberg Block theme to optimize website load and SEO. Contact us to get a quote. You can mail us at [email protected] or WhatsApp us at +91 9537843839.
Leave a Reply