Our team’s process for designing a theme usually includes an initial phase of conceptualisation and moodboarding, followed by a few rounds of iteration in Figma. Eventually, we land on a solid set of mockups that we can work towards building along with the help of our development team.
This workflow has been changing recently, thanks to WordPress 5.9 and the evolution of Full Site Editing. We’re finding that it’s more and more possible to design a fully-featured theme using just the Site Editor, skipping that Figma step entirely. This takes us from a rough idea to a working theme in just a matter of hours, and doesn’t require opening a code editor at all.
That’s exactly what I showcase in the video below. The recording is sped up, but to give you an idea, it took me approximately two hours to customize the site. With upcoming tools in WordPress, you’ll be able to export a full theme directly from the Site Editor, allowing any WordPress user anywhere to install and use your creation.
Tips & Tricks
If you’d like to design in the Site Editor, here are some tips to help you get started:
- Install a block theme.
With a block theme, you’ll have access to the site editor, which will allow you to customize everything in your site. For the video, I used Blockbase, but you can use any of the block themes in the theme directory.
- Create some demo content.
Create three or four posts so you can see what they will look like listed in your index template.
- Build your templates and template parts.
Templates are the layouts of the pages of your site, and template parts are parts of those, such as headers and footers. You can build them from scratch or start with the theme’s templates.
- Use spacers, paddings, block spacing or margins.
These tools help you create an open, spacious design.
- Make use of group blocks.
There are some occasions where it may make sense to group blocks, to organize template elements more neatly.
- Use the row block.
The row block’s “space between” setting is a great tool for navigation layouts.
- Define your site’s global styles.
Global styles include your site’s typography settings and colors. You can also customize specific blocks: for example, if you want a quote block to always have a certain typeface or color, you can do that in this section of the global styles panel.
- Check how the site behaves in different screen sizes.
It’s always worth checking if text overlaps, breaks in weird ways or if there are any weird alignments. You can preview it here.
- Relish at your beautiful site!
It’s really exciting how much you can get done if you’re like me and want to develop a theme without touching the code as much as possible. With this new functionality, designers with no coding experience can design their own themes within the context of WordPress itself.