Customizing the 404 error message page on your WordPress site can transform a potentially negative experience into a positive one. It reinforces your brand identity and keeps users engaged even when they encounter a missing page.
To replace the default, intimidating 404 error page, simply paste the following code to your ‘functions.php’ file. You can add a custom message, a search bar, or even links to popular pages.
For this example, we simply changed the background and font colors of the page. Feel free to add more elements to your liking, such as custom logos and images, within the HTML tags.
function custom_404_error_message() {
if (is_404()) {
// Set the HTTP response status code to 404
status_header(404);
// Output the custom 404 error message
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Not Found</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #ff0000;
}
p {
color: #333333;
}
</style>
</head>
<body>
<h1>404 Not Found</h1>
<p>Oops! This page does not exist.</p>
</body>
</html>';
exit;
}
}
add_action('template_redirect', 'custom_404_error_message');
.
.