How to remove white space above header in WordPress

The mysterious white space of WordPress! A common problem and cause of frustration among new WP Template go-getters, trying to throw together their very first template.

Fear not!  There is an explanation for this anomaly and it lies in your nearly perfect code.  The white space that you see is actually where the WordPress user bar or navigation bar is displayed.  I spent an embarrassingly long time trying to figure it out (which is understandable when you are new to WordPress, heh!). The cause of the problem seems obvious after you figure it out.

The easy fix for this problem is to reinsert the snippet of code you forgot.  You are missing either the wp_footer or wp_head snippets, or both of them:

<?php wp_head(); ?> ### Place this before the </head> tag in your header
<?php wp_footer(); ?> ### Place this before the </body> tag in your footer

The above is the most common fix, but as usual, there are always other reasons why you might have this problem.  If our suggested fix does not work, search your code for any padding or margin value that could be causing the issue – a tiresome task that can usually be made a lot easier with a browser addon like Firebug, or Google Chrome’s / Firefoxes Developer tools.

Related Links – WordPress whitespace above header