45

Create your custom 404 page not found – no plugin required please!

(Ads) The World’s Best Grammar Checker!

Bloggers, job seekers, essay writers, content producers,  etc. Eliminate grammar mistakes, check for plagiarism, improve word choice and style, etc.

Signup for free here.

WordPress is shipped with its own capacity to generate a custom 404 page not found page. It is set to automatically look for the file 404.php when an error 404 is reached. However, not all themes come with this 404.php file

The default WordPress custom 404 file is a simple listing of pages, categories, authors, latest posts, etc. This may be good for you but I think you can get something quite unique and more useful.  You will not have any need for a plugin at all to get a better page set up.

In this post, I want to show you how to create your own custom 404 page not found page that’s more significant and can make your blog more rewarding.

custom 404 page not found error message

What’s this 404 error page by the way?

The 404 error page is simply the page that shows up if a visitor tries to access a page that does not exist on your website or blog. Let’s take a common scenario I see almost everyday;

Sometimes, you may hit the publish button and then realize there were some issues you needed to have fixed on your post Permalink (the article url). The error here is to modify the permalink and then update the post after it was already published.

Here is what happens…

When you hit the “Publish” button, a new post alert was automatically sent to your feed subscribers telling them you have just published a new post. The alert sent contains, of course a link to the new post. If you return to your article and edit the permalink, that means the link that was sent in the alert will become existent. As a consequence, all your feed subscribers who received the alert will click and stumble on the 404 error page.

While I recommend not to modify permalink after publishing your article, I think there is need to have a more sexy and custom 404 page not found.

Now, let me give you some simple ideas what can be on your custom page;

  • List Subscription form
  • Special bonus (if you sell products)
  • Announce special coupons
  • Give out something for free
  • Etc

In the past, I published a tutorial on how to create a  Custom 403 Forbidden Error Page with no Plugin. While many of you liked that post, I got a few requests asking me to publish another tutorial on dealing with 404 error pages. I was so excited when Adrienne Smith mention that post on this article on her blog.

Following Adrienne’s link, Igor Griffiths was on my blog and he made a comment. As a matter of fact, if you go to his blog and try to hit the wrong url, you’ll see his  custom 404 page not found page.

Create your custom 404 page not found

Creating the custom 404 page not found in WordPress is quite different from the custom 403 page we created in this post. This is simply because WordPress comes with an inbuilt 404 error page so we have to look for ways to bypass it.

We will tell WordPress each time the 404 error is triggered, redirect the user to a page of out choice and abort the process.

Custom 404 page in Genesis

If you are running on any Genesis Child theme, this should be very simple. Here is the piece of code to us;

add_action('genesis_after_header', 'RediRect404Error');
function RediRect404Error() 
{
   if( is_404())
       {
        wp_redirect( 'https://enstinemuki.com/404-not-found/');
        exit;
       }
 }

Copy this code to your theme function.php file and paste is somewhere after the code below (but before the ?> )

require_once(get_template_directory().'/lib/init.php');


NB:
Notice I have used my custom 404 page in the code snippet. You have to remove it (https://enstinemuki.com/404-not-found) and use your own. It can be a page on your blog or some html file somewhere hosted on your space

NB: Check out this post on how to create a custom page.

Where is the WordPress theme function file?

You can edit the some theme files including the fundtions.php without leaving your admin area. Just follow the steps on the image below;

custom 404 error page

While in your admin area, point to “Appearance” and click “Editor”

On the next Window;

1 is your current active child theme. In my case, it’s Prose

2 Click the functions.php file to edit it

Locate the line require_once(get_template_directory().’/lib/init.php’) and paste the redirect code anywhere after it.

Click “Update File” to save changes

redirect 404 error page

Not running on Genesis?

If you are not on Genesis Framework, there will be a little change to the code snippet. Try this option;

if( is_404())
{
wp_redirect( 'http://yourblog.com/404-not-found/');
exit;
}
}

Just copy this code snippet and use in the header.php file of your theme. If you think you are having issues with this, it will be highly recommended to contact your theme developer.

Editing your 404.php file

If you feel comfortable with PHP and HTML, you may want to download the 404.php file from your theme’s root folder and do some modifications.  Here below is sample basic 404.php error page with search form;

get_header();
echo "

Error 404 – Page Not Found.

";
echo"

Search:

"
include(TEMPLATEPATH . "/searchform.php");
get_sidebar();
get_footer();

 

That’s it! I’m sure this will help you create a custome 404 page not found error page. Taking the time to make a user-friendly 404 page could mean the difference in a user staying on your website, or leaving.

Let me hear what you think in the comment box. Please share this on social media too

Recommend:  

High-qualityResponsive and Top rated SEO Friendly WordPress Themes 2019 from MeridianThemes

Also benefit from dedicated, professional, and quick support from team.

Enstine Muki
 

Certified Cryptocurrency Expert, Problogger and Serial Entrepreneur

Abdul Samad

I’m commenting to let you know that I’m loving this .. seriously.
I’m actually designing a GENESIS CHILD THEME and got this one 404 page it’s awesome 😀 😀 😀
Thanks for sharing brother!
Keep up the good work!
Abdul Samad recently posted…5 Proven And SEO Friendly Ways To Drive TrafficMy Profile
Twitter:

akwowe

Hi Enstine, I write to thank you for your post on creating/editing a 404 page not found page. It is unfortunate I did not know about your site earlier on when I started my blog, now I now better.

You so much simplified the editing process that any newbie can fix this issue. I do no coding, but have a passing interest in HTML which I learnt about some3 years ago.

No doubt, your post has rekindled those nostalgic feelings of yesteryears. I have done a health check about my blog and hope to continue the process so I will not be caught napping.

Thanks and God bless!
Twitter:

Mahendra

Hello Enstine
This seems very simple. I always think that editing something like 404 page is really hard if you do it without help of any plugin. It will take a lots of coding. Now I find myself comfortable with little bit of editing the codes. thanks for the share. I will surely gonna edit my 404 page.
Twitter:

Wayne Brett

This guide is fantastic for anyone with very little knowledge of WordPress. One of the first things I do when configuring a new theme is to edit the 404 page.

I like to include a mini-sitemap and a search field on my 404 along with an interesting photo quote or joke. I have even seen some flash games, that have held my attention for far to long,

Brian Meehan

Thanks for the useful info. I’ll have to setup a 404 page on my own site.

Thanks for sharing.
Brian Meehan recently posted…How Not To Make Money Online Or Anywhere ElseMy Profile

Efoghor Joseph Ezie

Thanks Enstine, for showing us alternative ways to add codes without necessarily using plugins. Too many plugins slow down one’s site.

For some of us who already have the Genesis Simple Hook plugin, I believe we can add his code using that plugin. Isn’t it?

If that can do the job, I would appreciate you telling us where exactly to add it on the plugin. Thanks again, and do have a great day.
Efoghor Joseph Ezie recently posted…The Secret To Making Your Employees Love Their JobsMy Profile
Twitter:

Sunday

Quite handy and resourceful as usual! It would be nice to try the steps. However, why not use plugin to achieve this the coding becomes confusing?

I found this post in kingged.com – the content syndication and social bookmarking website for Internet marketers. Hence, I also left the above comment.

Sunday – kingged.com contributor

http://kingged.com/create-your-custom-404-page-not-found-no-plugin-required-please/
Twitter:

Amiti

Hi Enstine,

Thanks for sharing this valuable information. I have started to realize that I should not use a plugin for everything so this is some very useful content that I’ll look into at more depth.
Twitter:

Carolyn Nicander Mohr

Hi Enstine, This is extremely helpful. Many people will arrive at your blog via the 404 page and you want their first impression of your blog to be a custom, positive one. If you Google creative 404 pages you can see some delightful examples of sites that have made the most of their 404 pages.

A bad 404 page can really turn people off, perhaps never to return to your site. So this information is very important so people can draw in readers who might otherwise leave in a huff.

I created a custom 404 page a while ago with the help of a friend who is a coder. I would have done it much sooner if I had known how.

This article will be very helpful both for site owners and readers. I am off to share this with others.
Twitter:

    Enstine Muki

    Hi Carolyne,
    Thanks for understanding the usefulness of this article and sharing it with others. I’m excited as I know this will bring me more exposure 😉

    Do have a wonderful week ahead and hope for more engagement in the days ahead
    Enstine Muki recently posted…How to generate more sales as bloggersMy Profile
    Twitter:

Adrienne

There you go Enstine, sharing with your readers how to create a 404 page.

In the future I intend to create something like what Igor has but for now as you know, mine is a little simpler. Hey, I was very proud of myself though for creating that one.

Now my nephew just created a blog and it’s not quite ready for the public but he went with Genesis so thanks for sharing how I can set this up for him since I use Thesis. It’s a new theme for me, Genesis, and I’ve been setting his blog up so I’ve been at least been able to play around with it. Now I can set him up a cool 404 page and he’ll love it.

Great share and thanks for the mention. I was so excited about your 403 creation that I had to share that with my readers. You know it was a big hit too!

~Adrienne
Twitter:

    Sherryl Perry

    Hi Enstine,
    Hi Adrienne,

    Enstine, when I read your post “Custom 403 Forbidden Error Page with no Plugin”, I was hoping that you’d write a followup post on 404 errors. Thanks!

    Adrienne, I believe that in Thesis 1.8, we can insert the code into the custom_functions.php file using the Thesis Custom File Editor.
    Twitter:

      Enstine Muki

      Hey Sherryl,
      Thanks for reading and sharing on social media. Yes, I had some readers asking if it’s possible to have a 404 error page without using a plugin. That’s part of the reasons I came up with this and I’m glad it’s well received.

      Thanks for engaging with Adrienne on this post too and do have a wonderful week ahead
      Enstine Muki recently posted…How to generate more sales as bloggersMy Profile
      Twitter:

      Adrienne

      Hey Sherryl,

      Yeah, I know. I mentioned in my comment that I already have one created. Probably did it a little over a year ago and it’s that easy with Thesis. Have fun!
      Twitter:

    Enstine Muki

    Thanks for sharing that 403 post on you post Adrienne. That for sure brought me more exposure.
    If you have any issue setting your nephew’s error page, I could be of help 😉

    BTW, though yours is quite simple, I found it quite effective. For the most part, simple things are the best 😉
    Enstine Muki recently posted…Hidden Blog Commenting Trick For Huge Traffic & Networking!My Profile
    Twitter:

Temilola Globalwalyy

Hello Enstine, No One wants his/her reader to land on error page and if they do, we should keep them busy with what to read, i think it will be better if we can just add recent post and most read post on 404 error page..

by doing that, our reader will find something to read. You are right, we can also use the opportunity to add a subscription box, special bonus etc..

Thank you for this wonderful post..
Twitter:

Angela McCall

Hi Enstine,

Awesome tutorial!!! And how did you know I use Genesis. This is awesome!!! Loved it. No plugins. Double awesome!! Will implement this ASAP. Thank you very much for writing this tutorial. Have a great weekend.

Angela
Angela McCall recently posted…How To Take Charge Of Your SEOMy Profile
Twitter:

Ryan Biddulph

Good stuff Enstine. Using a creative solution can improve user experience, especially when a 404 page pops up. Thanks for sharing.
Twitter:

Kaloyan Banev

404 tweaks are absolute necessity, well it is better not to have 404 pages at all, but sometimes things happen and content get deleted or drop from database from some reason.
Twitter:

Shalu Sharma

This is a great tutorial for creating your own 404-not-found page for WordPress. I think its something one must do irrespective of any theme they are using. I like the idea of setting it up with your own product.
Shalu Sharma recently posted…How much would you give this poor Indian Boy?My Profile
Twitter:

Naveen

Hi Enstine,

Plug-ins make poor loading time, this is great tutorial on creating custom 404 page w/o plugin. Thanks.
Twitter:

Nikhil Ganotra

Heyy enstine,
OMG !! Truly amazing guide. Recently, I recieved a guest post and without reviewing it I published it. After publishing that article I found that stopwords should be deleted from the permalink. When I deleted the stopwords it caused me an 404 error. I was very tensed about it but now you have provided me an ultimate sulution for that. Thanks a lot for sharing the effective guide:)

Have a great day Enstine 🙂
nikhil ganotra recently posted…Why and how google plus is a perfect hope for beginners?My Profile
Twitter:

Veronica Lee

Very helpful information and tips as always, Enstine! Currently, I am using Blogger but would definitely bookmark this page if and when I decide to switch to WordPress.
Have a nice day!
Twitter:

Tharun

Hi Enstine,
That was very much helpful post. Creating 404 page without using plugin is awesome. Thanks for you detailed guide on how to.

I am looking forward for more. Thanks
Twitter:

June

Hi Enstine,

This is a fantastic piece of advice. Thanks for explaining about the 404 error page not found. It makes more sense now.

I’m using Elegant Themes, and I’m pretty comfortable using PHP and HTML. I’ve got two blogs plus my business website. And I put them together myself. Well, I taught myself. It was a matter of trial and error. But I did it.:-)

I’m going to print out this post and follow your tutorial.

Thanks for sharing and for stopping by my blog. Have a good weekend. 🙂
Twitter:

Tim Bonner

Hi Enstine

I’m using the Dynamik Website Builder child theme for Genesis so this little piece of code will come in very handy.

I don’t need to mess about with the theme files, there’s a custom code section where I should just be able to slot that in.

A project for next week I think. Thanks for the tutorial. Very easy to follow.
Tim Bonner recently posted…SocialFans WP Responsive Social Counter Plugin ReviewMy Profile
Twitter:

igor Griffiths

Well hello Enstine, thanks for mentioning my 404 page. I had that created as I did not want to pay a monthly fee just to have an online service host my 404 pages, its great that you highlight how to code the changes to make the custom 404 page active.

Making your error pages provide value to your lost visitors is an overlooked opportunity.

I have recently switched themes to OptimizePress 2, its not massively impressing me as a blog theme, I have tried to add the redirect code to the themes files now and previously both times it has not worked, the developers of OP2 say to use a plugin called ‘404 to start’ to get this to work.

Not ideal as I prefer to limit the number of plugins I use.

igor
Twitter:

I. C. Daniel

I have installed a wordpress plugin to handle any broken pages, this way all visitors clicking one of my broken links(there was more than 300), I build another site and Google already indexed, now when I submit the sitemap show lots of errors, since I installed the plugin all errors gone. Now I’m thinking if a custom 404 page could do better than simply redirect them to home page. Hmmm…
Twitter:

Comments are closed