You can create, view, edit, and trash pages in the Site Editor. This means you can access your pages from the Pages area in the Dashboard or from within the Site Editor. As pointed out, pages are used to add content and templates create a page’s layout (header, footer, sidebar etc.)
In Site Editor, you can edit both the page content and a page’s template. Content to a page is added to the Post Content block. If you are editing a page’s content in the Site Editor, you can’t modify the header and the footer because the template is locked until you enable the template editing option.
When you access pages in the Site Editor, you will also find the page details like information about the page status (for example, if a page is a draft or published) when the page was last updated, the number of words on the page, and how long it will take to read.
How to access Site Editor Pages
Once you install and activate a Block theme on your site, go to Appearance > Editor to open the Site Editor. In the sidebar menu, select Pages:
Sidebar features
When you select Pages, WordPress shows a sidebar with a list of pages, page-related shortcuts, and an option to create new pages.
You will find your site icon or the WordPress logo at the top of the sidebar. Clicking on this image takes you back to the WordPress dashboard.
Next is your site title and a button that opens the Command Palette. You will recognize the Command Palette button by the icon of the magnifying glass. You can select the back button if you want to go back to the main Site Editor menu.
Page list
The page list includes all pages on your site that are either published or drafts. Each page in the page list is represented by an icon. Your front page uses an icon of a house. If your site shows blog posts on a separate page, the blog page uses an icon of a feather pen.
Clicking on the page title opens the page and the page details sidebar.
Shortcuts
At the bottom of the sidebar are links that help you edit your site faster: Links to the 404-page template, the Search Results template, and Manage all pages, which takes you to the Pages screen in the WordPress admin.
The page details sidebar
This sidebar displays the name of the chosen page, a preview link for the front of the website, the featured image (if one exists), and a description.
Page details:
- Status – Draft or publishing date
- Slug
- Template – The name of the template that the page uses
- Words – The number of words in the content
- Time to read
- Last modified
The blog page details sidebar
Different types of pages show different details in the sidebar. When you select a page that displays the latest posts, you can update settings related to your blog directly in the sidebar. You can:
- Edit the page title
- Select the number of posts per page
- Allow or disallow comments
There are also two shortcuts to editing your site header and site footer.
Create new pages in the Site Editor
You can click the plus icon on the Site Editor Pages sidebar to draft a new page. Selecting this button opens a new modal where you can add an optional page title:
Selecting the Create draft button in the modal creates a new draft and redirects you to the screen where you can edit the new page.
Edit pages in the Site Editor
To start editing a page in the Site Editor, click anywhere in the preview window or select a page from the Pages menu and click the pen icon.
When you edit pages in the Site Editor, you can see your page content in the template. Depending on the template, you may see your site header, the page content, and your site footer. Content is added to the Page Content block:
In the top right corner is a save button, a toggle button that opens the settings sidebar, a button that opens the Styles interface, and an options menu.
The page settings tab has four panels:
- The page title
- A summary panel with information about the page status and the publishing date.
- The content panel lists the editable blocks, such as the title and post content blocks.
- The template panel shows the name and preview of the current template.
Status:
You can use the status option in the summary panel to change the page to a draft, schedule it, or add a password:
Publish:
You can use the publish option in the summary panel to change the publishing date of the page. You can enter a date and time using the input fields or select a date from the calendar. You can use the arrow buttons to change the month of the calendar.
Locked blocks
Certain blocks are locked in the template and can not be selected without enabling the Edit template option. This prevents accidental editing of the template.
The blocks in the content panel in the settings sidebar can be edited, but not moved or deleted. These blocks can be selected, but do not have a block toolbar. Clicking on a block in the content panel selects the block in the editor.
In the example image below, the content panel includes a Post Featured Image, the Title block, and the Post Content block.
- Selecting the Post Featured Image block will let you upload or add an image from the media library, but you can not remove the block. You can only remove this in the template.
- Selecting the title block will let you change the page title. But you can not change the title’s color or font size. You can only remove this in the template.
Blocks that are placed inside the Post Content block are editable. You can add new blocks, edit, move, and remove blocks. These are the same blocks that you would see in the block editor when editing the page.
In this example image, the editable blocks are the paragraph and quote blocks:
Enable template editing
When you click on a block in the template, WordPress shows a notification in the bottom left corner that says: Edit your template to edit this block.
You can also enable template editing by selecting the “Edit template” button in the template panel in the settings sidebar.
Now, you are redirected, and you can make changes to the template. To go back to the page, you can use the back button above the editor, click on the WordPress logo or site icon in the top left corner, or the Command Pallette discussed at the start of the course.
In the final lesson, we will take a closer look at patterns, including header and footer template part patterns.