WordPress Site Editor

The WordPress Site Editor

WordPress Site EditorIn this tutorial, you will learn about the WordPress Site Editor – a feature that allows block editor users to build and fully customize their site using blocks and a new styling system.

Refer to the following tutorials if you need help with this section:

***

What Is The Site Editor?

As described in this tutorial, WordPress has been moving toward a way of creating and designing websites made entirely out of blocks and block-based features like block themes, templates, and global styles called Full Site Editing (FSE).

For example, WordPress 5.9 included its first block theme, called Twenty Twenty-Two:

WordPress Twenty Twenty-Two theme.
The WordPress Twenty Twenty-Two theme is a block theme.

This theme is composed entirely out of blocks.

WordPress Twenty Twenty-Two theme - a block theme.
The WordPress Twenty Twenty-Two theme is made entirely out of blocks.

Block themes let you create entire pages or websites using blocks, and edit and customize all parts of your WordPress site without changing themes.

The Site Editor is a feature of block themes that allows block editor users to build and fully customize their site using blocks and a global styling system.

Some of the Theme blocks you can edit in the Site Editor include the following:

  • Navigation
  • Template Part
  • Site Logo
  • Site Tagline
  • Site Title
  • Query Loop
  • Post Title
  • Post Content
  • Post Date
  • Post Excerpt
  • Post Featured Image
  • Post Categories
  • Post Tags
  • Login/out
  • Page List

How To Access The WordPress Site Editor

You can only access the Site Editor if your site is using a Block theme.

To access the Site Editor and edit or customize your theme, go to Appearance > Themes and click on the Customize button…

Themes - Customize
Click on the Customize button to edit the theme.

Or by going to your admin menu and selecting Appearance > Editor

WordPress Menu: Appearance - Editor
Select the Editor submenu in the Appearance section of the admin menu to customize a block theme.

This brings you to the Site Editor and gives you access to its features.

The Site Editor.
The Site Editor.

Let’s go briefly over the features of the Site Editor:

Site Editor > Site

This is the main section of the Site Editor. After going to Appearance > Editor > Site, you can edit all parts of your site, quickly customize everything from your background colors to font sizes for all Heading blocks, navigate between templates, and more.

Site Editor - Site screen.
Make global changes to your site here.

Clicking on any section of this screen will bring up a block with options for editing that element. Most of the changes you make and save here will apply across your entire website.

Site Editor - Edit blocks in the Site screen.
Make global edits to blocks in the Site screen.

Site Editor > Templates

To access this section, go to Appearance > Editor > Templates.

Templates are groups of blocks combined to create a design for a webpage. You can create custom templates or use templates provided by your theme or a plugin.

When you make changes to a template, the editor updates the blocks on all pages/posts that use the template. A template for a post or page displays your content with the post content block.

Site Editor - Templates
Templates combine blocks to create your site’s web design.

For more information about using Templates, see this support article from WordPress: Template Editor.

Site Editor > Template Parts

To access this section, go to Appearance > Editor > Template Parts.

A Template part is a block for managing different areas of your webpage that help set the structure for reusable items like a Footer or Header. Template parts are primarily meant to be used for your site’s structure.

Site Editor - Template Parts
Template Parts are used to create your site’s structure.

For more information about using Template parts, see this support article from WordPress: Template Part.

How To Browse Between Templates And Template Parts

After going to Appearance > Editor, you will be taken to the template used by your homepage with the option to switch between different templates and template parts.

In order to switch what you’re currently viewing, simply click on the WordPress icon. You will then be able to select between going back to your Dashboard, your list of templates, your list of template parts, or back to editing what your home page displays.

Site Editor - How to manage templates.
How to manage templates.

How To Return To Your Dashboard

To return to your dashboard, click the WordPress icon to open the Site Editor navigation and then click on the Dashboard link. This will take you back to your site’s dashboard.

Return to Dashboard.
Click the WordPress icon and the Dashboard link to exit the Site Editor and return to your site’s admin area.

Site Editor > Styles

The Styles section was introduced in WordPress 5.9 and comes included in Block Themes. It lets you change site-wide settings with different colors, typography, layouts, and more. You can also change and adjust the site-wide appearance of blocks to ensure a cohesive experience across your site. For example, you can add your unique colors to a branded Button block or adjust the Heading block to your preferred size.

Styles Editor
Use the Styles Editor to create a cohesive look and feel throughout your website that matches your brand.

The changes you make using the Styles Editor affect your entire site. So, if you change the background color, this will change the background color of all of your posts, pages, and templates.

Your theme and WordPress itself supply various default settings to your site. Styles allow you to override these options with your own, so you can add your own custom colors to the color palette, change the layout controls, and more.

How To Access The Styles Editor

In the Site Editor, click on the Styles icon in the top-right section of the screen.

WordPress Site Editor - Styles feature.
You can toggle the Styles editor on and off by clicking on the Styles icon.

Clicking on the Styles icon toggles the Styles editor on and off.

You can use the Styles editor regardless of the template or template part you are editing.

Overview of the Styles Editor.
Overview of the Styles Editor.

Styles Features

Let’s go briefly through each of the main sections of the Styles Editor.

Typography

This section lets you manage the fonts used on your site and the default aspect of global elements like font-weight and line-height.

Styles - Typography
Styles – Typography

Selecting Typography gives you the option to edit both Text and Links and customize elements like the font family, font size (preset or custom size), line height, and appearance.

Styles - Typography
The Styles Editor gives you complete control over the typography elements of your site’s theme.

Colors

This section lets you manage color palettes and the default color of global elements on your site like the background color, text color, and link color.

Styles - Colors

How To Add A Custom Color Or Gradient

To add a custom color for use across your entire site, do the following:

Go to the Site Editor and open the Styles interface.

Styles
Click on the Styles icon.

Select the Colors section.

Styles - Colors
Styles > Colors

Select the Palette section.

Styles - Colors - Palette
Styles > Colors > Palette

Choose either the Solid or Gradient tab.

Styles - Colors - Palette - Solid or Gradient
Select either a Solid or Gradient color palette.

Under Custom, select the + button.

Styles - Colors - Palette - Custom
Add a custom color via the Styles > Colors > Palette > Custom menu.

Select and name your custom color option using the color tool. Note: Avoid choosing common color names (blue, green, etc.) when naming custom colors to prevent overlapping other common color names.

Styles - Add custom color.
Specify and name your custom color.

After selecting and naming your custom color, click Done, then click Save to save and update your settings.

Styles - Custom color
Create your custom color, then click Done, and remember to save your new settings.

Your new custom color option is now available for use throughout your site.

Styles - Custom color.
Your new custom color has been added to your Styles > Colors > Palette.

Layout

This section lets you add and adjust the global padding dimensions of your site’s layout.

To adjust the padding of your site globally, select a template section to work on (e.g. Header, Footer, Page, etc.), then click the Layout option.

Next, enter padding values into the Padding field:

  • Padding – Set padding values for your layout. Select a unit from the drop-down menu:
    • PX (Pixels)
    • EM (Font size) 
    • REM (Root em)
    • VW (Viewport Width)
    • VH (Viewport Height)
  • Link/Unlink sides
    • Link sides –  Set up uniform padding values for the left, right, top, and bottom sides of your template layout.
    • Unlink sides – Set up different padding values for the left, right, top, and bottom sides of your template layout.
    • Reset All – Resets padding values to default (no padding). Note: Select this option by clicking on the vertical ellipsis next to Dimensions.
Styles - Layout
Use the Layout section to add and adjust the padding on your site.

Blocks

Blocks

You can make global adjustments and customize the appearance of every block on your site to suit your needs in the Blocks section of the Styles Editor.

Styles Editor - Blocks section.
The Blocks section of the Styles Editor lets you customize the appearance of specific blocks for your entire site.

Each block has its own customizable set of options. For example, the Image block has options around Layout and the Button block has Typography, Colors, and Layout options.

Note: Any changes made will affect the default state of the block wherever it is placed on your site unless you have customized it individually. For example, if you set a custom color with an individual button block previously, the Styles that you set here won’t override those individually set colors.

More Global Styles Actions

To reset all Styles to their default settings, click on the vertical ellipsis icon in the Styles title section, then select Reset to defaults from the dropdown menu.

Styles - Reset to defaults
Reset all global styles to their default settings.

You can also access the Styles Welcome Guide from this menu…

Styles - Welcome Guide
Need a quick tour of the Styles Editor features? Open the Welcome Guide.

This will give you a quick overview of the features available in the Styles Editor and what you can do in this section. Click the ‘X’ to close the guide when done.

Styles - Welcome Guide.
Styles – Welcome Guide.

How To Update What Your Homepage DisplaysHow to update what your homepage displays

Your homepage can show a list of your latest blog posts or a static page with custom content. The setting you use depends on which templates are included in your theme.

To view the list of templates in your Site Editor, go to Administration Screen > Appearance > Editor > Templates.

  • If your theme does not have a Home or Front Page template, select the Add New button to create a new Front Page.
  • If your theme has a Front Page template, click on the link with the template name to open the editor.
  • If your theme has a Home template, you can edit the template or set what you want to display in Administration Screen > Settings > Reading.

So, for example, here’s how you create a new Front Page template…

Templates - Add New - Front Page
To create a new Front Page template, click on Add New and select Front Page.

Your new template will be added to the Templates section…

Templates - New Front Page template.
New Front Page template.

Clicking on the Template title opens up the template and allows you to edit and customize it. Note: Creating a new template gives you a blank page with only the Block Editor screen.

New Front Page template.
Begin adding blocks to create and customize your new Front Page page layout.

Use blocks to create and customize your front page.

Front Page template
Create your page using blocks.

You can preview how your page will look on different device screens by clicking the Preview button.

Template Editor - Preview
Preview your template changes as you work.

When you’re done creating or editing your template, click the Save button to update your settings. This section will list what changes were made to your site, templates, and content. You can also tick or untick the checkboxes in this section to enable/disable saving.

Site Editor - Save button.
View changes made to your site, templates, and content before saving.

After saving, visit your site to view your changes.

Front Page designed using the Site Editor.
A new Front Page designed using the Site Editor.

To return to the Site Editor and continue making changes to your templates, click on the Edit site button in the admin toolbar.

Admin toolbar - Edit site.
Click the Edit site button to return to the Site Editor.

You can also delete the template by clicking on the vertical ellipsis icon and selecting Delete template.

To learn how to select a static page for your homepage, see this tutorial: How To Set A Home Page For Your Website

How To Customize Your Home Page

Here is some additional information on customizing your home page:

How to customize your homepage

Latest Blog Posts

To customize your blog, go to Administration Screen > Appearance > Editor. The editor will open to your homepage, and you can start editing.

Block themes display lists of blog posts with the Query Loop block and the Post Template block.

When you add a block inside the Post Template block, it is repeated for every post in the list. The Post Title and Post Featured Image, Post Author, Post Date, Post Category, and Post Tags are examples of blocks that you can use to customize your blog.

Static Page

If you have selected a static page for your home page and you want it to have a different design than other pages, you need to assign it a different template.

To assign an existing template to your home page:

  1. From your WordPress dashboard, select Pages > All Pages.
  2. From the list of pages, select the option to edit the page you have set as your home page.
  3. In the editor screen, open the settings sidebar.
  4. Under Template, you can then select whichever Template you want your home page to use.
  5. When you’re done, select Update to save the changes.
Page - Templates
Select an existing template for your home page.

To create a new template for your home page:

  1. From your WordPress dashboard, select Pages > All Pages.
  2. From the list of pages, select the option to edit the page you have set as your home page.
  3. In the editor screen, open the settings sidebar.
  4. Under Template, select New.
  5. Name your new custom Template and click the Create button to go to the Template editor.
  6. Create, edit, and customize your new template in Template mode.
  7. When you’re done, select Update to save the changes.
Page - Template - Add New
Create a new template for your page.

Note: if you add a Front Page template in the Site Editor, it will always be used as the front page of your site regardless of which setting you choose under Admin > Settings > Reading. You will need to either customize this template to your liking or remove it to adjust the homepage settings again.

How To Update Your Site IconHow to update your site icon

Block themes include the ability to use the Site Logo block, which has a built-in option to set your Site Logo as your Site Icon.

Note: The Site Logo simply displays whatever logo you set for your site whereas your Site Icon is also known as a favicon and is used to help identify your website.

To learn more about using a favicon, see this article: How To Add A Favicon To WordPress

Follow the steps below to use the same image for the Site Logo and Site Icon:

  1. Go to Appearance > Editor. This will open up your homepage.
  2. Either find the Site Logo block added by your theme or add the block yourself. See this tutorial for help using blocks.
  3. After adding and clicking on the block, you’ll see the option to upload or select an image to use from your Media Library.
  4. Choose an image and with the Site Logo block selected, open the block settings sidebar (click on the cog icon).
  5. Under the settings for the Site Logo block, toggle on the option to Use as site icon.
  6. Save your changes.
Site icon
Add a site icon.

ToolsTools

The following are tools that might be helpful to explore when using the Site Editor.

Using List View

The List View allows you to navigate through a complexity of blocks, select the block you need, and easily view all the blocks that make up your content. It’s a helpful tool when editing your site.

List View
The List View helps you navigate between layers of content and nested blocks.

For more information about using the List View tool, see this tutorial: Block Editor – Toolbar 

Using Block Patterns

Block Patterns are a collection of predefined blocks that you can insert into posts and pages and then customize with your own content. While there are standard patterns you can use with any WordPress installation, they are also often bundled into block themes.

Go here to learn more: WordPress Block Patterns

Exporting Templates and Template Parts

Similar to the Tools > Export option, there is an option to export what you create from within the Site Editor. This will export your templates and template parts.

To export your templates and template parts:

  1. Go to Appearance > Editor to open the Site Editor.
  2. Select the three-dot menu next to the Styles and Block settings options.
  3. Under Tools, select Export.
  4. The export will begin and you will receive a downloaded zip file of your templates and template parts.

Additional Resources

Editing block themes and templates requires basic web design skills. If your site uses a block theme and you need help editing or customizing your theme or theme templates, ask your website developer, or refer to the external resources listed below for more information:

  • Template Editor – Allows block editor users to edit and create templates used in pages or posts.
  • Template Part Block – An advanced block that can be used with a block theme or a theme that supports template editing. These often come with your theme and are used to organize and display your site structure. You can only use them while creating and editing templates to manage blocks in areas repeated across the website. This block is best used to create areas like your site header and site footer. When you change blocks inside a template part, the editor updates the blocks on every block template that includes the template part.
  • WordPress Course – Simple Site Design With Full Site Editing – This course reviews the interconnected features of full site editing (FSE) in WordPress and how these are used to create site designs without using code.

Congratulations! Hopefully, now you have a better understanding of the WordPress Site Editor.

WordPress Site Editor
WordPress Site Editor

***

Print Friendly, PDF & Email

Terms Of Use | Privacy Policy

Scroll to Top