Custom Error Pages

Create branded error pages for a better user experience

What are Error Pages?

Error pages are displayed when visitors encounter HTTP errors on your website. Instead of showing generic server error pages, you can create custom, branded error pages that provide helpful information and maintain your site's design.

Common HTTP Errors

400 Bad Request - Invalid request from client
401 Unauthorized - Authentication required
403 Forbidden - Access denied
404 Not Found - Page doesn't exist (most common)
500 Internal Server Error - Server-side error
503 Service Unavailable - Server temporarily unavailable

Creating Custom Error Pages via cPanel

Log into cPanel
Find "Advanced" section
Click "Error Pages"
Select the HTTP error code (e.g., 404)
Design your custom error page using HTML
Use provided codes for dynamic content
Click "Save"

Available Template Codes

cPanel provides special codes you can use in error pages:

 - URL that linked to the error page
 - Visitor's browser info
 - Content types browser accepts
 - Your domain name
 - Requested URL that caused error
 - HTTP status code

Sample 404 Error Page

<!DOCTYPE html>
<html>
<head>
  <title>404 - Page Not Found</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
    h1 { font-size: 72px; margin: 0; }
    p { font-size: 18px; }
  </style>
</head>
<body>
  <h1>404</h1>
  <h2>Oops! Page Not Found</h2>
  <p>The page you're looking for doesn't exist.</p>
  <p>Requested URL: <!--#echo var="REQUEST_URI" --></p>
  <p><a href="/">Return to Homepage</a></p>
</body>
</html>

Creating Error Pages via .htaccess

Alternative method using .htaccess file:

ErrorDocument 400 /errors/400.html
ErrorDocument 401 /errors/401.html
ErrorDocument 403 /errors/403.html
ErrorDocument 404 /errors/404.html
ErrorDocument 500 /errors/500.html
ErrorDocument 503 /errors/503.html

Create corresponding HTML files in /errors/ directory.

Best Practices for Error Pages

Do's

Match your branding
Keep it simple
Be helpful with clear explanations
Include navigation links
Use conversational language
Include search box if applicable
Link to popular pages

Don'ts

Redirect 404s to homepage (bad for SEO)
Use generic server error messages
Blame the user
Use technical jargon
Make error pages look scary

Testing Error Pages

Testing 404 Page

Visit a non-existent URL on your site:

https://yourdomain.com/this-page-does-not-exist

SEO Considerations

Return Proper Status Code - Ensure 404 pages return 404 status, not 200
Don't Redirect - Don't automatically redirect to homepage
Include Useful Content - Help visitors find what they need
Fix Broken Links - Use 404 pages to identify and fix issues
Internal Search - Add search box to help visitors

WordPress Error Pages

WordPress automatically handles 404 errors using your theme's 404.php template. To customize:

Edit 404.php in your theme
Use a plugin like "404page" for easy customization
Or create child theme with custom 404.php

Monitoring 404 Errors

Track 404 errors to identify and fix issues:

Check access logs in cPanel
Use Google Search Console
Install analytics to track 404s
Use plugins like "Redirection" (WordPress)
Set up Google Analytics event tracking

Maintenance Mode Page

Create a temporary maintenance page via .htaccess:

RewriteEngine On
RewriteCond %{REMOTE_ADDR} !^123\.456\.789\.000
RewriteCond %{REQUEST_URI} !^/maintenance\.html$
RewriteRule ^(.*)$ /maintenance.html [R=503,L]
ErrorDocument 503 /maintenance.html
Header Set Cache-Control "max-age=0, no-store"

Replace IP with your IP to allow your access during maintenance.

Pro Tip

A good custom 404 page can turn a negative experience into a positive one. Include humor, helpful links, and make it visually appealing. Some of the best 404 pages become memorable parts of a site's brand.