Custom Drupal 404 Pages

A while ago, our creative director asked me to implement a custom 404 page on our corporate website. We were tired of the generic drupal 404 page and wanted to give it our own “cheeky” touch.

Of course with drupal, there are a few different ways to accomplish this. So I decided to use a custom preprocessor and PHP template for our application.

Basically, what we are going to do is create a new PHP template called page–404.tpl.php and modify the code to suit our needs. But before we can get started, we first need to tell drupal about this new template.

Step 1: This is where all the magic happens. Add the following preprocessor to template.php in your custom theme. This will be located at: sites/all/themes/themename/template.php

/**
* Implements template_preprocess_page().
*/

function themename_preprocess_page(&$vars) {
 // Adds a Custom 404 page
 $header = drupal_get_http_header("status");
 if($header == "404 Not Found") {    
   $vars['theme_hook_suggestions'][] = 'page__404';
 }
}

Note: Replace themename with your custom theme name. Underscores are converted to dashes.

This will create the necessary theme hook suggestion and tell drupal to use page–404.tpl.php if it returns a 404 page.

Step 2: Now that drupal knows about the new page template, we can completely customize the look and feel of our 404 page. For most people, you can just copy the code from page.php into page–404.tpl and customize it appropriately. However, we took this one step further and gave this page its own unique layout and CSS.

Need some help with your big Drupal project? Our Cheeky Monkey Drupal Development team loves to work quietly in the background helping out with Drupal projects your team might not have time for. The best thing? You get all the credit! Give us a call.