Blog

Designing a theme in the WordPress Editor

Thanks to WordPress 5.9 and the evolution of Full Site Editing, it’s possible to design a fully-featured theme using just the Site Editor.

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:

  1. 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.
  2. Create some demo content.
    Create three or four posts so you can see what they will look like listed in your index template.
  3. 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.
  4. Use spacers, paddings, block spacing or margins.
    These tools help you create an open, spacious design.
  5. Make use of group blocks.
    There are some occasions where it may make sense to group blocks, to organize template elements more neatly.
  6. Use the row block.
    The row block’s “space between” setting is a great tool for navigation layouts.
  7. 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.
  8. 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.
  9. 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.

By Beatriz Fialho

Comments

I realize this blog speaks to the larger WP community and perhaps this isn’t the place to post this. However, as a long-time WordPress.com member, I look forward to more variety in the prêt-à-porter themes available to us. Once you get past the static homepage, the current lot all have a sameness that belies these new capabilities. It’s important to remember that not everyone has the desire or time to invest in learning how to use FSE to create a custom theme to fit their needs.

Thank you for your feedback! We’re actively working to introduce more variety to the themes available on WordPress.com, so keep your eyes out for upcoming launches.

Comments are closed.