How to customize a WordPress website design
You can customise a WordPress website through Appearance > Editor with a block theme, or Appearance > Customize with a classic theme. The built-in tools are fine for most changes; use a child theme or a design-focused theme when you need deeper layout changes without losing them during updates.
- 01Back up before changing the design
- 02Check which editor your theme uses
- 03Use WordPress's built-in design tools
- 04Rebuild the page structure carefully
- 05Add custom CSS without losing it
- 06Use a ready-made theme starter
What you need
- Administrator access to WordPress
- A recent site backup or staging site
- Your logo, brand colours, fonts and images
- A clear list of pages and layout changes
Back up before changing the design
Create a backup before changing the active theme, editing templates or adding CSS. A theme controls presentation and can also provide layout features, widget areas and other behaviour, so a design change can affect more than colours and fonts.
Do not edit the parent theme's files directly. Those edits can be overwritten by a theme update. If you are changing theme files, use a child theme or keep the changes in a version-controlled development copy instead.
Check which editor your theme uses
Open Appearance in the WordPress dashboard. If you see Editor, your site uses a block theme and you can edit global styles, templates, headers, footers and navigation there. If you see Customize, your classic theme uses the Customizer for its available design settings.
The menus vary by theme. A block theme may not show Customize or Widgets because those controls have been replaced by the Site Editor.
Use WordPress's built-in design tools
With a block theme, go to Appearance > Editor > Styles to change site-wide colours, typography and layout. Use Templates for page types such as the home page, single posts, search results and 404 pages. Use Patterns or template parts for reusable areas such as the header and footer.
With a classic theme, go to Appearance > Customize. Work through the options provided by the theme, such as Site Identity, colours, menus, widgets, homepage settings and Additional CSS, then preview desktop and mobile views before publishing.
Rebuild the page structure carefully
Change the design in this order: site-wide styles, header and navigation, page width and spacing, content sections, sidebar or footer, then individual pages. This prevents you from fixing the same spacing or font rule repeatedly.
Remember that a header, footer or template-part edit can apply across every page that uses it. Save after each major change and check the front end, not only the editor preview.
Add custom CSS without losing it
Use Additional CSS for small visual adjustments such as margins, borders or a specific colour. Give blocks useful CSS classes in their Advanced settings when you need to target one element rather than every heading or button.
Keep a copy of your CSS outside WordPress. Avoid placing custom CSS or PHP directly in a parent theme, because a later update can replace those files. If a theme update changes its HTML classes, your CSS may also stop applying even though the code is still saved.
Use a ready-made theme starter
The fast route is to install a theme with the layout controls and templates you already need, then replace its demo content with your own. Fortuna is a suitable all-in-one option when you want multipurpose layouts, typography controls, header and footer variations, page-builder support and WooCommerce compatibility.
Install the theme through Appearance > Themes, preview it before activation, then use its customisation options and import tools. Check menus, widgets, forms, shop pages and mobile layouts after activation: content usually remains in WordPress, but theme settings, widget areas, headers and navigation may need reconfiguring.
Let Fortuna do it
Multipurpose layouts, typography, headers, footers, and WooCommerce support; choose it for an all-in-one site starter.
Sources
- wordpress.org /documentation/article/work-with-themes/?utm_source=openai
- wordpress.org /documentation/article/site-editor/?utm_source=openai
- wordpress.org /documentation/article/customizer/?utm_source=openai
Questions
- Can I customise a WordPress website without coding?
- Yes, most WordPress design changes can be made without coding. A block theme lets you edit styles, templates, headers, footers and navigation in Appearance > Editor, while a classic theme exposes its own controls in Appearance > Customize. You may need CSS or a child theme for changes that the active theme does not provide as settings.
- Why is Appearance > Customize missing in WordPress?
- Appearance > Customize is usually missing because the active theme is a block theme. Block themes use Appearance > Editor instead, where Styles, Templates, Patterns and Navigation provide the design controls. The exact options depend on the theme, so changing themes can also add or remove Customizer, widget and layout screens.
- Will changing my WordPress theme delete my content?
- Changing a theme normally does not delete your posts, pages or media because that content is stored separately from the theme. However, menus, widgets, theme settings, header and footer layouts may need rebuilding, and block-theme templates are replaced by the new theme's templates. Take a backup and use a staging site before switching a live site.
- Should I use a child theme for WordPress design changes?
- Use a child theme when you need to modify theme files or override templates and want those changes preserved when the parent theme updates. For simple colour, spacing and font changes, the Customizer's Additional CSS or the block editor's style controls are usually easier. Do not make direct edits to the parent theme if you expect to install updates.