Creative 404 via CSS-Tricks.com
[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]
Your 404 Page is the page that shows up when a search engine or a visitor can’t find a particular page.
Technically speaking, a 404 or ‘Not Found’ page is an error message created when the client (blog visitor) is unable to find the particular piece of information that was requested from your blog’s server, like an image, media, blog post, comment, and other such things.
And I can guarantee that users and search engines are making contact with your broken links daily – so how are you going to fix those links and capture the attention of an interested visitor and user?
The first answer is to fix broken links (and you can read how I do this one way here) but there’s no way that you can possibly capture every bad link, especially the links that are coming to your site that are simply misspelled and/or bad!
So your job, therefore, is to make your 404 page helpful and usable – more usable and feature-rich than what typically comes out of the box.
You see, most 404 pages in WordPress are nothing special – in fact, they are rather boring and drab. More than likely you’ll see something like this:
404 - Not Found
And here’s another simple example from another blog theme:
Another 404 page
Not too helpful, right?
But, if you take a look at my example 404 page (click here for a broken link) you’ll see that I’ve crafted it to actually be quite helpful:
My 404 Page Template
An Overview of My 404 Template:
What you’ll find in my 404 page are the following elements:
- Clever or silly image – I’ve found that you can give a little “spice” to your 404′s by having a silly image.
- Content that explains why someone might be here as well as solutions.
- Popular pages that the user might want to visit.
- I’ve included links to Twitter and Facebook as well as options to Subscribe. Might as well, right?
- Popular (and strategic) blog posts that you might want to get them to visit.
- Google Custom Search ability right in the 404 page.
- Next I’ve listed out the last 10 blog posts automatically since I’ve discovered that most bad queries happen to the most recent blog posts. This is especially true if I’ve actively editing bad links and correcting broken links – the only stuff that will be broken is the newer posts!
- Final option to email me directly, just in case. I do this to really let them know that I want to help them find what they were looking for! This is also helpful because it’ll give them an opportunity to let me know about something that might be broken on my blog.
Of course, I’ll modify this page overtime as things change or as I add more pages for people to jump into if they get to the 404 page.
Creating or Modifying Your 404 Template:
There she is...
Many of the WordPress Themes that your already using will have a 404.php file that houses your 404 page template.
For example, the theme that I’m using has a 404.php file already in the theme files (see at the right).
If you do have this 404.php file then you’re already good to go and can begin modifying the template with your own text, images, and post query calls.
But, if you don’t have a 404.php file in your template folder then you can easily create it manually by adding the file and then adding the relevant code.
Please note that there is no guarantee that the following code will work with every single WordPress Theme but this is a great place to start (this is the most basic):
1 2 3 4 5 6 | <?php get_header(); ?> <div id="content" class="narrowcolumn"> <h2 class="center">Error 404 - Not Found</h2> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
You would then customize the template to work specifically with your theme.
Another option is to simple copy your index.php file and then name the copied file 404.php and then adjust the contents within the template to a better title and with the elements that you’d like to have.
For example, the code that I’ve used to create the loop for the last 10 blog posts is as follows:
1 2 3 4 5 6 7 | <ul> <?php query_posts('posts_per_page=10'); if (have_posts()) : while (have_posts()) : the_post(); ?> <li><?php the_time('Y, M j') ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile; endif; ?> </ul> |
Or, if you’d like to use wp_query you can use this:
1 2 3 4 5 6 7 8 9 | <ul> <?php $recentPosts = new WP_Query(); $recentPosts->query('showposts=10'); ?> <?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?> <li><?php the_time('Y, M j') ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> |
Make sure that it gets captured by your server by adding this to your .htaccess file:
1 | ErrorDocument 404 /index.php?error=404 |
In this way you’ll be able to send all your visitors to your 404 page by your web server by configuring it for this custom 404 error handling.
And that’s about it! Have fun with it but ultimately make it practical and super-helpful. Would love for you to share your 404 pages with me so let me know and give me a link to check out!
Enjoy.
[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]
Great stuff brother. I have always had fun with the 404 pages on my sites.
I expect this page to be updated soon…?
Oh, snap!
wahhhh.
Lol
I’ll have to update my 404! It’s looking a bit dull…
jump on it!
Just so I don’t mess anything up, I would have to edit the .html within the 404.php file to modify this page right?
I checked in WP under add new page<page attributes<templates, and 404 isn't one of them.
Thanks dude!
Same question here.
i’m sorry, yes. the answer is yes. you’d have to edit a bit.
sure thing chris!
Nice tips! I like it. I’m going to put this on my to-do list.
Great idea, John. I’m definitely going to have to update that to make it a little more visually appealing, and user-friendly.
Quick unrelated question. My Google analytics has been showing no visits for the past few days, which I know is not true. Could something be broken, and what would have caused it? I was thinking maybe it was connected to some tweaks I did in Standard theme last week…
hmm. yes. you’ll have to check your settings. did you update the code in the standard theme settings?
Awesome. Awesome. Awesome. I’m doing this later today.
Ok, mine is up.
I followed your “template” but added a few theological twists of my own.
This is a bad link.
sweet!
omg. theist/deist? omg. lol.
That is funny! Thanks for suggestions and the coding info!
sure thing mike.
Brilliant.
Creating a more interesting 404 page was something I did before I even launched my site, but it appears I could put a little more work into it.
wow, you’re ahead of the curve!
This is a great idea, however, I know absolutely nothing about HTML. Is there a way to edit my file with needing to know HTML. I know where to go to get the file and access it but that is it…
Thank you!
There are a lot of plugins out there that do this. I discovered earlier today, however, that the plugin I was using had stopped working with the newest version of wordpress. So far I have not been able to find one that did.
I think another way to do it would be to create a page and simply copy and paste the html into the page. However you would have to be careful as to WHERE you pasted it or you might mess something up.
and…… this is the reason why i choose to do it myself! i really try to limit the amount of plugins that i use (except the ones that i built myself) because i don’t want my blog to be dependent on plugins that might not be updated regularly or might actually end up penalizing my blog in terms of traffic and SEO…!
better to do it by hand and manually…
I’ve been looking at this same thing. I’ve been trying to do things by editing my theme files manually if possible, (which reminds me, I should start keeping a changelog) and this is just another thing that I ended up killing a plugin for (it’s my second one today as well).
haha.
i enjoy the challenge and danger of editing in live environments.
uahahaha
you can edit it via the wordpress theme editor in your back admin.
OK I was able to get the HTML in the right place and it works! I did that by creating a private page with the information that I wanted went to the HTML code and copied and pasted it to the 404PHP page. It took a few trial and errors to get the right location but it works. Only think is I would like to have some blank lines. But am not sure now how to insert blank line using HTML. Can someone please tell me what the HTML code is for a blank line?
Thank you!
Mike Lane
Oops..
Thank you!
thanks jeremy!
I admit, when I saw “Eror 404 page” on someone blog I panicked and quickly close the window with a blog.. Well, I see why it is important to have good one. Once I saw a funny picture on 404eror it was a nice suprise, worth of experiencing error 404:)
John, may I ask you (it’s offtop question, but I couldn’t find a “search form” anywhere on your blog) – what tools do you use to create this “light-silver-flash-effect” (something like.. fading perhabs?) for subscribe Image and other images on right sidebar as well?
I’d also wanted to ask, how you managed to display this “Posted in Tips with 13 Comments” on the top of your post?
Thanks a lot!
search form is on the right sidebar….?
O.K. I missed it. There was too much awesomeness in between.
ah. doh! this is good to kow though… people need to see it.
to answer your other questions, it’s simply wordpress code that lets me do the “posted in tips”. i changed it in my single.php file.
for the “silver” effect it’s just a “fade” option via css and styling.
I’ve thought about this, but never done really known how to do it before. Thanks! This is now on my to-do list! Your blog is making my blog awesome! lol
sweet! rock it!
I guess this is the only page that many of us don’t really bother with and we end up just making it as boring as possible with out even realising that we are putting off our readers away from our site. What you have show here is a great way of keeping the readers on the site and not feel that they have done something wrong and to not make them feel that they don’t deserve to read the rest of your content. This is something I will defiantly be spending a little more time. Good job.
sir, this comment explains A LOT of the core motivation. you are right on!
Oh. My. Goodness.
I don’t think it’s ever crossed my mind to have a helpful and useful 404 page such as you do. Cute, yes. Attractive, yes. But one that routes you to top posts – that’s brilliant.
it’s worth it since we tend to get a lot of 404s over time.
This is kinda off topic but who would you recommend for writing some customized code?
Does your company do that type of work?
yup.
Cool
How do I access that?
me@john.do
Eeeek! Yet another task to add to my list!
Love it!
take your time…
Have you been to the VisitSteve.com 404 page?
http://visitsteve.com/404.html
It’s very funny. And very awkward.
(Sort of) worth your time.
#LOL i watched the entire vid.
Holy I no longer feel like a complete noob batman!
Though I “borrowed” heavily from your format, (ok ok I basically stole it) I have updated my 404 page
This was an day long adventure for me. I hope that I got everything coded the way it *should* be and not just in a way that works.
great job!
Great post, great idea.
Just finished mine (borrowing from your style) but I am happy with the results and enjoyed working the code out for most of it.
you can check it here http://www.digital-mission.net/fff
awesome! well done!
I just tried creating something real quick this morning but I guess I don’t know .php as well as I thought. I’ll have to revisit this later.
which blog?
Http://grahambrenna.com
ah. hmm. weird.
John, do you have this built into Standard Theme?
a 404? not currently customizable.
Awesome dude, thanks a lot