[TUTORIAL] How to Make Custom 404 Page in 5 MINUTES - NO PLUGINS

thegoldeneye

Power Member
Joined
Oct 26, 2015
Messages
544
Reaction score
520
I hate writing intros.

giphy.gif










(me writing an intro)


Default 404 pages are ugly, and if you make your custom WordPress theme, it will not be styled at all.

hw3ohAZ

It doesn't look pretty, right?

Working with a lot of WordPress themes, I found that sometimes I need something else on the 404 page, and tutorials I found on Google are:

1) Edit 404.php
2) Install a plugin

And that's what you can find out there. I don't want that. I don't like it.

It will take me more time to edit 404.php with writing HTML and styling those elements, and if I install a plugin, well... it's an additional plugin we don't need.

What if I create a 404 page with Elementor (or any other page builder)? If that is possible, I can make a 404 page in less than 5 minutes.

Okay, let's start!

BUILD 404 PAGE IN WORDPRESS

We need to make a 404 page, and for me, 404 permalink is not available, so I changed it to "404-error".

kkZS3IS

And I am going to make it no index in Yoast, because I don't want Google to crawl this page or to be found in a sitemap.

rsO9GqB

Let's open our new 404 page with Elementor and give it a new and fresh style.

i0sdOSZ

As you can see, it's nothing special. The background has been added with a heading and button leading back to the homepage.

BY0Wi0a

But you get the point, and you can make here whatever you want. It's that easy.

LET'S SAY TO WORDPRESS "CALL OUR NEW 404 PAGE"

We are almost there, and there is only one more thing we need to do here. We need to open our functions.php and make a very simple function saying, "hey, if this page doesn't exist, redirect a user to this page".

Code:
/* 404 page */

if( !function_exists('my_custom_404') ){

    add_action( 'template_redirect', 'my_custom_404' );

    function my_custom_404(){
       if(is_404()):
            wp_safe_redirect( home_url('/404-error/') );
            exit;
        endif;
    }
}

And we are done! It's very simple, isn't it?

I hope you will like this tutorial, and also I hope it will be helpful. If you have any questions, feel free.
 
I don't have the time to use elementer. Just install a plugin. Nice write up anyway, learnt something.
 
thanks for that
Nice shares man, this will help many people out.

Thanks man, I hope it will. :)

I don't have the time to use elementer. Just install a plugin. Nice write up anyway, learnt something.

Yes, that's the fastest way, and also it doesn't need to be a Elementor, it can be any other builder. Also, thank you! I'm glad to hear that.

P. S. I will continue with interesting tutorials, if you have any ideas/recommendations/requests feel free and let me know.
 
Back
Top