On my local machine, I have a simple 404 page set up.
I made changes to my .htaccess file:
ErrorDocument 404 /wordpress/wp-content/themes/test_theme/404.php
The 404 page loads properly, but as soon as I include wp_head();, the layout breaks. The background color still appears fine, but the rest of the content doesn't display.
<!DOCTYPE html>
<html lang='en-gb'>
<head>
<title>404 Error</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background-color: #111;
}
.board {
position: absolute;
top: 50%;
left: 50%;
height: 150px;
width: 500px;
margin: -75px 0 0 -250px;
padding: 20px;
font: 75px/75px Monoton, cursive;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 80px red, 0 0 30px firebrick, 0 0 6px darkred;
color: red;
}
#error {
color: white;
text-shadow: 0 0 80px white, 0 0 30px green, 0 0 6px blue;
}
</style>
<?php wp_head(); ?>
</head>
<body>
<div class="board"><p id="error">error</p><p id="code">404</p></div>
<h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'twentythirteen' ); ?></h2>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p>
<?php get_search_form(); ?>
</body>
</html>
I'd like to incorporate some JavaScript using:
if(is_404()){ wp_register_script('404',get_template_directory_uri().'/js/jquery.novacancy.min.js', false, NULL, true);
wp_enqueue_script('404');
}
However, when I add wp_footer();, it causes issues and seems like WordPress is interfering with my 404 page layout.