Remove the WordPress admin bar’s inline CSS

The below code overrides the default callback in the WP_Admin_Bar class with a blank function.

This simple trick prevents the WordPress from adding inline CSS block in the <head>. This style block causes the margin on top of the page to appear which is problematic with sticky headers etc. and difficult to override in your actual CSS.

You can also create a ‘real’ callback if you’d like so. I personally prefer to include my admin bar customisation in a general stylesheets and scripts as I am using pre-processing and partials. But it can probably be a handy option for those who type strict PHP/HTML/CSS/JS, or just need a quick fix.

/**
*
*  Override _admin_bar_bump_cb - a default callback for WP_Admin_Bar
*
*  Prevents WP from adding a margin on top of page when logged in. 
*  (Adding a dummy function as it has to contain something – WordPress adds the default one if callback is empty)
*  It might render the admin bar invisible, in such case you can use your own CSS to make necessary adjustments.
*
*/
add_theme_support('admin-bar', ['callback' => function() {} ]);

Add a comment