45

How To Create a Custom 404 Error Page on WordPress

The reason you are here reading this article could be that you recently checked crawl errors inside your Google webmaster console.

There you may have seen multiple pages with 404 error type.

No worry! No need to get into the technical part to fix this error on your site. But first you need to know what is 404 error and why is it showing on your site.

More...

What is 404 error page?

404 is an HTTP error code that shows that the requested page is not found or not available or has been removed. It is one of those errors that are usually out of the control of website owners.

How To Create a Custom 404 Error Page on WordPress

Click to visit our 404 page design.

But luckily, you can customize your website’s 404 error page to control how it looks.

Most online visitors will close a website as soon as they encounter a normal 404 error page. A large number of 404 errors can also increase your site's bounce rate.

The 404 error page simply indicates that the requested item or information is not available on this website.

By setting up a custom 404 error page, you can tell your website visitors to take alternative actions in case a particular page of the website has stopped working for some reason.

By default, WordPress shows a default 404 page that looks something like the image below.

How To Create a Custom 404 Error Page on WordPress

As you can see, it doesn’t say much in terms of what users are supposed to do next, except the search option, which is definitely a plus point.

But you can customize this page to add much more than the search option. You can make it more smart and optimized for your visitors.


How to Create a Smartly Optimized Custom 404 Error Page in WordPress?

There are basically two methods for creating and implementing a custom 404 error page on your WordPress website

  • Using .htaccess file.
  • Using a WordPress plugin.

The first method is a good choice only if you are a professional coder. .htaccess is one of the core files of your WordPress website that should not be messed up with if you do not have good knowledge of it.

Luckily, we have an easier and even better method for creating a custom 404 page in WordPress.


Using 404 page WordPress Plugin to Create a Smart Custom Error Page

The 404 page plugin is the most widely used plugin for setting up a custom 404 page on any WordPress website. You can create a 404 error page in any style, with any image and text you want to display on the page.

The 404 page plugin integrates well with all the popular WordPress themes and plugins, allowing you to use their full power for developing the best custom error page for your website.

In this article, we will discuss the step-by-step process for installing and using the 404 page plugin to create an awesome smart 404 error page in WordPress.

Let’s first discuss some basic points and requirements about this method.

  • To use the 404page plugin, you need to set your website’s Permalink Structure (Settings -> Permalinks) to anything but plain (default) option.
  • There is no automatic redirection for 404 errors in this plugin. The page you create and select will automatically appear as the default 404 error page.
  • Further styling (custom CSS) can be added using the 404page plugin’s CSS class error404.

Follow the steps below to get started.

Step 1: Downloading and Installing the Plugin

To download the 404page plugin, visit your WordPress website’s dashboard and click on Plugins -> Add New.

Search for “404page” using the search box at the top.

Click on ‘Install Now’ button for the plugin with title “404page – your smart custom 404 error page”. See the image below for reference.

How To Create a Custom 404 Error Page on WordPress

Now, activate the plugin. Once the plugin is activated, you can see the option 404 Error Page under the Appearance menu.

Step 2: Creating a 404 Error Page

In order to create a 404 custom error page for your website.

Create a new page with the title “404 Error Page.” You can edit this page just like any other page on your website.

Now add custom 404 image, text, instructions, search box, etc. and save your new page.

See the image below for an example of a custom optimized 404 page.

How To Create a Custom 404 Error Page on WordPress

Step 3: Setting up the 404 Error Page

Once you are done creating the page, you need to select this as your website’s default 404 page. Follow the steps below to do this.

Go to Appearance -> 404 Error Page section of the WP dashboard.

Setting up the 404 Error Page

Let’s discuss each option one by one.

Page to be displayed as 404 page: Select the page (404 Custom Page) that you want to be displayed as the default 404 page on your website. Select the page we created using above step 2.

Hide 404 page: This option lets you hide the custom 404 page from the list of pages for non-admin users.

Fire 404 error: By selecting this option, you can guide WordPress to show 404 error, if and when the custom 404 page is ever accessed directly by its URL.

Operating Method: There are two operating modes here, Standard Mode and Compatibility Mode. Read the instructions properly to select a default mode for your custom page.

Click the ‘Save Changes’ button at the bottom to save the setting options.

How To Create a Custom 404 Error Page on WordPress

Edit Page button: The ‘Edit Page’ button allows you to directly access and edit your custom 404 page from here.

Test 404 error: This button allows you to test the 404 error page after the settings are updated.

This should do the job.

Conclusion:

Now, all your website’s 404 error requests will automatically open in the new custom smart 404 error page. You can edit this page to make it more attractive and useful.

I hope this guide will help you to create your custom 404 error page. If you are done designing your unique 404 page. You can share your thoughts via the comments section below.

Don't forget to share this article with your social networks.

How To Create a Custom 404 Error Page on WordPress

Pin Me Up!

Alok
 

Alok Rana founder of LoudTechie. Like to share his blogging experience and resources with readers. Offering best money making blogging opportunities to new bloggers. He loves to talk about how to blog, SEO, Traffic Strategies and Marketing.

  • Sonu Rajput says:

    Wow Sir Great Post , Very Knowledgeable Your Article .thanks for sharing

  • surendar says:

    thanks for sharing this article

  • Kush Khurana says:

    great way.. if we make 404 page then there is a possibility of staying the user on the website.. thanks for sharing…

    • Alok says:

      Yes Kush, having a custom optimized 404 page can also reduce your site’s bounce rate as every site have some unseen broken links.

      • Kush Khurana says:

        thanks alok, i will apply this method in my website too

        • Alok says:

          Sure, Kush. It will be a good way to navigate your bouncing visitors to other important pages.

  • uday says:

    Hi, Very good article
    Thanks for sharing, keep up the good work

  • pranav says:

    amazing trick, thanks for this article 🙂

  • Parth Vinodbhai rathod says:

    hey
    nicely explained and helpful article
    thank you

  • Peter says:

    Thanks a lot for mentioning my plugin!

    • Alok says:

      Hey Peter,

      It’s my pleasure having your feedback on my post. Your plugin is amazing and it is very useful for bloggers. Thanks for providing us this great plugin.

      Thanks

  • Hello sir i new in blogging can you tell me how can i fix 404 error on my webmaster tools i was use your methods but my error its not fix. Can you tell me why.

    • Alok says:

      Hello Kavya,

      Let me tell you first, creating custom 404 page will not solve the 404 errors in GWT. We use custom 404 page to get a hold of our visitors so that they don’t bounce back on getting a “Page Not Found” error on your site page.

      Second, Fixing 404 errors in GWT. Some 404 errors are false in GWT, you need to open them and check if the page is actually working or not. If you find that page is working fine just mark it as fixed. But if you find out that there is actual 404 error then you may need to set a redirection using any plugin which can do this job. Yoast SEO also does this job but there are many more for this. You can search and can try which ever suits you.

      I will write a detailed post on it soon. Let me know if you find it helpful.

  • Aditya says:

    I sometimes wonder getting 404 Error is bad. But from your POV looks like it’s fun. But I am pretty sure no one would want that not even me. But your blog is useful maybe in future I can use this.

    • Alok says:

      Getting 404 errors is bad for sure but one can not always get a good hold on it as they can be generated anytime with any broken link. So better not to ignore any visitor on your site.

      No one would like to get their visitors bounce back just because of a single broken link.

  • Star harford says:

    Thankyou for the very detailed explanation of how to do this. I didnt even realise you could customise this page so its really useful information.

    • Alok says:

      Glad to know that you like it. You should try it too this one is a good blogging practice.

  • David says:

    This is a really fun! I hate going to a page and woops nothing there. It would be so much cool with a error page with animation! I will tell my webdesigner to install this! Thank you!

  • Joanna says:

    I think the easiest way is by using the plugin, especially for beginners who don’t know much about editing the html and css files. Having a customised 404 page makes it less frustrating when you can’t find the page you are looking for 🙂

    • Alok says:

      Hey Joanna, glad you like it. This plugin is sure an easy way to handle your 404 error pages until you found it.

  • Aditi says:

    Wow! There is so much information in this post for working on the 404 error page that I could actually use myself. Thanks, for sharing it! 🙂

  • Bookmarked this post for future reference. I would like to create my customized 404 error page and been procrastinating. Thanks for sharing.

    • Alok says:

      You are welcome Calleigh. Glad you like it.

  • This is very helpful and informative! I think that creating a custom 404 error page is a great thing to fully personalize your website.

    • Alok says:

      Sure it Samantha. With creating a customized 404 error page you can provide options for your visitors to stay little more on your site.

  • Ali Rost says:

    Thank-you so much for your post. Creating a 404 page has been on my list for a while now and I haven’t taken the time to figure out how to do it. Now that I have a step-by-step guide, it should be a lot easier. ps: Have you ever googled “Great 404 pages?” I tell you what, the creativity of some people never ceases to amaze me!

    • Alok says:

      Hey Ali, yes I did Google search about creative 404 pages. Even I checked out many before creating my custom page. There are so many creative ideas out there you can pick anyone you like or go with your own creativity.

  • Prateek Goel says:

    I always thought that 404 page is something bad about the website. But now I’m ready to create one for mine as well. However, I’m not so good in all these technicalities, so I need help for this.

    • Alok says:

      Hello Prateek, you can ask for help anytime you want. I’ll be happy to help you out. And using this plugin you can create your custom 404 page without any technical knowledge.

  • Tiina A says:

    This is very interesting and useful as well. It’s so frustaring to get that error page, but if you can customize it that’s a whole new story and makes a huge difference in people’s mind.

    • Alok says:

      Yes Tiina, creating a custom 404 page will be a great help to any blog. It looks professional and you can let your visitor stay little more on your blog.

  • Wow! I didn’t know anything about this 404 error page and now you can customise it too. I would love to install this on my existing website. Thanks!

  • hal says:

    the good thing about reading this as it could well happen to a personal site and that you can direct guests to alternative social media pages and at least they know they can come back again – cheers for that

    • Alok says:

      Hello Hal, thanks for sharing your insight on this topic. And yes I can feel exactly what you are thinking, you can use it on your personal blog too. You can direct your visitors to social media pages, subscription pages, your landing pages or other related articles. Its all about how deep you can judge your audience and their liking.

  • yukti says:

    Loved your post on custom 404 error page. As I found this page very irritating and never knew what to do with this, I found your post very informative.

    • Alok says:

      Hey Yukti, Glad I can help you out in this matter. I hope to see your custom 404 page on your blog soon.

  • Jennifer L says:

    Really great guide and definitely handy especially for new bloggers. It’s definitely a step overlooked by many but one that makes your site look more professional in my opinion. And a 404 error page is relatively easy to make.

    • Alok says:

      Yes Jennifer, using this 404 error plugin anyone can create their own custom 404 error page without any technical knowledge. Glad you like it.

  • zina says:

    Aha… this is the way to create a custom error. Nice post, really helpfull! thank you

  • London Mumma says:

    A real handy post, especially for those with WordPress. I shall be sure to pass it on.

  • Grow Your Website Traffic upto 200% in 30 Days
    Get Traffic Hacks for 100 % Free & Also Get My FREE Traffic Strategy E-book worth 20$.
    Your Privacy and Email is safe with us !!
    >