How to create a custom 404 error page with CodeIgniter?

Introduction

The following has been tested on a Cloud9 server with the following versions:

Modifying error_404.php

There is two ways for creating a custom 404 error page with CodeIgniter. The first one is simply to customize the file /application/views/errors/html/error_404.php. Modify this file and replace his content with your custom page.

This solution is fine, but not perfect. With CodeIgniter we are usualy using templates for header or footer. By modifying the content of the previous file you can't use your custom header and footer. That's a problem if for example, you use Bootstrap. If you want to update the Bootstrap version you'll have to update it in your template and in your customized error_404.php. In my opinion, the best option is to override the route to this page.

Overriding error 404

CodeIgniter offers you the possibilty to override the controller in case of page not found. In the file /application/config/routes.php, add the following route.

$route['404_override'] = 'errors/error404';

This route must be added at the end since routes will run in the order they are defined. Higher routes will always take precedence over lower ones. In case of error, the method error404() from Errors controller will be called.

Controller

Create a new controller file /application/controllers/Errors.php, copy and customize the following content:

<?php

// Error controller
// This controller is used to manage the errors (404)
class Errors extends CI_Controller 
{

    // Main controller for the contact form
    public function error404()
    {
        // Create your custom controller

        // Display page
        $this->load->view('templates/header');
        $this->load->view('errors/error404');
        $this->load->view('templates/footer');
    }
}

View

Create a new file in /application/views/errors/error404.php. In this file, you can create your custom content, for example:

<div class="text-center text-secondary">

    <h1 class="display-1">
    <i class="far fa-frown fa-2x"></i>
    </h1>
    <h1 class="display-1 text-danger font-title font-weight-bold">404</h1>
    <h3 class="display-4 font-title">Page non trouvée</h3>

    <div>
        La page que vous tentez d'afficher n'existe pas ou une autre erreur s'est produite.
    </div>
    <div>
    Vous pouvez revenir à <a href="javascript:history.back()">la page précédente</a> ou aller à 
    <a href="/">la page d'accueil</a>.
    </div>

</div>

Page d'erreur personalisée pour CodeIgniter

Note that this example requires two external scripts FontAwesome and Bootstrap.

The show_404() function

The previous doesn't work when the show_404() function is called. Since CodeIgniter is open source, you can update the source code of the function in /system/core/Common.php. Personaly, I don't like modifying framework core. So I suggest the following tip. At the beginning of /application/views/errors/html/error_404.php, add a redirection to a page that does not exists, for example /404_override/. When the show_404() function is called, your custom 404 error page will be displayed:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

// ADD THIS REDIRECTION
header('Location: 404_override');

?><!DOCTYPE html>
<html lang="en">
//...

See also


Last update : 10/04/2018