Block Theme Structure

A WordPress block theme folder contains various subdirectories and files that define the theme’s appearance and functionality. Here’s an overview of the typical contents you will find in a block theme folder.

Click the box below to see a diagram of how the Ollie block theme (and many block themes like it) is organized, which is notably different from classic WordPress themes.

Ollie 
|-- /parts
|   |-- header.html
|   |-- footer.html
|   |-- sidebar.html
|
|-- /patterns
|   |-- header-dark.php
|   |-- footer-light.php
|   |-- page-home.php
|   |-- ...
|
|-- /templates
|   |-- index.html
|   |-- single.html
|   |-- page.html
|   |-- ...
|
|-- /styles
|   |-- creator.json
|   |-- startup.json
|   |-- studio.json
|
|-- /assets/styles
|   |-- core-button.css
|   |-- core-columns.css
|   |-- core-navigation.css
|   |-- ...
|
|-- functions.php
|-- index.php
|-- screenshot.png
|-- style.css
|-- readme.txt
|-- theme.json

Theme.json

The theme.json file in WordPress block themes is a powerful configuration file that allows theme developers to define global styles, settings, and block-specific configurations.

This file enhances the customization capabilities of themes, enabling both developers and users to control the appearance and behavior of blocks across the site from with in the WordPress site editor.

The theme.json file is an essential component of modern WordPress block themes. It provides a centralized, standardized way to define and manage global styles, settings, and block-specific configurations.

In the WordPress editor, you can change all of the styles defined in theme.json in the global styles panel.

Templates

Templates are the foundational files that define the layout of different types of pages on your WordPress site. Templates are stored in the /templates folder and are defined with an HTML file.

Each template file corresponds to a specific type of content or page, such as a single post, a page, an archive, or the homepage. Ollie’s template files include:

• index.html: The default template used when no other template matches.
• single.html: The template for individual posts.
• search.html: The template for displaying search results.
• page.html: The template for static pages.
• archive.html: The template for archive pages like category or tag archives.
• 404.html: The template for 404 error pages.
• page-no-title.html: The template for building full pages with pattern sections. This template removes the page title and lets the content go full width.
• page-with-sidebar.html: The template for adding a sidebar to the standard page design.

In the WordPress editor, you can edit templates and create new ones by going to Appearance → Editor → Templates.

Template parts

Template parts are reusable sections of a theme, allowing you to break down templates into smaller, modular components. Template parts are stored in the /parts folder and are defined with an HTML file.

These parts can be used across multiple templates, ensuring consistency and easier maintenance. Common template parts include:

• header.html: The header section, typically containing the site logo, navigation menu, and other top-of-page elements.
• footer.html: The footer section, which usually includes copyright information, links, and other bottom-of-page elements.
• sidebar.html: The sidebar section, which can contain widgets, links, or other supplementary content.

In the WordPress editor, you can edit template parts by going to Appearance → Editor → Patterns → Template Parts.

Patterns

Patterns are predefined block layouts that can be inserted into pages or posts. They help users quickly create complex layouts by providing a starting point that can be customized. Patterns are stored in a /patterns directory and are defined using PHP files. Each pattern file typically includes:

• Pattern header: A header area that defines the pattern name, description, categories, and how the pattern should work inside WordPress.
• Pattern content: The block markup that makes up the pattern design.

In the WordPress editor, you can view and manage patterns by going to Appearance → Editor → Patterns.

Style variations

Style variations define the visual appearance of the theme, including colors, typography, and other design elements. These styles can quickly change the overall look of your site, ensuring a consistent look and feel. Styles can be found in the /styles directory. Each style file typically includes:

• theme.json: A JSON file that defines global styles and settings for the theme, such as color palettes, font sizes, spacing, and block settings. This file allows for greater customization and control over the theme’s design directly from the WordPress editor.

In the WordPress editor, you can view and change style variations by going to Appearance → Editor → Styles.

Block styles

Block styles are predefined styles that are applied to individual blocks. These styles are included in Ollie to provide consistent and customizable designs for various blocks used in the WordPress editor.

Block styles can be found in the assets/styles directory, and are only loaded on your page when the associated block is used.