This video provides a comprehensive guide to developing WordPress block themes, focusing on the principles and practical steps involved in creating modern, full-site editable themes. It covers manual theme creation, using the "Create Block Theme" plugin, understanding theme.json settings, managing styles, templates, template parts, and patterns, and leveraging global styles to export a final theme.
style.css file, a theme.json file, and essential template/part files (like index.html, header.html, footer.html).theme.json Configuration: This file is central to block theme development, controlling global settings, styles, colors, typography, layout dimensions, and more. Using the $schema reference enables auto-completion and validation in code editors.theme.json: theme.json provides initial configurations, while global styles (saved in the database) can override these. Individual block settings can further override global styles, establishing a clear order of precedence.theme.json and managed via the Site Editor's "Manage Theme Fonts" and color settings.index.html, page.html) and template parts (e.g., header.html, footer.html) are structured and stored is crucial. Changes made in the Site Editor for these can be saved to the database or exported back to theme files.patterns folder) for theme-exclusive use. Dynamically referencing theme assets (like images) within patterns is important.theme.json under the styles.blocks section.theme.json file, streamlining development.To create a functional WordPress block theme manually, you need the following minimum files:
style.css: This file must contain at least the theme name for WordPress to recognize it as a theme.theme.json: This file defines the theme's configuration, settings, and styles. Even a basic structure with a schema reference is necessary.index.html: Located in the templates folder, this serves as the main fallback template.header.html and footer.html: Located in the parts folder, these define the header and footer template parts.index.php: A blank file in the root of the theme folder to prevent direct directory access.The $schema property in theme.json offers several key benefits to developers:
$schema property pointing to the official WordPress schema URL, code editors (like VS Code) can provide intelligent autocompletion suggestions as you type. This means you get real-time suggestions for valid properties, attributes, and their structure.theme.json file. This helps catch syntax errors or incorrect property usage early in the development process.theme.json structure and capabilities.The hierarchy of style precedence in WordPress block themes, from highest to lowest (meaning the settings that take priority), is as follows:
Individual Block Settings: Styles and settings applied directly to a specific block instance within a post or page have the highest precedence. If a user customizes a block's color, padding, or typography directly in the editor, those settings will override any other defined styles for that particular block.
Global Styles: These are styles that are applied across the entire site, often managed through the Site Editor's "Styles" interface. Global styles can override the default configurations set in theme.json. For example, if theme.json defines a default button style, but the user sets a different button style in Global Styles, the Global Style will take precedence.
theme.json Settings: This file, provided by the theme developer, sets the foundational styles and configurations for the entire site. These are the base styles that are applied unless overridden by Global Styles or individual block settings.
In summary, the order is: Block-specific settings > Global Styles > theme.json settings.
The recommended method for including images in theme patterns to ensure they are dynamically sourced from the theme folder involves a few key steps:
Place the Image in the Theme Folder: Store your image file within a dedicated folder inside your theme. A common structure is assets/images/your-image-name.jpg.
Use a PHP Function in the Pattern File: When creating your pattern file (e.g., title-banner.php within the patterns folder), you need to reference the image using WordPress's built-in functions that dynamically retrieve theme file URIs.
Employ get_theme_file_uri(): Inside your pattern's PHP code, use the get_theme_file_uri() function to generate the correct URL for your image. This function ensures that the path is relative to the active theme's directory, regardless of where the theme is installed.
Here's an example of how you would use it within your pattern's PHP file:
<?php
/**
* Title: Title Banner
* Slug: your-theme-text-domain/title-banner
* Categories: banner, featured
*/
?>
<figure>
<img
src="<?php echo esc_url( get_theme_file_uri( 'assets/images/your-image-name.jpg' ) ); ?>"
alt="Description of the image"
/>
</figure>
Use esc_url() for Security: Wrap the get_theme_file_uri() call within esc_url() to sanitize the URL and prevent potential security vulnerabilities.
Remove Static IDs: If you've copied code from the Site Editor, make sure to remove any static id attributes from image or container elements that might be tied to the specific site's database rather than the theme's structure.
By using get_theme_file_uri(), you ensure that the image path is always correctly resolved relative to your theme, making your patterns portable and reliable across different WordPress installations.