Don’t get me wrong. I love the Admin Bar that WordPress shows on sites that I maintain. But, there are a few things that I want to change.

  1. Move the Admin Bar to the bottom of the screen.
    The top of the screen is prime real estate. And on sites that I maintain, I tend to design/tweak themes. So, moving the very useful bar to the bottom of the screen keeps it available but does not obscure the design.
  2. Hide the Admin bar on mobile (phones, etc).
    When I load a site that I maintain on my phone, I am doing it to check on the design. For my use case, the bar adds no value there.
function move_admin_bar() {
  if (is_admin_bar_showing()) {
    echo '';
  }
}
add_action( 'wp_head', 'move_admin_bar' );

Stepping through the code, first it checks if the Admin Bar is being displayed. If so, it continues. If not, nothing else happens.

Then, it checks if the current device is a mobile device. If so, it hides the Admin Bar and shifts the BODY tag to hide the empty space. If not, it attaches the Admin Bar to the bottom of the screen.

To run this code, copy it to the functions.php in your current theme.

And, as a bonus, if you want to change the color of the Admin Bar to match your theme, put the following code into your style.css file in your current theme.

div#wpadminbar {
  background-color: #461451 !important;
}

Happy editing 🙂

☕ Cup of Coffee

A ridiculous amount of caffeine was consumed while researching.

Add some fuel if you would like to help keep me going!

☕ $5 ☕ $10 ☕ $15 ☕ $20 ☕ $25 ☕ $50

Previous Post Next Post