Personalizing your 404 Template

In today’s session, we are going to look at how we can personalize our 404 template when using a block theme. A 404 page is also known as an error page or page not found.

Learning outcomes

1. Explain the aim and characteristics of an effective 404 page.
2. Access and modify the 404 template of your block theme.
3. Create a custom 404 page using a Cover block.
4. Design a custom 404 page using a pattern.
5. Clear customizations.

Comprehension questions

1. What are the dangers of a dull 404 page?
2. Do you need to use a plugin to create a 404 page?

Resources

• Creating the 404.php file

Transcript

Hi, and welcome to Learn WordPress. In today’s session, we are going to look at how we can personalise our 404 template. A 404 page is also known as an error page or page not found. It is the content a user sees when they try to reach a non-existent page on your website. Most people who land on a default 404 page will probably leave your site immediately. An unattractive or unengaging 404 page leads to poor user experience; it increases the bounce rate of your site and will, therefore, negatively impact your SEO.

The quicker you can lead a visitor to the right place, the better, as this example. If you create an engaging 404 page, you will hopefully ensure that visitors stay and delve deeper into your site. It is, therefore, important to create a custom 404 page and think of ways you can draw a visitor’s attention or even use humour. I love this example from Pixar, as it just makes you smile. I also think Tendrik got it right by using an attention-grabbing image, humour and a Go to home page button.

Now I would like to show you two different ways that you can create a custom 404 page. In the first example, I’m going to use a Cover block, and in the second example, I will use patterns. At the moment, I’ve selected the default 404 template with my header, footer, and then the 404 message. To change that, let’s make our way to the dashboard, hover over Appearance and then click on Editor. This will take you to the Site Editor where you can edit templates, click on the site icon or WordPress icon, open templates and select the 404 template.

In this example, I’m going to use a Cover block to create a new 404 page so open your List View and remove the header, the group and the footer. And now add your Cover block and select the relevant image from your Media Library. Next, enlarge the Cover block and then insert a Columns block with two equal columns. On the right-hand side, add a Navigation block and select a menu that you’ve created, and change the alignment to right. In the left column, I will firstly add a Heading block and then I will write the message Keep calm and make sure to check your oxygen levels. Below that we are going to add a Buttons block and write Go to the home page as we want to direct people back to our website. Make the text bold and change the background colour to white and the text to black. Then we can change the border radius of the Buttons block to 100 pixels to give it a rounded style. Thereafter, I’m going to insert a Spacer block. So once I’ve added the Spacer block, I’m going to enlarge it to push the information on the left to the bottom and the Navigation block to the top of the page.

The next step is to select your Navigation block and to use your sidebar settings to change the size to large. Lastly, I will open up the List View to ensure that I select the Cover block and then change the padding of the block to 120 pixels to make sure I add more space around the text. When I close the List View and sidebar settings, I can see that the Spacer block needs to be enlarged slightly more. And then once you click Save we can make our way back to the front end of the website, refresh the page, and here you have your new custom 404 page created by using the Cover block. If you’re not happy with your changes you can go back to templates and click on the three vertical dots next to the 404 template and select Clear customizations. And now if you open up the 404 template, you will notice that it has reverted back to its original state.

In the next example, we are going to use patterns to create a custom 404 page. So once again, I will open the List View and remove the header, group and footer. Next, I’m going to make my way to wordpress.org/patterns., and in this case, we are after a 404 pattern and once you find the pattern that appeals to you, you can merely copy and paste it into your page or template. I really like this design, but I also want to add some more elements to the pattern.

Firstly, I’m going to highlight the text below the 404 heading and change the size to 30 pixels. Then I’m going to add a Spacer block and change the height to 40 pixels, and below that, I will add a Buttons block. I will add the text Take me home, make the text bold, change the alignment to centre, change the background to black and the radius to 100 pixels. Below that, I will add another Spacer block, change the height to 40 pixels and then add a Search block below the Spacer block. Once I’ve added the Search block, I will change the search button to display the search icon or magnifying glass and change the background colour to black, and the radius of the block to 100 pixels.

Lastly, I will use my List View to ensure that I select the entire group, click on the three vertical dots and select Insert after. Now I would like to add a footer to finish my design off. So once I’ve selected the Footer block, I will look for a pattern that appeals to me. And the one I’m after is called Footer with social links and copyright. Once inserted, I would like to change the background colour of the Footer block to the same as the pattern above. So to do that, I will select the parent group, go to background colour, click on custom and copy the hex code of the colour used. And now, I will click on my Footer block, go to background colour, click on custom and then paste the hex code that I just copied. And now the Group block and the Footer block have the same colour.

Next, I’m going to open up my List View, click on social icons and insert a paragraph before. Then I will add my Navigation block and select one of the menus that I’ve already created and change the alignment to centre. And right at the bottom, I will add my site title and change the alignment to centre. And lastly, I’m going to select the 404 pattern as well as the footer pattern and stack them together to create that space in between. Once saved, we can make our way to the front end of the website. You see our 404 page in action and all thanks to patterns.

If you’re using a theme that does not provide a built-in 404 template, you will have to create a 404.php file and add it to your WordPress theme folder. I hope you enjoy personalising your own 404 template, and visit Learn WordPress for more tutorials and training material.