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

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.

Thanks for sharing

Here is your TweetLow voucher: OPENL

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( 'https://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

45 thoughts on “Create your custom 404 page not found – no plugin required please!”

  1. 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!

  2. 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!

  3. 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.

  4. 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,

    • Hi Wayne,
      Good to see you around today and thanks for the comment πŸ˜‰

      There are quite many interesting things one can place on this error page. The mini-sitemap and the search field are common. Any other thing to keep your visitors can be more interesting πŸ˜‰

      BTW, I’ll be going over to your blog for more engagement

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

    Thanks for sharing.

  6. 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.

    • Hi Sunday,
      Plugins have their own negative sides – security issues, speed issues, etc so if we can keep them as few as possible, that will be good for our blogs. That’s why I look for solutions without using them πŸ˜‰

  7. 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.

  8. 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.

    • 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

  9. 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

    • 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.

      • 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

      • 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!

    • 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 πŸ˜‰

  10. 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..

    • Hey bro,
      I think WordPress’s default page has a section for recent post. Add the most read too won’t be a bad idea. Have you figured how to do that?

  11. 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

    • Hey Angela,
      I think you mentioned it somewhere that you are running on Genesis πŸ˜‰
      However, let me know when you finally get this up.

      Do have a wonderful Sunday

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

  13. 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.

    • A lot of things get happen that either change the permalink or remove content from db Kaloyan. So having this custom page in place is a better option πŸ˜‰

      Thanks for showing up and do have a wonderful weekend

  14. Hi Enstine,

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

  15. 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.

    • Hi Shalu,
      The 404 error page is one page very highly reached on our blogs. It’s a good thing to put something of value on it

      Thanks for the visit and engagement. Do have a wonderful weekend

  16. 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!

    • Hi Veronica,
      Thanks for reading and commenting.
      Let me know when you are to switch.
      Do have a wonderful weekend

  17. 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

  18. 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 πŸ™‚

  19. 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. πŸ™‚

    • Hi june,
      Welcome to my blog and engaging. Very pleased to see you around πŸ˜‰

      I’m glad this post is that helpful. I have not used Elegant Themes but it should be no big issue for me to go through πŸ˜‰ Though I see you are comfortable with PHP and HTML, I’ll see be glad to give you a helping hand

      Let me know how it goes and do have a splendid weekend

  20. 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.

    • Hey Tim,
      Some genesis child themes have that custom code section where you can add actions to the code system without having to edit any of the files. I didn’t find this on some child themes so I decided to base this tut on a more widely available option

      I’d like to know when you finally get that done on your blog by next week

      Do have a wonderful weekend Tim

  21. 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

    • Hi Igor,
      This thing is too simple to waste money on it πŸ˜‰
      I plan to do many of such tutorials to help my readers take down many plugins from their blogs.

      Thanks for offering the image and do have a wonderful weekend

  22. 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…

    • Hey Dan,
      Many bloggers are beginning to keep away from plugins
      Any solution without plugin seems to be ideal

      thanks for your input bro and do have a wonderful weekend

Comments are closed.