How to create a custom 404 error page with CodeIgniter?

Introduction

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

Linux 4.9.120-c9 (How to check my Linux version?)
Ubuntu 14.04.5 LTS Trusty (How to check my Linux version?)
PHP 7.2.9 (How to check my PHP version?)
CodeIgniter 3.1.9

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

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 redirect ('/404_override'); ?><!DOCTYPE html> <html lang="en"> //...~~

The previous doesn't work when the show_404() function is called. To solve this problem, the best option is to overide the show_404() function. To do so, create a the file application/core/MY_Exceptions.php with the following code:

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

class MY_Exceptions extends CI_Exceptions {

    function __construct() {
        parent::__construct();
    }

    // Overide the 404 error
    public function show_404($page = '', $log_error = TRUE)
    {
        // Since $this is not available, use $this->CI instead
        $this->CI =& get_instance();

        // Your awesome code here!
        // ...
    }
}