How To Create A Custom 404 Page

Posted By admin On 29/12/21
  1. How To Create A Custom 404 Page In Wordpress
  2. How To Create A Custom 404 Page Example

Nov 13, 2020 Go to Templates Theme Builder Single Add New Select Single from the Type of Template dropdown, select 404 from the Post Type dropdown, name your template and click Create Template Design your own 404 Page Template or choose a pre-designed template After you’ve finished designing your 404 Page Template, click Publish. A custom 404 page can be branded with your site and provide helpful information. If you have access to your server, we recommend that you create a custom 404 page. A good custom 404 page helps people find the information they're looking for, and also provides other helpful content that encourages people to explore your site further. Jan 05, 2016 Creating a custom 404 page in Weebly is a lot like building any other page. Create a new “Standard' page. Hit the Pages tab, then the + button, and choose “Standard. A page named “404' is automatically used as the 404 page. As long as you name it 404, we'll take care of the rest. If you have to configure your webserver to show custom error page content, an easy way to generate HTML for the error page is copying the source code of a regular website page. Change the main content section to show the error message, and your 404 error page will match the rest of the site pretty well.

Difficulties in accessing a website can cause disruptions in the user experience that impair the audience’s engagement with your brand. To minimize those consequences, knowing how to create a custom error 404 page will help to properly communicate the issue and keep people engaged even if there is a problem uploading the site.

How To Create A Custom 404 Page

Jul 16, 2020 Creating a functioning custom 404 page isn’t hard. By following the steps in this guide, you can deliver a 404 page that will keep users from leaving your site by helping them find what they are looking for. Step 1: Design the Page. At the start of your design process, you need to decide how funny and creative you want your custom 404 page to be.

There are several reasons for the error 404 to happen. Many of them are not significant, and just refreshing the page can solve the problem. However, that error mustn’t generate a bad layout, which may drive the user away.

Even if we are talking about an error that harms the experience, it is possible to build a didactic and receptive environment for the audience. Therefore, creating a user-friendly page that explains the problem is a strategy to preserve engagement.

In this post, we will show how to create a better error 404 page in a step-by-step guide. Among the tips, we will talk about:

Keep reading and check it out!

How to create your custom 404 page step-by-step

How to create a custom 404 page example

Define the elements of your page

A beginner’s guide to error 404 page must consider the essential elements to communicate the problem appropriately. First of all, it is necessary to consider that there is certainly an unhappy user. Not everyone understands what can cause the error. Besides that, it is an issue that negatively affects the navigation experience.

Because of those issues, it is important to create a 404 error page designed to be friendly, informative, and visually lighter.

Standard pages, like the one you can see below, have an unattractive design and generate a more significant negative impact, often conveying the idea that there is something serious going on.

The elements inserted in the custom error 404 page will help to reduce the effects of the problem and avoid the loss of engagement. Check below what is essential in your 404 error page design.

A friendly or funny message

It depends on what your company’s tone of voice is. Some brands are naturally funny, and that is part of the strategy to engage their audience. If that’s the case, don’t hesitate to post a funny message that explains the problem on your error 404 page.

In most cases, brands prefer to take a more neutral approach during these instabilities, as it is an event that frustrates the user. In those cases, a friendly message helps to minimize the experience breakage. It is important to apologize to the user in both cases, being honest and willing to solve the error as soon as possible.

An excerpt explaining the problem

As minimalist as your design is, it is essential to use a place in your layout to explain to the user what may have happened. That explanation helps to create a greater closeness since the company is consternated with the situation, which demonstrates respect to the user who accesses its site.

One of the best ways to develop it is to put some of the possible technical causes that may have caused that error page. It is not necessary to overextend it, avoiding to expose your brand and generate a negative perception, demonstrating incompetence.

Simple explanations

To avoid confusion, offer your user some tips on how to deal with the situation. Often, refreshing the page is enough to access the website, so you should explain that. In some cases, when it is a business that provides services, explain to the audience that it can contact the support.

Not every user who accesses your website knows how to deal with the error 404, which can generate a not very positive feeling. That’s why it’s essential to keep your company available and offer some initial instructions, explaining that the problem in question is not serious and will be solved soon.

Related links

It is essential to help the user when the error happens. It may be interesting to offer some relevant links to guide visitors when leaving the error 404 page.

Point out some basic links to your website, like:

  • FAQ
  • Support
  • Product category pages
  • Contact page

For each page category, it is important to change the selection of links. For example, if we are talking about a sporting goods e-commerce and the link directed to a shoe, the error 404 page should show the link to the “shoes” category.

Design your page

When creating an error 404 page, the design is the first important issue. As much as it’s an error message, the layout needs to follow your brand’s visual identity patterns. Error messages offered by browsers can convey an even worse perception to the user. Ideally, assume that there’s a problem and put your brand ahead of it.

Therefore, when developing that page, think about essential elements, such as some of the ones we’ve mentioned:

How To Create A Custom 404 Page In Wordpress

  • A message explaining the error
  • Information about possible causes
  • Instructions for dealing with the problem
  • Contact information for support
  • Images or your brand logo
  • A search bar to go to another content

All that needs to compose a layout as simple as possible; after all, it’s a moment when the user experience has disappointed, even if it’s not your company’s fault. Your design should follow your brand’s tone of voice, but without considering that there is a problem.

Putting a search bar on that page is essential for users to try to get to the content they want even if the error has occurred. Many times, the problem was just the access link they used. If they can find the content or the page they want through the search bar, the ideal experience is quickly resumed.

How To Create A Custom 404 Page

The page also needs to have all the essential elements, like headers and footer information. Most of the time, some of those links are accessible after the initial error, which can be comforting for the users as they will be able to navigate to what they were looking for.

How To Create A Custom 404 Page Example

Also, remember that you can create page designs with the help of plugins. In CMS platforms for Marketing like WordPress, it is easier to use tools that offer ready-made templates.

Choose and configure a server

Choosing and configuring the server are tasks that lead to a simple goal — ensure that, when the error 404 happens, your users will be redirected to the page you are creating. Without that, they will be sent to a default page, as we showed here, and all work will be in vain.

The first step to do that is to choose the server where this page will be hosted, which is usually done in Apache. After that, you need to make a simple configuration through the .htaccess file. If there isn’t one ready on your server, you must create it.

From that file, you can establish custom configurations that will take user traffic to the error 404 page. The .htaccess file should appear in this form in the directory where WordPress was installed:

Suppose you have trouble finding .htaccess, a refined search using an FTP, like FileZilla. If you don’t find it, you need to create that file using a basic text editor and just name it .htacess.

Then you should add “ErrorDocument 404/404.html” to your .htaccess file, which will give the name to your error 404 page. Now you have it in your WordPress site directory, which is indispensable for the server to find it and correctly redirect the user. To finish, save the file and upload it to the server’s root directory.

Test your settings

Now, to test if everything is working, open your browser and put the address of your site followed by “/” and then any page identification that doesn’t exist. That will generate the error 404, and then you can check if the redirect to the page that was created is working.

This finishing process, with the test, is essential because it is the confirmation that the page is actually marked as an error or non-existent, and not just using a 404 error page layout.

Google needs to be clear about the answer, which should be the 404 because it indicates that the address doesn’t exist. Otherwise, search engines may end up ranking the page.

Learning how to create a custom error 404 page is essential to avoid a negative perception of your site by users. Instabilities will always exist, but it is important to deal with them in the best way, informing the audience who accesses it that the problem is temporary and will be fixed. Do not forget — the process shown in this content is directed to WordPress sites!

Do you need a few more tips to better understand how to manage business blogs in WordPress? Check out our guide with more tips to master the CMS platform!

How to create custom Express.js error pages#

Express does a good job of handling 404 and 500 errors by default. However, many a times, the error is page is now what we would like it to look like. Is there a way to customize it? Yes there is.

Online, you will come across many ways of implementing custom error pages for Express, but a lot of them do not use the correct approach, and those who do, do not explain properly how to do it, or what is going on. In this post I will show you how to create custom 404 and 500 error pages the right way, and explain how and why it works.

If you are asking this question, I will assume that you already have a working Express application and you are familiar with the application code, at least somewhat. I will also assume that you created the skeleton of your app using the express command (if you did not, start using it - type express -h at the command line).

To get some context, open app.js and find these lines:

In the first line, we have added the router middleware, which makes defining routes in Express possible.

In the second line, we are adding Stylus to pre-process our CSS files.

In the third line, we are setting up our static directory for serving CSS, JavaScript, images etc.

You may come across some suggestions like the following to handle 404 errors:

This approach is wrong, it is using a route to handle 404 error. Because the router middleware is added before the static middleware, it will intercept the requests for static file like CSS, JavaScript etc. You could make it work somehow, but it would a dirty hack job, we need to use the right approach, so abandon this method.

So what's the right method?

We need to create two middleware to handle 404 and 500 errors. Add these two right below app.use(express.static(path.join(__dirname, 'public')));:

Try loading a non-existent page on your website now or generate an error by calling an undefined function in one of your route handlers. You will see your custom error pages now.

Hey, but aren't we looking to create cool looking custom error pages?

Ah yes! Go ahead create these two files in the views directory.

Now, update the error handling middleware.

An important point to note is that, these two middleware must go at the very end of the Express middleware stack, else you will get unexpected results. Also, the 500 error handling middleware has an arity of 4, if you define it with anything lesser, it will fall back on the default Express 500 error handler.

Now restart you app, load the error-prone pages, and get ready to admire your witty looking, customized 404 and 500 error pages.