Introduction
Today we’ll be looking at how to create a custom 404 page using both Full Site Editing (FSE) and Gutenberg. This is an example of a 404 page that can be made.
You have to be using the. You will need to have installed:
- A FSE theme, such as Tove.
- The Gutenberg plugin
However, as soon as the beta of WordPress and WordPress 5.9 update comes out, you won’t need to use the Gutenberg plugin at all.
What Is a 404 Page?
A 404 default page is served up by your website when someone goes to a page that doesn’t exist. For example, if you incorrectly looked up a website in the Google toolbar, the page won’t exist, and you will be taken to a default 404 page instead, which will show an error message. Wikipedia describes how the website hosting server will typically generate a “404 Not Found” web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors encountered on the World Wide Web.
How to Customise a 404 Page in WordPress
In the past, customising a 404 page required a WordPress plugin or some custom code. However, with Full Site Editing, there are no plugins or coding needed. The steps we will go through may change in the future because the way FSE is implemented is still changing today.
There are two ways to start:
- Going to the admin toolbar, and clicking Edit Site
- Going to the WP dashboard and Appearance>Editor
This will take you to the FSE site. Click on the WordPress symbol at the top left corner, which will show you your base Templates. The Theme is broken down into Template Parts (Headers and Footers) and Templates (Page, Post, 404, and Index templates). Select the 404 Template to load in, and this will allow you to customise your 404 Page.
How to Edit the 404 Page Template
Editing the 404 page gives you the opportunity to:
1) Add your personal voice and personality to the 404 page
2) Add extra links or things of interest to your website visitors
3) Improve the design of the 404 page
4) Be creative
As it is FSE being used, the 404 page will be made out of blocks. Using the List View button, you can view all the blocks that are currently being used within your theme. Every theme will have its own kind of layout and design of how it’s going to look. You can change different aspects of the page, for example, changing the Page Title. You could also completely customise it. For example, you can delete every single element on the page and re-build it from scratch (we will be showing you how to edit the 404 Page Template using an example of a blank page and re-building it from scratch).
You can add a variety of different blocks to a blank page to give it a unique design. If you were to use a Cover block, for example, it would give you a background photo and allow you to write text over it (and you can customise either of these elements). With the Cover block, you can also change the photo Opacity to make the text become clearer.
Adding a Paragraph block to your page will allow you to write text. You could write a message such as “Oh no!” to show that it is clearly a 404 page, and edit this using the Block settings to change options, such as the Text Size.
Another block you could add is the Search block, which lets your readers search your site. This block can be customised by selecting the block and using the options at the top left of the page.
These options allow you to customise the Search block slightly by adding a search button, changing the Search button position, adding a placeholder, or switching the button alignment. However, you can also use the Block settings on the right side of the page to customise your Search block, which includes:
- Colour
- Border
- Display Settings (setting the block width)
- Custom CSS
- Advanced
Another useful block to dd to your 404 page is the Navigation block, which can be added within the Cover block. An easy way to do this is to add the block underneath and then push it up into the Cover block after. After searching and adding the navigation block, you can Select an existing menu. You can choose to move the block above and centre it.
You can again use the Block settings to change things like the Text Colour. Make sure to save the page to keep these changes. Clicking the Save button will prompt you over to the right to save the 404 page, so you should make sure this is ticked. After saving, you can test it out to see if it works by typing your website incorrectly into the Google search bar.
How to Revert Page Templates
Once you’ve created your custom layouts, and you want to change it back, you just click on the 404 dropdown option at the top of the page. It will give you the option to Clear customizations and will restore the template to the original theme default state.
Conclusion
Hopefully, this article has helped you to understand not only what a 404 page is, but also how to create and edit one in WordPress Gutenberg!
Leave a Reply