Ollie Theme Academy

Understanding Settings

What are custom properties?

Custom properties in theme.json are key-value pairs that WordPress automatically converts into CSS variables, ensuring they’re always available across your block theme.

Define custom properties under “settings > custom” using a nested object structure. WordPress transforms these into CSS variables with predictable naming: --wp--custom--your-key-structure with double dashes separating each level.

Organize your custom properties logically – create sections for typography, spacing, colors, or any other design tokens. Use kebab-case for keys (line-height-tiny) rather than camelCase to maintain consistent CSS variable naming.

These variables become available everywhere in your block theme – in theme.json styles, custom CSS, and throughout the editing interface. It’s a clean way to maintain design consistency and create a proper design token system.

Back to: Ollie Theme Academy > Understanding Settings