How to Create Custom 404 Error Page in CodeIgniter
A custom 404 error page lets you display a well-designed page when a page-not-found error occurs. It makes a web application user-friendly and helps the user to navigate back to your website. Without a custom 404-page, an error message appears on the screen when the user clicks on the broken link or nonexistent URL. The visitors may leave your site for page-not-found error, to overcome this problem custom 404 error page gives an opportunity to display a customized message page with homepage redirect link.
There are many reasons for having a 404 page in CodeIgniter. Mainly the broken links are responsible for showing a 404 error page. CodeIgniter displays default 404 page when a 404 error occurred. You can easily customize 404 (Page-not-found) error page as per your needs.
In this tutorial, we’ll show you a simple way to create custom 404 error page with navigation link in CodeIgniter. You don’t need to create any controller or modify any functionality for that.
Before going through this tutorial create an HTML of your 404 error page. Basically, the 404 error page is a simple HTML page with navigation link for back to the homepage.
Go to your web application directory and open the application/views/errors/html/error_404.php file in a editor. Remove the existing HTML and insert your 404 error page HTML.
To use base_url() or any other CodeIgniter functions, CI_Controller class need to be initialized. In the following CodeIgniter’s 404 error page, we’ve placed custom 404 error page HTML with Back to Home navigation link. Also the base_url() function is used to add homepage link and load image from assets folder.
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php
$ci = new CI_Controller();
$ci =& get_instance();
$ci->load->helper('url');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>404 Page Not Found</title>
<link href='http://fonts.googleapis.com/css?family=Amarante' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
background:url(<?php echo base_url(); ?>assets/images/bg.png);
margin:0;
}
.wrap{
margin:0 auto;
width:1000px;
}
.logo{
text-align:center;
}
.logo p span{
color:lightgreen;
}
.sub a{
color:white;
background:rgba(0,0,0,0.3);
text-decoration:none;
padding:5px 10px;
font-size:13px;
font-family: arial, serif;
font-weight:bold;
}
.footer{
color:#555;
position:absolute;
right:10px;
bottom:10px;
font-weight:bold;
font-family:arial, serif;
}
.footer a{
font-size:16px;
color:#ff4800;
}
</style>
</head>
<body>
<img src="<?php echo base_url(); ?>assets/images/label.png"/>
<div class="wrap">
<div class="logo">
<img src="<?php echo base_url(); ?>assets/images/woody-404.png"/>
<div class="sub">
<p><a href="<?php echo base_url(); ?>">Go Back to Home</a></p>
</div>
</div>
</div>
</body>
</html>
After customized the application/views/errors/html/error_404.php file, try to browse non-existent URL. You’ll see custom 404 page is appeared like the below.
