This tutorial is the second in our series about creating & editing pages using the WordPress Blocks editor. It follows on from Part 3: Working with Attachments.
By now, we have looked at all of the most common content types on basic pages. This tutorial will look at the final steps in creating a page; setting up page attributes and other properties, publishing, and taking a look at our completed work.
To begin, we’re going to click the “Save Draft” link, located at the right side of the top toolbar. WordPress has been makes “autosaves” as we work, but we want to make sure it records our most recent changes before we get started.
So far in these tutorials, we have been using the right-hand sidebar to change the properties of our various content blocks, the the “Block” tab. Now we want to change properties for the entire document instead, so we will click the “Document” tab to switch over.
Permalink and URL Slug
First we’re going to look at the Permalink section. Here we see something called the slug, which is the last part of the page address (URL) that appears after our domain name. For example, if we visit this page by going to https://www.someplace.com/my-new-page, the slug is “my-new-page”.
When we first save our draft, WordPress fills in the slug automatically. By default, it’s the same as our title field, except for some special characters (like spaces) that are not allowed in URLs. WordPress will replace or remove these characters.
If we like the automatically-generated slug, we don’t have to make any changes. However, what if we want to choose a custom slug? Our title could easily be a bit too long to work in a URL. In this case, we can type some other text in the “URL slug” field.
As with the automatic slug, WordPress has replaced or removed any illegal characters, to make sure our permalink is valid.
Next, we’re going to look at the Page Attributes section. Here we have a couple of useful properties that help us control the layout and organisation of our pages. (If the section is collapsed, we can just click on “Page Attributes” to expand it.)
First, we can select a Template for our page. A template is a “shell” for our content, provided by the theme, that determines its layout relative to the other elements of the site (menus, sidebars and so forth). For example, many themes provide a default template for a layout with a sidebar, and a specialised template for a full-width layout.
Note: The templates available, and the layouts they provide, depend entirely on your theme. If you don’t see the “Template” drop-down box at all, your theme probably doesn’t support templates.
If we want to choose a different template from the default, we can simply click on the “Template” drop-down box and select the template we want to use.
Next, we will decide whether this page should have a Parent.
Page parents provide a way to organise our site’s content into a logical hierarchy. For example, if we have written a page about “Dogs” and then later add a page about “Dog training”, we might consider that the second page is really a sub-topic of the first. In that case, we could set the “Dog Training” page to have “Dogs” as its parent.
If we want to set a parent page, we simply click on the “Parent Page” drop-down menu and select the parent we want from the list.
Sometimes it’s hard to know if a page should have a parent or not. Often, it can help to organise our pages like chapters of a book. If we were to make a table of contents, how would we arrange things to help readers find what they were looking for?
We might also consider the number of pages. On a site with only a few pages, we may not need to worry about having a hierarchy. However, the more content we have, the more our visitors will appreciate the convenience of a logical content structure.
Finally, let’s look at a special field included in IT Wollongong themes, the Short Title. IT Wollongong have added this custom field so clients can give a short version of the title intended for navigation links, and other places where showing the full title might be impractical.
We don’t need to fill out this field, because the theme will simply display the full title if no short title is available. However, if we want our menus and breadcrumbs to look nice, we should definitely enter short version of our page title in this field.
Publishing the page
Now that we’ve set up our various attributes and properties, it’s time to publish our new page! Let’s click on the “Publish” button in the top toolbar.
Before our new page goes live, WordPress will offer a final confirmation and a couple of pre-publishing checks. This confirmation step can be quite handy on a live site, but we can also disable it in the future if we find it annoying.
WordPress presents us with a couple of options before we publish. Under the “Publish” setting, we can choose a specific date and time for our page to go live. This is great if we want to prepare content ahead of time for a specific event or promotion. However, normally we want to leave this at the default value of “Immediately”.
Secondly, we can restrict who will see our published page, using the “Visibility” setting. Normally we want our pages available to the public—that’s who we’re writing content for, after all! However, it’s very useful to have a private page where we can experiment with different ideas, especially while we’re learning. This is commonly called a “sandbox”.
A “private” page can only be seen by logged-in users, so it’s ideal for sandbox purposes. To publish privately, we would simply click on “Visibility” to see our options, then select “Private“.
Once we are satisfied with our pre-publish settings, we can click “Publish” again to confirm our choices.
Then, after a quick delay, our page is live! A green notification bar appears to tell us that publishing is complete. (If something has gone wrong, we will see a red error instead.)
We can also see that the “Save Draft” has been changed to “Switch to Draft“. If we make a mistake and need to “un-publish” a page, we can click this link to set it back to draft status.
Viewing Our Completed Page
Our first WordPress page is now complete! Let’s click the “View Page” link, in that green notification box, to see how it looks on the front end of the website.
As we can see, our content in the Blocks editor looks very much like it does on the front-end. Our theme has placed our content in the template we chose (in this case, the default layout with sidebar) to create a complete page on our website. We can also see how the Short Title and Page Parent are used, in the “breadcrumb” style navigation links just above the Title.
Now that we have completed our first WordPress page, we can go on to create other content pages that provide further information about our business and services. We can use these skills to create blog posts, too, since they also use the Blocks editor.
This concludes our beginner tutorial on creating & editing WordPress pages with the Blocks editor. We also some more tutorials to help you manage your WordPress site, including:
Have you come up against a problem you can’t quite tackle? IT Wollongong also provide WordPress training sessions to help you master your website. Contact Steve on (02) 4227 6630 to find out more!