Ollie Theme Academy

Implementing Styles

Creating a section style

Section styles are implemented as JSON files in your theme’s /styles directory, following the same structure as theme.json but with additional metadata for section-specific functionality.

Start with the basic structure: schema, version, title (displayed to users), slug (unique identifier), and blockTypes array (which blocks can use this style). You must include actual styles or the section style won’t appear in the interface.

Build styles from outside to inside, least specific to most specific. Style the container block first (background, padding, borders), then element styles for common HTML elements within that container, then specific block overrides as needed.

Use WordPress preset variables (var:preset|color|primary) to reference your design tokens, ensuring section styles integrate properly with your overall design system. This approach maintains consistency while allowing for sophisticated visual treatments.

Back to: Ollie Theme Academy > Implementing Styles