Skip to content

How to Set a 404 Page in WordPress: 2 Easy Methods

From time to time, your website’s visitors may encounter errors, like a browser’s generic 404 error page. While this isn’t ideal, a generic error page can make the situation a lot worse. So you might be wondering how to set a 404 page in WordPress to offer a branded error with guidance on how the user can move to another part of the site.

Fortunately, there are a few straightforward approaches to creating a custom 404 error page. If your site is built with WordPress, you can use either the Site Editor or a page builder. That means you won’t have to touch a line of code or possess special technical knowledge. 💡

How to set a 404 page in WordPress.

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:

Example of 404 Page not Found in WordPress (Neve FSE template).

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.

Themeisle's 404 error page.

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.

Learn how to set a 404 page in WordPress like CodeInWP has.

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 AppearanceEditor. 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.

404 page template in WordPress (Neve FSE).

Click on the right side of your screen or on the pencil icon to open the page template with the Site Editor.

Open your Site Editor to learn how to set a 404 page in WordPress.

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.

Remove a button from your 404 error page template.

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.

Lottie Files library - 404 search.

Click on the animation to edit its settings.

how to set a 404 page in WordPress with robot and gears.

When you’re ready, click on Save to workspace to generate. Then you’ll be able to open a more sophisticated animation editor.

Saving your Lottie animation.

You can make additional modifications, or simply click on ShareHandoff & Embed.

Getting the asset link to embed your Lottie animation.

Copy the asset link. Return to your 404 page and paste it into the Insert from URL field.

Inserting a URL into your Lottie animation block.

You can then tweak animation settings – like triggers, loops, and speed – in the Block tab.

Block settings for your Lottie animation.

We’ll make ours smaller and centered. Then, we’ll adjust the text to match our brand’s tone and the new design.

Final example after the instructions on how to set a 404 page in WordPress Site Editor.

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 PluginsAdd New Plugin and search for “elementor.”

Install the Elementor page builder.

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.

Add a new Elementor template then learn how to set a 404 page in WordPress.

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.

Elementor widgets or "elements" in the page builder screen.

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.

how to set a 404 page in WordPress with a center button.

Since the free version of Elementor doesn’t include a search widget, we’ll add a button to the page for easy navigation.

Learn how to set a 404 page in WordPress with a button.

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:

The final example for how to set a 404 page in WordPress using Elementor.

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!

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 
Yay! 🎉 You made it to the end of the article!
John Hughes

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...