5

How can I override the admin-bar so that it matched the style of the backend admin area of Wordpress? Should that disable the default and clone the admin-bar.css and modify that file is good idea?

1 Answer 1

10

You can override admin-bar with this function, don't need to mess with admin-bar.css.

Steps:

  1. Write your css
  2. Put inside the function (given below)
  3. Add this inside functions.php

    // customize admin bar css
    function override_admin_bar_css() { 
    
       if ( is_admin_bar_showing() ) { ?>
    
    
          <style type="text/css">
             /* add your style here */
          </style>
    
       <?php }
    
    }
    
    // on backend area
    add_action( 'admin_head', 'override_admin_bar_css' );
    
    // on frontend area
    add_action( 'wp_head', 'override_admin_bar_css' );
    
4
  • 4
    +1 but on wp_head you should probably check first if the admin bar is displayed at all, to prevent the CSS being added for not logged in users Jul 16, 2018 at 4:55
  • 1
    Thanks @MarkKaplun, added the condition to check if admin bar is displaying. Jul 16, 2018 at 5:07
  • Could you actually explain what the different parts of your solution do? What is "backend area" and what is "frontend area"?
    – posfan12
    Apr 2, 2021 at 0:51
  • @posfan12 the backend area is the dashboard and the frontend is referring to the web page previews portion. Everything is self-explanatory, not sure what exactly is unclear for you. Apr 3, 2021 at 15:21

Your Answer

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

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