12

I am creating a custom theme, and elements behave as they should but when I place the <?php wp_head() ?> tag I get a top margin, at the top of my theme header.

When I remove the <?php wp_head(); ?> the margin goes away. I have been at this for a while any help would be great.

Improve this question
1
  • 1
    something that hooks into wp_head is outputting space before any html is output?
    – Milo
    May 19, 2011 at 4:15

8 Answers 8

Reset to default
12

Hard to saw without looking at it, but an educated guess:

More than likely it is the CSS for the admin bar, which only appears when you are logged in. the <?php wp_head() ?> will include the css for it, and <?php wp_footer(); ?> includes the html for the admin bar.

If you look, it should actually be a margin-top added to the html tag.

Improve this answer
3
  • agreed, seen this problem a few times
    – MartinJJ
    May 19, 2011 at 7:48
  • 1
    Yeah, I've helped out several people and seen this. I think the biggest issue is people not including the wp_footer() in template
    – Ryan Gibbons
    May 19, 2011 at 15:21
  • To the OP - I think you should accept this answer.
    – Greeso
    Jul 6, 2015 at 4:28
2

If you try to hide the Admin Bar by hooking into the show_admin_bar filter, but do this too late (init with the default priority is too late for example), you will get an extra 28px top margin but no admin bar there.

Improve this answer
2

The margin style block is output by the _admin_bar_bump_cb function which runs on the wp_head action. You can remove the action by calling:

remove_action('wp_head', '_admin_bar_bump_cb');

I placed it in my enqueue scripts function hook and it successfully removed the top margin output, but I'm sure you could place it anywhere in the functions.php and have it work correctly.

That way you don't need a silly override in your css =)

Improve this answer
1

This happened with me as well, this space is for the admin bar at the top of your theme which gets displayed to a logged in user.

If you have logged in to your WordPress dashboard in the same browser in which you're using the custom theme, then there is the problem.

Simply log out from the WordPress admin account and open your custom theme again.

Improve this answer
1

I also encountered the same problem and I solved it by adding this:

html{ margin-top:0px !important;}

Put at the top of your theme's CSS file.

Improve this answer
1
  • 2
    this answer doesnt work because the 28px is added inline which takes precedence over anything in a css file
    – user11913
    Jan 10, 2012 at 18:46
1

adding "margin-top: 0px !important" to the top of your CSS file actually will work, but ONLY if you re-arrange your header information to call the css file AFTER wp_head gets called.

the lowest CSS attribute will get applied, 100% of the time.

Improve this answer
1
  • "The lowest CSS attribute will get applied, 100% of the time." - Not necessarily, depends on the specifity of other selectors that are present.. eg. #content div.somediv will always have priority over div.somediv regardless of where the latter is defined.
    – t31os
    Apr 29, 2013 at 9:02
0

You should see what class is adding the margin with firebug or a similar tool.

Improve this answer
-1

Try this,

html { margin-top:0px; padding-top:0px; }
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.