Take Care of the Admin Bar in your WordPress Theme

When the admin bar is shown, WordPress puts a little piece of CSS into your page in order to add that little top margin needed to accommodate the toolbar. This, in general, will be enough to make your page shift down whenever the admin bar is visible, without requiring any special effort in the design of the theme. However, in certain cases, this mechanism can break down, especially when your theme contains some elements with absolute or fixed positioning at the top of the page like a menu bar or a logo. In this case you may need to put some extra style rules to your CSS or add a bit of logic in the PHP code.

WordPress Admin Bar CSS

As you can see by looking at your page HTML code from your browser, WordPress is adding these lines of CSS into the header section of the HTML document when the admin bar is visible:

The first line of code is adding a margin-top of 32 pixels to the html DOM Element (46 pixels if we are on a mobile screen). The !important attribute in the declaration overrides the effects of any other declaration for the margin-top property.

The second line will be applied in the case where the page is embedded inside another page, and in this case the margin-top is applied to the body element.

Take Care of the Admin Bar Using CSS

Let’s say you have a menu bar with absolute positioning at the top of your page:

You can make the menu div reposition correctly when the admin bar is shown by simply setting a position: relative; for the body element.

An element with position: absolute; is positioned relative to the nearest positioned ancestor^[a]. A “positioned” element is one whose position is anything except static. Since the static position is the default value for every element, we need to set a relative position to the ancestor that we want to use for our relative positioning, hence the position: relative; for the body:

Alternatively, we can wrap the menu div inside another div with a position: relative;

Now, let’s say that you have a sticky fixed element at the top right of your page:

For the sticky fixed positioned element, since the fixed positioning is always relative to the viewport, we can leverage the fact that when the admin bar is shown, the body element contains the class admin-bar:

Take Care of the Admin Bar Using PHP

We can also handle the admin bar in the theme PHP code. The first thing we can use is the is_admin_showing() function. This function returns true when the admin bar is shown in the page, so we can add something to the page according to the visibility of the admin bar.

The last, more powerful, thing we can do is changing the style tag that WordPress is adding to the header.

WordPress is using a default callback function to add the style tag when the admin bar is initialized. We can override this callback using the add_theme_support() function. It should be done in the theme’s functions.php file to work, and the theme support should be added on the ‘after_setup_theme’ event. Here is the code:

Notes

1. CSS Layout – The position property [↩]