Recently updated on January 12th, 2024 at 03:58 pm
When working with WordPress, you have the tools to customise every user experience for your website visitors – and that includes making a custom 404 error page. We explore below the kinds of options that can be unlocked with just a little bit of knowledge and creativity.
What is a 404 error page?
A 404 error page is seen by visitors when they have made it to your website, but have landed on a page that does not exist. It can be triggered by a mistyped URL or a broken link, and it’s the server’s way of telling browsers they’ve wandered into a destination that can’t be accessed.
Usually, a 404 error page might look like this:
A bland, templated page like the one above gets the job done, but it doesn’t help the user out at all. This approach can leave a bad impression on visitors, which is something we definitely don’t want to happen.
When designing a 404 error page, we should be thinking about what the user actually wants – to find the right page. A good 404 page should inform the user about the problem while also providing them with direction for where to head next.
To do this, let’s see how you can customise your 404 page design to be fun and reassuring to site visitors.
Contact us for Website Maintenance & WordPress Support Services
What should you include in a 404 page?
Before we dive into the actual process of designing a 404 page, let’s have a look at some of the elements you need to consider:
An error message
It should be clear that the user has landed on the page in error and that a 404 event is not normal. It might be worth apologising for the inconvenience as well.
Brand look and feel
In the end, a 404 page is another type of landing page. You should make sure to incorporate the branding elements that match the look and feel of the rest of your site.
Creative visuals
Think about adding animation or a little comic relief to your 404 page for a more novel experience. Be careful not to overdo it, though, as triggering a 404 error isn’t going to put every visitor in the mood to smile.
Call to action
Guide users by adding a signup, download, or contact us button. You can also add links to your best content to help users find related content before they consider leaving your site.
Remember: Keep it simple.
While we encourage you to be creative with your 404 design, keep in mind that the goal is to reassure, delight, and guide the users. Also, you’re not trying to satisfy web crawlers and SEO requirements, so there’s no need to maximise your word count.
3 methods to customise your 404 (not found) page design on WordPress
There are many ways to customise your 404 page on WordPress, with one of the most common being through the WordPress Theme Editor. However, while this method is simple, we don’t recommend it for editing your 404 page. Customisation is limited through this method, and it’s not unusual to lose all of your changes every time you update your theme.
Here are some alternatives that we recommend you try:
Customise a 404 page through an FTP Client
As a warning, this method requires a bit of IT knowledge and some light code editing. You should create a backup copy of your site before starting. You won’t need a backup in most cases, but it’s still better to be prepared – just in case.
So, if your backup is ready, let’s get started!
Creating the 404.php file
Choose an FTP client and use it to connect to the site’s local host.
Search for the 404.php file from your selected WordPress theme. The default 404.php file provides the user with your site’s basic navigation.
Note: If your theme doesn’t have a 404.php file, you will need to build one yourself. Try following Envato’s How To Create A Simple 404 Error Page for step-by-step guidance.
Customising the 404.php file
You can edit the default error message in the 404.php file by revising the text within the page-content class and the h1 heading. You can also add more paragraphs as necessary. Here are some examples you can try:
- Display the titles of the latest seven posts from your website
Paste this snippet of code into the 404.php file:
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>
- Display the titles of seven random posts from your website
Paste the following code into the 404.php file:
<ul>
<?php
$rand_posts = get_posts( array(
‘posts_per_page’ => 5,
‘orderby’ => ‘rand’
) );
if ( $rand_posts ) {
foreach ( $rand_posts as $post ) :
setup_postdata( $post );
?>
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>
<?php
endforeach;
wp_reset_postdata();
}
?>
</ul>
Remember – add your logo and visual elements that reflect your brand. Including a fun image is also a good way to ease frustration (who can stay mad at a cute puppy or kitten?).
Testing and Displaying the 404 page
Add a random string of letters after your site address and type it in the browser bar: https://example.com/dfdfddfd
If it doesn’t work, it means that the server can’t find your custom 404.php file. Go to the .htaccess file and paste the following line of code: ErrorDocument 404 /index.php?error=404
Note: Recently launched websites sometimes do not have the .htaccess file. In this case, you’ll need to change your site’s permalinks, then revert to your preferred permalink format to generate the .htaccess file.
Customise a 404 page via a page builder
You can find several page builders that have an option to create 404 pages. One of these is Elementor, a leading website building plugin for WordPress.
Using Elementor, you can easily customise your 404 page with its visual drag-and-drop builder. There are a range of versions you can use, but If you want to be more flexible with your design, we recommend going with the Pro version.
Creating a new 404 page template
Install Elementor on your computer and activate it.
Go to Templates > Theme Builder > Add New
Select the type of template you want to work on: Single
Select Post Type: 404 Page
Name your template: e.g. Error Page (Note: don’t name your template with “404” to avoid issues with WordPress permalinks)
Once everything is set, click Create Template.
Choosing your 404 page template
After clicking Create Template, you’ll be redirected to a list of 404 page templates. An easy way to start is to choose a pre-made template and customise it according to your needs. If you can’t find a template that you like, you can always create one from scratch.
Customising and Designing your 404 page
Select the appropriate widgets through Elementor (e.g. select the Search Form widget to add a search box).
Click Publish once you’re done with the design. Elementor will automatically select the Include rule to display this template on your 404 page.
Click Save and Close.
Customise a 404 page using Plugins
404page is the most used plugin to create customisable 404 error pages in WordPress. This plugin is easy to use and it works with almost every theme – let’s see how it works:
Installing the Plugin
Go to Plugins > Add New in your WordPress admin dashboard.
Look for the 404page plugin in the WordPress plugin directory to download and install.
Click Install Now and then activate it.
Creating and Displaying a new 404 page
Go to Pages > Add New to create a new page. Start customising by adding messages, images, or any other information to your 404 page.
Navigate to the Appearance > 404 Error Page section in the admin panel to manage the plugin’s settings. Here, you will see the site’s default 404 page.
Display your custom page by selecting it from the ‘Page to be displayed as 404 page’ dropdown menu, under the General tab. Click Save Changes.
Testing and more advanced options
Click the Test 404 error button to check if there are any errors on your custom 404 page. If you spot any details you want to change, click the Edit page button to start editing.
You can find more options in the Advanced tab to further customise your 404 page.
404 page design examples
Now that you’ve learnt how to customise your 404 error page, let’s have a look at some of the more creative 404 designs for inspiration:
1. Ikea
Ikea is known for selling ready-to-assemble products, so seeing a three-legged chair with the message ‘something is missing’ hits right on brand. It has a playful tone with on-theme word choice, helping the page fit in as part of a uniquely Ikean user experience.
2. Brightscout
Brightscout specialises in building innovative technology solutions for enterprises. Their 404 error message plays with pop culture references to perfectly represent what they value—technology!
3. Twitch
Timothy J. Reynolds created this 404 page for Twitch, a live streaming platform primarily for gaming. It knows its audience well, using a retro reference to play with words in a way only gamers would get (no apologies – that pun was intended).
4. Nationwide
As a US insurance and financial service provider, Nationwide wants to remind users that accidents can happen anywhere, even on “this page”. It’s a great way to turn an error message into a piece of marketing.
5. Amazon
Amazon is one of the largest e-commerce platforms around, and they know what they’re doing with their 404 page. They elevate the mood by showcasing the “dogs of Amazon” whilst making sure the product search bar is still present. They always offer users a path back to their services – even including a CTA button that redirects to their homepage.
6. Daily UI
This Daily UI 404 error page is simple and straightforward, but they’ve used the page as a space to showcase their design skills within their creative background.
7. Inspo Kit
This Halloween-themed 404 page design was created by Mei from dribble. Updating your page with seasonal elements is a great way to catch attention during holiday periods.
8. eBay
eBay is a multinational e-commerce corporation – an online marketplace for consumers and businesses alike. Customer service is their top priority, and the hero image they use is warm and, funny to reflect this.
9. Adobe
With its striking 404 error page design, Adobe justifies its claim that “Creativity is in our DNA.”
10. Netflix
Netflix creatively uses its own intellectual property to create a 404 page that resonates with its audience. No spoilers, but if you’re a fan of Stranger Things you’ll understand just how far you’ve strayed to get to this error page.
Key Takeaways
There are many, many different ways you can customise your 404 page. Try out the methods mentioned above, and see what fits your preference. But remember, if you can’t find what you’re looking for, you can always talk to the team at Spark.
