Are you hoping to create custom 404 error pages that will keep users on your site? While error pages are usually the last place you want visitors to end up, you can easily turn them into positive experiences.
One of the best ways to do this is to create a fully-custom error 404 WordPress page. With the right tools and design, you can make encountering this error an engaging and user-friendly experience. Plus, you won’t need any coding knowledge or redirect plugins.
In this post, we’ll discuss the benefits of custom error pages, and then guide you through three ways to create one for your WordPress website.
Table of Contents
- The Benefits of a Custom Error 404 Page
- How to Create a Custom Error 404 WordPress Page
- Why You Need a 404 Page
The Benefits of a Custom Error 404 Page
A 404 error page lets the user know there was a problem with their request. They may have mistyped a URL or tried to visit a page that no longer exists. This error is essentially a dead end, which can frustrate visitors and result in them leaving your website if you don’t give them an out.
However, if you design a custom page that provides value, you can ease your visitors’ frustrations and boost your site’s UX. Plus, with the right customization, your error page can slot right in with your other content, giving your site a stylish, consistent look and feel.
You also have the opportunity to include internal links on your error page, so visitors can easily navigate your site. Internal links prevent users from having to return to your home page, scoring points for user-friendliness. Plus, an internal linking structure can help search engines better understand your content, helping you build more authority for your site.
Typically, error pages don’t offer much content for users to view and interact with. As such, it’s easy to lose visitors, who may go looking for answers elsewhere.
Therefore, you might decide to include search bars and navigation menus on these pages to encourage users to keep browsing. This can help you reduce bounce rates (the number of visitors who leave shortly after arriving) and boost your search rankings.
Finally, custom error pages enable you to show off your brand’s personality and reflect your company’s message and values. Clever 404 pages can help you shape brand perception and build more awareness about your company’s identity.
How to Create a Custom Error 404 WordPress Page
Now that you understand the benefits of creating custom 404 error pages, let’s look at three methods to add one to your WordPress website.
Method 1: The Beaver Builder Page Builder
As with most WordPress-related tasks, the best way to create custom 404 error pages is often by using a plugin. If you use a page builder, it may offer you this option built-in.
For example, the popular Beaver Builder page builder helps you to complete this task easily. With the premium tier, you get access to the Beaver Themer add-on, which allows you to directly edit your theme.
You’ll need to purchase your plan on the Beaver Builder website. Then, upload your zip files to WordPress. Once both plugins are activated, you can navigate to Beaver Builder > Themer Layouts.
Next, click on Add New. You’ll be taken to a new screen where you can give your layout a title:
You can also use the drop-down menu to select Themer Layout for your layout type, and choose 404. Then hit Add Themer Layout.
You’ll be redirected to a new page where you can click on Launch Beaver Builder. This shows you the default 404 error page:
Nothing too exciting here. However, you can customize the page to make it more unique to your brand. To change the messaging, select any text module to access the settings. In the General tab, you can alter the text, and under Style you can adjust the colors, fonts, and spacing:
In addition, you can make your error page more engaging by using additional modules. For example, you can include a navigation menu, a search field, or even a login form.
When you’re happy with your design, hit Done > Publish. Then you can test it on the front end by intentionally misspelling one of your site’s URLs.
Method 2: The HubSpot Starter CRM Suite
If none of your site’s existing plugins offer the functionality you need, or you’re already a HubSpot user, this may be the best method for you. Although you can use HubSpot for free, the Starter CRM Suite plan allows you to put your own spin on the content of your error pages (among many other things).
To get started, you’ll need to log into your HubSpot account. Then go to Marketing > Design Tools:
On the left side of the screen, click on File and choose New file. At the popup, you can select a template for your page. For example, you might build your page with HTML or use the drag-and-drop visual builder. Then, click on Next:
On the following screen, check the template box. Here, you can also select a page template from the drop-down menu and give your file a name:
Finally, hit Create. Once you’ve set up your 404 error page, you can structure and customize the content as much as you’d like.
When you’re happy with your template, you can apply it to your website in your HubSpot settings. On the Settings page, go to Websites > Pages:
Click on the System pages tab. Then, use the 404 error page drop-down menu to select the custom 404 page template you designed earlier, and make sure to save your changes.
Method 3: The 404page Plugin
The 404page plugin enables you to create neat 404 pages to keep visitors on your website. It’s free, and with over 100,000 active installations, it’s the most popular plugin of its kind. However, it’s important to note that 404page can’t create redirects.
For that reason, it’s very easy to use. Simply design your page as you normally would, including key elements like images, headings, and buttons. Then, navigate to Appearance > 404 Error Page. Currently, the plugin will show your default 404 page, usually dictated by your theme:
However, you can use the dropdown menu under the General tab to choose the custom 404 error page you created. Then, save your changes.
You can then click on the Test 404 error button to preview your custom page, or hit Edit page to make changes to your page. You can also access advanced settings, which enables you to do things like send an HTTP 410 error for pages that are no longer available.
Method 4: Add 404 Page Using Full Site Editing
Step 1: Access the Full Site Editing Mode
1. Log in to your WordPress admin dashboard.
2. Ensure that your theme supports Full Site Editing (FSE), as not all themes do.
3. Navigate to the page where you want to add the 404 page. Usually, this would be your main 404 page.
Step 2: Create a New Template
1. Click on the “Add New” button to create a new template.
2. Choose the “404” template type from the available options.
Step 3: Design the 404 Page
1. You'll be taken to the FSE interface. Here, you can design your 404 page visually.
2. Add elements like text blocks, images, and styling using the available tools. You can also customize the layout as per your preference.
Step 4: Add a 404 Message
1. Drag and drop a text block onto your template.
2. Enter a friendly 404 message like “Oops! This page doesn't exist.”
Step 5: Set Up the 404 Template
1. Save your changes to the template.
2. Exit the Full Site Editing mode and return to the template overview.
Step 6: Assign the 404 Template
1. Navigate to the WordPress settings for handling 404 errors.
2. In the “Error 404” section, select the template you created from the dropdown menu.
Step 7: Save and Test
1. Save your changes in the settings.
2. Now, when a user lands on a non-existent page, they'll see the custom 404 page you created.
Why You Need a 404 Page
A 404 page is displayed when a user tries to access a page on your website that doesn't exist. This can happen due to mistyped URLs, broken links, or deleted content. Without a 404 page, users might encounter a generic browser error, which can be frustrating and confusing.
Benefits of Having a 404 Page for User Experience
1. Creates a user-friendly experience: A well-designed 404 page provides a clear and friendly message to users, letting them know that the page they‘re looking for isn’t available. This reduces confusion and frustration, making users more likely to stay on your site.
2. Helps maintain engagement: When users encounter a 404 page, they might still be interested in exploring your website. A well-structured 404 page can direct them to other relevant pages, preventing them from leaving your site entirely.
3. Retains visitors: Instead of users leaving your site when they encounter a broken link, a helpful 404 page can guide them to similar or related content, potentially retaining their interest and engagement.
4. Establishes brand consistency: A customized 404 page can reflect your website's branding and tone, reinforcing your brand identity even when something goes wrong. This maintains a consistent look and feel throughout the user journey.
5. Reduces bounce rate: A bounce occurs when a user visits a single page and leaves immediately. A user-friendly 404 page can decrease bounce rates by providing alternative content options, encouraging users to explore further.
6. Increases SEO presence: Search engines monitor user behavior, including how often users encounter 404 errors. A custom 404 page helps mitigate the negative impact of broken links on your site's search engine rankings.
Data Insights
1. According to the Nielsen Norman Group, users are more likely to continue browsing a website after encountering a 404 error if the error page provides clear navigation and helpful information.
2. HubSpot's research shows that around 70% of users will leave a website if they encounter a broken link or a missing page, highlighting the importance of a positive error page experience.
3. Custom 404 pages with creative and engaging content have been known to generate positive social media attention, which can indirectly boost brand visibility and user engagement.
Delight Your Visitors With a Custom 404 Page
To recap, there are several ways to create a custom error 404 WordPress page:
- Beaver Builder and Beaver Themer
- The HubSpot Starter CRM Suite
- The 404page Plugin
- Add 404 Page Using Full Site Editing
Although it isn’t ideal for users to encounter 404 errors, it’s best to be prepared for the occasion. That way, you can use this page as an opportunity to reduce bounce rates and boost UX by encouraging users to stay on your site. It can even be a chance to add an extra delightful moment to their experience.
Editor's note: This post was originally published in August 2022 and has been updated for comprehensiveness.
