As a website owner, there will be times when your website is under maintenance, individual pages are not accessible or contain broken links. This will often lead visitors to a 404 page. It’s not ideal but, with well-designed error pages, you can still hold on to those visitors. We’ll show you how to do it with WordPress and Visual Composer.

The purpose of a 404 error page is to inform your visitors about the error they’ve encountered. And to redirect them to those parts of your website that are still available or working. By doing this, you lower the bounce rate.

A custom 404 page is also ideal for promoting and inserting call-to-action elements. This allows the 404 page to basically perform the same functions as a working target or landing page.

We look at the following points:

• What is a 404 error page?
• 404 error variants
• When do 404 errors occur 
• How to fix 404 errors
• Good and creative examples of 404 pages
• Create a custom 404 error page with WordPress
• Create a 404 error page with Visual Composer

What is a 404 site?

Put simply, a 404 error is a Hypertext Transfer Protocol (HTTP) response code. It means that the server cannot find the requested source. Or rather, the part of the website path that comes after the "/". Basically, it means that the specific page that should be displayed is not available.

Most of the time, a 404 error message is displayed as follows:

• HTTP 404
• 404 not found
• 404
• 404 error
• 404 this page does not exist
• Page not found
• File not found
• Directory not found 
• Requested URL not found
• ...and similar variations

Here are some possible reasons why a 404 error can occur:

• A WordPress page or post is deleted or moved to another page without redirecting the links.
• A visitor enters the domain name incorrectly (missing a letter, misspelling, etc.)
• Former links (which have changed) are still listed in external sources.
• The server/website has crashed, is undergoing maintenance, or has technical issues that cause the website to not be displayed properly (for example, broken connection).

Besides 404 errors, there are also the following HTTP status codes:

• 100-199 Response: request recipient and continue processing
• 200-299 Successful: request successful and accepted
• 300-399 Redirection: requires further action to complete the request.
• 400-499 Client error: invalid request or request cannot be completed.
• 500-599 Server error: the server could not accept the request.

How to fix 404 errors

On the one hand by redirects, so you redirect your visitors directly to target pages that match the content of the original request. At Raidboxes you don't need an additional WordPress plugin for setting redirects and redirect rules. See the tutorial on 301 and 302 redirects.

Another option is to find broken links and repair them, i.e., replace them with the newly valid internal source. Make sure that all internal links lead to the desired pages. Also ask the owners of external link sources to change all broken links.

Another tip is to use user-friendly URLs and permalinks. Keep them short, use lowercase letters and describe where the links lead to. This will help you better track any broken links, keep an overview of them and also optimize your website for search engines. Check out our article on Internal linking and SEO with WordPress.

And finally, you should create a custom 404 site . This will redirect "lost" visitors back to the home page or relevant content. At the same time, it will not confuse the error with a failure of your entire website.

What makes a 404 error page effective

We've established it's important to have a custom 404 error page that takes your visitors back to the existing parts of the website. Now let's look at what options you have. The common and recommended practices for creating custom 404 pages are:

• Back or Home buttons: Give your audience the option to return to the available pages or to any location.
• Search bar: Typically, these types of errors occur when users try to find a specific page or content. So offer them a search option or suggest specific landing pages.
• Contact forms: People can use a contact form or live chat to get help if they can't find the content they're looking for. Or if they need help with other things on your website.
• Social media icons: It's always good to link different social media platforms where your content can be found and reached.
• Humorous imagery: This is one of the most underrated practices and one that's clearly underused. Humor can certainly defuse the outcome of a likely negative perception. A few examples of the use of humor in a moment.

Create a custom 404 page with WordPress

You have the following options for creating a 404 page: with WordPress, with a website builder or page builder and with custom code – such as HTML. This is how it works with WordPress:

1. Go to your WordPress dashboard
2. Select the "Design" area on the left
3. Select the sub-item "Editor"
4. Check if your WordPress theme contains a "404 Template" (Ctrl + F and then enter "404.php");
5. Click the link for the 404 template on the right hand side.

The content looks something like this:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Now change the code according to your needs. You need knowledge of HTML to do this, however. You should also work with a child theme, otherwise your changes may be deleted again after updating the WordPress theme.

Create a 404 page with Visual Composer

One of the easiest and fastest ways to create a 404 page is with a website or page builder. In this example, we'll show you how to create a custom 404 page with Visual Composer, using drag and drop. Note that this is only possible with the premium version.

First you need to download and install the Visual Composer plugin. Watch this video tutorial on YouTube:

Once the plugin is installed and activated, you can get started. There are plenty of templates to choose from to begin with. Click on the marketplace icon in the frontend editor. Select Templates and type "404" to find pre-made 404 pages.

This tutorial will explain exactly how to create a custom 404 page using Visual Composer:

When you’ve completed and saved your custom 404 page designs, you can manage them in the editor. How it's done is explained in the next video:

For more tips on creating a custom 404 page, the best plugin solutions and some 404 page inspiration, check out the article 404 pages with WordPress.

Examples of good 404 pages

We've collected – independent of WordPress and Visual Composer – some of the most creative 404 error pages to give you some inspiration. GOG.com's 404 page is one of the best examples of thinking outside the box. And that in the truest sense of the word:

As this is a site with entertainment value, Blizzard had to meet a high standard in terms of its 404 page. The cool design becomes a classic in itself:

The last example of 404 pages from Slack is super simple, but still surprising. It's a nice example of creativity:

Final thoughts on 404 pages with WordPress

Now you know how to create a 404 error page to lead your visitors to the active subpages of your website. And how you can turn a bad situation into something that minimizes or even resolves the hassle. Moreover, you’ve discovered there are very simple ways to design those 404 pages – provided you’ve got the creativity and a little artistic skill.

With a website builder as a tool, you don't need any programming skills to turn a boring 404 page into something that makes you feel good. Or that helps your visitors get to where they want to. Do you have a good example of a successful 404 error page? Feel free to share it in the comments.