In this post, we’ll discuss why you should create a custom 404 page. ⚙️ Then we’ll talk about what to include on your page, and provide some examples. Finally, we’ll show you how to set a 404 page in WordPress. Let’s get started!
📚 Table of contents:
Why you should set a 404 page in WordPress
Before we show you how to set a 404 page in WordPress, let’s go over the basics. That means discussing what a 404 error page is and why you should create a custom one for your site.
A 404 page is also known as the “page not found” error. You’re likely familiar with it:
When a user encounters this common error page, it means there’s an issue with the URL path to the domain they are currently trying to access. This can happen for several reasons, including server issues or broken links.
As you probably know from experience, seeing this page can be very frustrating. It prevents visitors from completing important tasks or finding the content they need.
What’s even worse is that the 404 error page doesn’t specify whether the issue is temporary or permanent. It also doesn’t provide the root cause. This leaves the visitor in the dark, and makes it easy for them to choose to navigate elsewhere rather than trying to diagnose the problem themselves. The most important issue, however, is that many standard 404 pages don’t help the user navigate somewhere useful.
Although any error will tarnish the user experience, the damage can be minimized when you guide visitors back to the right place in a streamlined fashion. You can achieve this by creating an optimized and user-friendly 404 page for your site.
What to include on a 404 page (plus two examples)
Now that we’ve gone over the benefits of making a 404 error page in WordPress, let’s discuss what you should include when creating yours. This way, you’ll be better equipped to design a high-quality 404 page for your visitors.
When a user encounters a 404 page, they are essentially lost. They have run into an obstacle when attempting to find a specific page. A generic 404 page can further confuse them, leading them to believe your website is broken, or they’ve left the site altogether.
With that in mind, you’ll want to make sure to display branded elements on the page so it’s clear that the visitor is still on your site. For instance, you could include your logo, mascot, brand colors, and even signature fonts.
The above is an example of a branded 404 page. As you can see, it includes the company logo (a parrot next to the company name), and a fun image that goes along with its brand personality (a pirate). You can even suggest some helpful links to guide the user to the right place, and keep them on your site for longer.
Additionally, if you want to make it easy for users to find the page they are looking for (or the next best thing), it’s wise to add a search bar.
By making the search feature prominent, it’s easier for the user to navigate where they wanted to go. The above page demonstrates this, along with offering a fun and casual tone that aligns with the brand. These are important details if you want to create a consistent user experience.
How to set a 404 page in WordPress
Now that you know what to include, let’s go over how to set a 404 page in WordPress! While you could create one manually, there are two easier methods that will get your page up and running quickly.
Option 1: Set a 404 page using the Site Editor 🚧
The easiest way to create a 404 page in WordPress is using the Site Editor. To access it, you’ll need to use a block theme.
For this tutorial, we’ll use the Neve FSE theme. Most block themes, including Neve FSE, come with a template for the 404 error page. Since we’ll be customizing our 404 page, however, we’ll also install the Otter Blocks plugin.
After you install and activate Otter Blocks and a block theme, go to Appearance → Editor. Select Templates and choose Page: 404.
Note: If you don’t see the Editor tab under Appearance, it’s because your WordPress version is too old, or you’re not using a block theme that supports the WordPress Editor.
Click on the right side of your screen or on the pencil icon to open the page template with the Site Editor.
As you can see, this page already matches your theme so that it looks cohesive with the rest of your site. Still, you’ll want to make some adjustments to improve it.
First, we’ll add a Search block. You can also include a Return to homepage button or remove that option if it seems too cluttered.
Now, let’s make our page more fun by adding an animation using Otter Blocks. Search for “animation,” and you’ll find the Lottie Animation block.
Next, sign up for a free LottieFiles account. Search “404” in the LottieFiles library to find an animation you like.
Click on the animation to edit its settings.
When you’re ready, click on Save to workspace to generate. Then you’ll be able to open a more sophisticated animation editor.
You can make additional modifications, or simply click on Share → Handoff & Embed.
Copy the asset link. Return to your 404 page and paste it into the Insert from URL field.
You can then tweak animation settings – like triggers, loops, and speed – in the Block tab.
We’ll make ours smaller and centered. Then, we’ll adjust the text to match our brand’s tone and the new design.
Finally, be sure to save and publish your changes. This will make your new 404 page live for any visitors who encounter this particular error.
Option 2: Setting a 404 page using a page builder 🏗️
Next, we’re going to show you how to set a 404 page in WordPress using a page builder. This is useful if you don’t have a block theme or if you’re already using a particular page builder tool on your site.
For this example, we’ll use Elementor. First, you’ll need to install a theme that’s compatible with Elementor. Go to Plugins → Add New Plugin and search for “elementor.”
Locate the Elementor plugin and click on Install Now, followed by Activate.
If you’re using a free version of Elementor, you’ll need to start from scratch. Go to the Templates screen and click on Add New Template.
Then, in the resulting pop-up, choose the Page template option and give it a name. After that, hit Create Template. This will launch the Elementor editor.
Here, you can drag and drop Elementor widgets onto the page to create your design. You can see your widget options under Elements. Note that some widgets are exclusive to the premium version of the tool.
We’ll start by adding a Text Editor widget. You can add some text and then adjust the alignment in the Style tab.
Since the free version of Elementor doesn’t include a search widget, we’ll add a button to the page for easy navigation.
In the Content tab, you can change the button’s text and alignment, add a link, and more. Your button’s color should match your theme by default, but you can also modify it in the Style tab.
At this point, your draft 404 page might look something like this:
Now you can add more widgets and continue creating your custom design. Don’t forget to incorporate your branding elements as well. When you’re finished, hit Publish.
Conclusion 🧐
Every website should have a strategy in place to alleviate the negative effects of error pages. That’s why knowing how to set a 404 page in WordPress is essential. To ensure a strong user experience, it’s also best to customize this page to match your site’s branding and tone.
To recap, there are two straightforward ways to create a custom 404 page in WordPress. You can use the Site Editor, and a tool like Otter Blocks, to spruce up your custom design. Alternatively, you might try a page builder like Elementor to build a 404 page from scratch. The best method for you depends on the tools you already have installed, and your preferred page editor. 👨💻
Do you have any questions about how to set a 404 page in WordPress? Let us know in the comments section below!
Keep reading the article at CodeinWP. The article was originally written by John Hughes on 2024-01-09 07:00:00.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.