Experiments in Art, Craft, and Food

The code

In part 1 we created a cool graphic to put on your 404 page.  (Part 1: Photoshop tutorial to make a “torn out” image)

Now, you need to integrate it into your 404 page, which is the page that comes up when a page is not found on the website. Again, I’ll be using the 404 page for Foodwhirl.com in this tutorial.

This tutorial will be written from a WordPress point of view, but I would assume if you have a bit of knowledge, you could use similar steps on any blogging platform.  Also, there are multiple ways to accomplish this, I just tried to come up with a way that is easy to explain and doesn’t require a ton of knowledge.  You should be able to do this without being an expert at getting into the code on WordPress, but be aware this does require some messing with code.

This is also a great tutorial if you’ve always wanted to know a little more about how to change your wordpress theme a bit.

If you’re going to be messing around with your CSS, a great tool to have is Firebug.   You install it on Firefox and then right click and choose Inspect Element.  That lets you view and change (temporarily) your css on the fly. 

I also recommend you install an FTP program, like Filezilla, or Fireftp, to make it easy to upload files.

Part 2:  Adding the graphic to your website 404 Page

Get set up

First off, take a look at your current 404 page.  If you want to know what it looks like, just type your web address, slash a page that doesn’t exist.  So for example:  http://Dabbled.org/sldalkgj will take you to Dabbled’s 404 page (which is what inspired this tutorial!) .

Note: If you don’t get a Page Not Found when you try this on your own site (like the homepage just reloads) then you’re missing your 404.php template in your WordPress theme.

So, we’ll need access to 2 files to fancy up our page:  style.css and 404.php.  You’ll find them in the wp-content/themes/yourthemename directory.   I recommend any time you’re going to mess around with your theme files, getting them via FTP and saving a local copy to work on, as well as a backup copy in case you screw up royally.

You’ll need a text editor.  I always use Notepad++, but regular Notepad or any plain text editor will work.  DO NOT use Word or anything like that.

So, we now both of our files open in our text editor.

Upload your image

You image must be on your server.  I would normally put it in wp-content/themes/yourthemename/images, and that’s what this tutorial assumes.  So upload 404image.png (or whatever yours is called) to this directory.

404.php

The 404.php page is what loads when you get a page not found error.  It will look different depending on your theme, but they will all pretty much have the same elements.

What we are basically going to do here is use the new graphic as a background on a div on the 404 page.  Don’t worry if that doesn’t make sense, I’ll walk you through.

Here is the code in my 404.php file for foodwhirl.com.  Yours probably looks similar.

<?php get_header(); ?>  

        <div id="container">    
            <div id="content">

            <div id="post-0" class="post error404 not-found">
                    <h1><?php _e( 'Not Found', 'your-theme' ); ?></h1>
                    <div>
                        <p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'your-theme' ); ?></p>
                    <?php get_search_form(); ?>
                    </div><!-- .entry-content -->
                </div><!-- #post-0 -->            

            </div><!-- #content -->        
        </div><!-- #container -->

<?php get_sidebar(); ?>    
<?php get_footer(); ?>

Look for the part of the page that has the 404 error text.  Something like “We’re sorry, but your page cannot be found”.  You can change this to something clever if you like by just modifying the text.  Note, to be safe, I’d stay away from special characters, apostrophes, and so forth in the error text.

Now, look for the div that surrounds your error text.  In the case of what I pasted above, div id=”content” is what we’re looking for (container would likely work too), and change it like so:

<div id="content">  becomes  <div id="content404">

(Techie note: there are more elegant ways to do this, but this is the easiest to explain in layman’s terms)

style.css

Next on to your style.css file.

You’re going to add this to the end of your css file.

 
#content404 {
    background: url(images/404image.png) no-repeat transparent;
    border: none;
    float: left;
    width: 653px;
    min-height: 600px;
}

The important parts of this are background (that sets the background to our new image), and min-height which i set to taller than my image.  The other items I got from the #content section of the css file.  Start with just adding the background, and if things look wonky go in and search for #content, and copy lines to your new #content404.

Now my 404 page looks like this:

The torn section looks fine, but the words are not in the right place, and it’s only showing up in that small section of the page.

So, improvements.

I decide I don’t want to show the sidebar, so I go to 404.php and remove the line:

<?php get_sidebar(); ?>

Then I centered the image, so my css now looks like this:

#content404 {

}

If you want your 404 image to overlay the header area (like it does on the Dabbled.org example) just move it up a little on the screen by adding something like:  margin-top: -50px;  to the #content404 section.

The Error Text

I also want to move the text so it displays on top of the image.

To do that I need to target the post text, which in my example would be this:

<div id="post-0" class="post error404 not-found">

You’ll notice there is already a class identified called error404.  If there isn’t one on yours, just add it in.

So in my css file I add:

.error404 {
background-color: rgba(256, 256, 256, .5);
font-size: 1.2em;
padding-left: 300px;
    padding-top: 50px;
    width: 200px;
}

• The background color setting adds a semi-transparent white box behind my text for better readability against the image.
• I increased the font-size to my liking, and used the padding settings to move the text to where I wanted it on the screen.
• I set the width of the text area as well.

Now this is what I have:

Obviously, your settings will be different on your text area to get it to the right spot.  This is where firebug comes in really handy, as you can Inspect Element and change width and padding to get it where you want it, then just copy those settings over to your style.css.

And here it is in action: http://foodwhirl.com/notarealurl

That’s it!