Block theme setup
Topics
File structure
Block themes require a style.css
file and a templates/index.html
file. A block theme that supports WordPress 5.9 or older also requires an index.php
file in the root folder.
You need to place all HTML template files inside the templates
folder. If you place template files in the wrong folder, the theme will not load correctly.
Template part files are optional. If they are included, they must be placed inside a folder called parts
.
The theme.json configuration file is optional but strongly recommended. Learn more about theme.json.
In addition to the required files, the theme can include a theme.json, a functions.php file, and any additional PHP files, CSS, images, or JavaScript to enhance the theme.
Example file structure:
patterns (dir) - example.php parts (dir) - footer.html - header.html templates(dir) - 404.html - archive.html - index.html (required) - singular.html functions.php index.php README.txt screenshot.png style.css (required) theme.json
Theme setup function
An example setup function inside functions.php in a block theme may include wp-block-styles
and an editor style:
if ( ! function_exists( 'myfirsttheme_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which runs
* before the init hook.
*/
function myfirsttheme_setup() {
// Add support for block styles.
add_theme_support( 'wp-block-styles' );
// Enqueue editor styles.
add_editor_style( 'editor-style.css' );
}
endif; // myfirsttheme_setup
add_action( 'after_setup_theme', 'myfirsttheme_setup' );
This is significantly less code than what you may use to setup a classic theme.
Theme support
In block themes, the following theme supports are enabled automatically:
add_theme_support( 'post-thumbnails' );
add_theme_support( 'responsive-embeds' );
add_theme_support( 'editor-styles' );
add_theme_support( 'html5', array('style','script', ) );
add_theme_support( 'automatic-feed-links' );
Some theme supports are enabled when you include a setting in theme.json. The setting in theme.json takes precedence over add_theme_support()
.
Theme support | Theme.json setting |
add_theme_support( ‘editor-font-sizes’, array() ); | settings.typography.fontSizes |
add_theme_support( ‘custom-line-height’ ); | settings.typography.lineHeight |
add_theme_support( ‘align-wide’ ); | settings.layout |
add_theme_support( ‘editor-color-palette’, array() ); | settings.color.palette |
add_theme_support( ‘editor-gradient-presets’, array() ); | settings.color.gradients |
add_theme_support( ‘custom-spacing’ ); | settings.spacing |
add_theme_support( ‘custom-units’, array() ); | settings.spacing.units |
Including CSS for block styles
Please refer to the article, Including CSS & JavaScript.
Including JavaScript
Please refer to the article Loading JavaScript in the block editor handbook.
Changelog
- Created 2022-01-20