How to build custom WordPress themes visually

Start with a block theme if you want to design the header, footer, templates and styles visually. Go to Appearance > Editor; if the Site Editor is not available, the active theme is probably a classic theme and you will have fewer visual controls.

Use a classic theme only when you need its PHP template structure or an existing framework. A classic theme can still be styled visually with the Customizer and Additional CSS, but it is not a full visual theme builder.

Work on staging or make a complete backup before changing templates. Theme edits can affect every page, post and archive at once, so do not begin by experimenting on a busy production site.

Write down the page types you need, such as the home page, pages, single posts, archives, search results and the 404 page. This prevents you from polishing one screen while leaving the templates visitors actually use unchanged.

Open the Site Editor and set the site-wide colours, typography, spacing and layout widths before designing individual pages. Global styles are intended for these shared settings, while theme.json can define the theme’s structured settings and styles when you later move the work into files.

Keep the palette and type scale small. If you override each block separately, later global changes become slow and inconsistent.

In Appearance > Editor > Templates, edit the layouts for the page types you listed. Create the header and footer as reusable template parts, then use them wherever the same structure is needed. Add patterns for repeatable sections such as hero areas, testimonials and calls to action.

Remember that a template controls a page type, while a template part controls a repeated region. A common mistake is editing a page’s content and expecting the change to alter the site-wide header or footer.

Check the design at narrow and wide screen sizes, then preview posts, pages, archives, search results and the 404 page. Confirm that the Site Title, Navigation, Query Loop, Post Content and Featured Image blocks still have content to display.

If a template change appears not to work, check whether an edited version has been saved in the database. WordPress can keep a customised template as a site-specific version instead of immediately showing later changes made in the theme files. Reset or update the saved template deliberately rather than repeatedly changing the same file.

When the visual design is ready, use the Site Editor’s export option to download templates, template parts and style settings. Keep that export with your project and test it on a clean staging site before treating it as a reusable theme.

For a production theme, you may still need to refine the exported files, add custom PHP, register assets, handle plugin integrations and check accessibility. If you are building a classic theme, WordPress expects the main style.css file in the theme’s root directory, not inside a subfolder.

If the Site Editor is too restrictive but you still want to work visually, Pinegrow is a practical faster route for developers who need direct HTML and CSS editing. It is better suited to shaping a custom theme structure and responsive styling than a simple drag-and-drop page builder.

Use it after you have decided the templates and content structure, then test the resulting theme on staging. The fast route saves time on visual layout work, but it does not remove the need to check WordPress template behaviour, plugin output, responsive layouts and accessibility.