Custom 404 Page
Replaces the default WordPress 404 template with a styled, on-brand error page including a home link.
Module2 parts · by SnipCraft
PHPLogic
php
<?php
add_action( 'template_redirect', function () {
if ( ! is_404() ) {
return;
}
status_header( 404 );
nocache_headers();
get_header();
echo '<div class="scseed-404-wrap"><div class="scseed-404-inner">';
echo '<span class="scseed-404-code">404</span>';
echo '<h1 class="scseed-404-title">' . esc_html__( 'Page Not Found', 'default' ) . '</h1>';
echo '<p class="scseed-404-msg">' . esc_html__( 'The page you are looking for might have been moved or no longer exists.', 'default' ) . '</p>';
echo '<a href="' . esc_url( home_url( '/' ) ) . '" class="scseed-404-btn">' . esc_html__( 'Back to Home', 'default' ) . '</a>';
echo '</div></div>';
get_footer();
exit;
} );CSSStyles
css
.scseed-404-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 55vh;
padding: 40px 20px;
text-align: center;
}
.scseed-404-inner { max-width: 480px; }
.scseed-404-code {
display: block;
font-size: 100px;
font-weight: 800;
line-height: 1;
color: #7c5cff;
margin-bottom: 16px;
}
.scseed-404-title { font-size: 26px; margin: 0 0 12px; }
.scseed-404-msg { font-size: 16px; color: #666; margin: 0 0 28px; }
.scseed-404-btn {
display: inline-block;
padding: 11px 26px;
background: #7c5cff;
color: #fff;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
transition: background 0.2s;
}
.scseed-404-btn:hover { background: #6244e0; color: #fff; }#branding#ux#templates#404