Apply Custom CSS to Admin Area

Add to the functions.php file:

add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
  echo '<style>
    body, td, textarea, input, select {
      font-family: "Lucida Grande";
      font-size: 12px;
    } 
  </style>';
}

Comments

  1. User Avatar
    Ahmad Awais
    Permalink to comment#

    It must be in the themes functions?

  2. User Avatar
    Azhar Kamar
    Permalink to comment#

    Awesome! Just what i need. ;)

  3. User Avatar
    NicoGaudin
    Permalink to comment#

    Hi,

    have you tried to test with an external CSS file like :

    add_action('admin_head', 'my_custom_fonts');
    
    function my_custom_fonts() {
      echo '<link rel="stylesheet" href="style.css" type="text/css" media="all" />';
    }

    Maybe it would be more practical.

    Thanks from France (sorry for my poor english) for your good ressources

    • User Avatar
      Roberto
      Permalink to comment#

      Hello, where i put this code? function.php? but what function.php? please sendme the path of this file, Thanks

  4. User Avatar
    Sam Logan
    Permalink to comment#

    I agree with NicoGaudin It would be good to know whether this would work with an external stylesheet instead of embedded styles.

  5. User Avatar
    Dhafian
    Permalink to comment#

    Yes! I’ll try it.. this is what I need..

  6. User Avatar
    Blaine
    Permalink to comment#

    Anyone ever find out if this works with external style sheets?

    • User Avatar
      James
      Permalink to comment#

      @Blaine. Use wp_enqueue_style() instead for stylesheets. The method above would work but you’d have less control over where it appeared in the HTML.

    • User Avatar
      Colby
      Permalink to comment#

      I just tried it with an external style sheet. I got it working with the below code in the functions.php file:

      function registerCustomAdminCss(){
      $src = "URL/custom-admin-css.css";
      $handle = "customAdminCss";
      wp_register_script($handle, $src);
      wp_enqueue_style($handle, $src, array(), false, false);
          }
          add_action('admin_head', 'registerCustomAdminCss');
      
  7. User Avatar
    Valerie
    Permalink to comment#

    Excellent tidbit of code! Solved my problem immediately (I only needed a single line added to my admin CSS and didn’t want to monkey around with core files.)

    A friend wrote a nice blog article on customizing the editor if need more advanced control: How to Make the WordPress Editor Look Like the Web Site

    • User Avatar
      Gurpreet Singh

      Write this code in your functions.php file and create a new file with the name admin_section.css in your css folder and add rule to that file and Enjoy. All Done.

      function my_custom_fonts() {
      wp_enqueue_style(‘admin_styles’ , get_template_directory_uri().’/css/admin_section.css’);
      }

      add_action(‘admin_head’, ‘my_custom_fonts’);

  8. User Avatar
    Ian Applegate
    Permalink to comment#

    External ref worked perfectly, thanks.

  9. User Avatar
    Sudip
    Permalink to comment#

    I am just looking for this kind of tutorials. I don’t like the default font of WordPress dashboard.

  10. User Avatar
    saaied
    Permalink to comment#

    helllo…
    tnx for this post. i creat a new diffrent custom dashbord admin page in wordpress with changing and edit sweet custom dashboard plugin, but this page is plain text only…
    how write a external css and use for this page?
    excuse me for my english…
    Thank you

  11. User Avatar
    CapitalH
    Permalink to comment#

    This would a much more efficient and standard way to add admin styles:

    if you want to use the functions.php do so:

    function my_admin_theme_style() {
        wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/path/to/admin/style.css');
    }
    add_action('admin_enqueue_scripts', 'my_admin_theme_style');
    

    and if you want to use a plugin use this:

    function my_admin_theme_style() {
        wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__));
    }
        add_action('admin_enqueue_scripts', 'my_admin_theme_style');
        add_action('login_enqueue_scripts', 'my_admin_theme_style');
    
    • User Avatar
      Francis
      Permalink to comment#

      this is the right to do it.. Good Job Sir

    • User Avatar
      Valentin
      Permalink to comment#

      Thank you for your snippet CapitalH.

    • User Avatar
      Matt
      Permalink to comment#

      Remember to use get_stylesheet_directory_uri() rather than get_template_directory_uri() if it’s a childtheme.

    • User Avatar
      Nik
      Permalink to comment#

      thanks CapitalH and Matt!

    • User Avatar
      BackuPs
      Permalink to comment#

      get_template_directory_uri() won’t work incase of a childtheme you need to use get_stylesheet_directory_uri() instead

    • User Avatar
      JerTurowetz
      Permalink to comment#

      CaptainH’s example is great, but i thought I’d add a little more for those who’d like some extra details.

      /**
          * Define a version number
          * This is optional but useful to circumvent caching issues
          * 
          * There are more creative ways to get the version
          * eg: if you get the version of the current theme and use that
          * you'll never have to update the enque stuff manually
          * so long as you update your theme version (but the version
          * might be wrong if you're using a js or css library)
          * 
          */
         
        $ver = '1.1.1';
      
      
        /**
          * Define the base url for the file
          * In the 'active example below, it's assumed the files are in
          * the child-theme folder
          *
          * Other examples:
          * 
          * $base_url = get_template_directory_uri();
          * If files are in the theme folder
          *
          * $base_url = plugin_dir_url( __FILE__ );
          * If you're loading the files in a plguin
          * I dont recommend you mess with plugin folders unless
          * it's one you built yourself
          * 
          */
        $base_url = get_stylesheet_directory_uri(); // 
      
      
        /**
          * Enqueue and register Admin JavaScript files here.
          * more at https://codex.wordpress.org/Function_Reference/wp_enqueue_script
          */
        $js_dependancies = array( 'jquery' ); // OPTIONAL - jquery is just an example of an average js library you might need
        function register_admin_scripts() {
            wp_enqueue_script( 'solution-hotspots', $base_url . '/your-path/your-js-file.js', $js_dependancies, $ver );
        }
      
      
        /**
         * Enqueue and register CSS files here.
         * more at https://codex.wordpress.org/Function_Reference/wp_enqueue_style
         */
        $css_dependancies = array();
        function register_admin_styles() {
            wp_enqueue_style( 'style-name', $base_url . '/your-path/your-css-file.css', $css_dependancies, $ver );
        }
      
      
        /**
          * Make sure to spit it out!
          */
        add_action( 'admin_enqueue_scripts', 'register_admin_scripts' );
        add_action( 'admin_enqueue_scripts', 'register_admin_styles' );
      
  12. User Avatar
    Alex
    Permalink to comment#

    I tried this but it only works in the Dashboard area, not the Posts area. Any idea?

  13. User Avatar
    BackuPs
    Permalink to comment#

    Hi Alex,

    try this then it will work in front and backend.

    function change_adminbar_css() {
        wp_register_style( 'add-admin-stylesheet', plugins_url( '/css/adminstyle.css', __FILE__ ) );
        wp_enqueue_style( 'add-admin-stylesheet' );
    }
    add_action( 'admin_enqueue_scripts', 'change_adminbar_css' ); 
    if (is_admin) {
        add_action( 'wp_enqueue_scripts', 'change_adminbar_css' ); 
    }
    
  14. User Avatar
    BackuPs
    Permalink to comment#

    Hi Alex,

    i think i pasted the code with a typo the if statement should check for !is_admin(). So do it like this.

    function change_adminbar_css() {
        wp_register_style( 'add-admin-stylesheet', plugins_url( '/css/adminstyle.css', __FILE__ ) );
        wp_enqueue_style( 'add-admin-stylesheet' );
    }
    
    add_action( 'admin_enqueue_scripts', 'change_adminbar_css' ); 
    
    if (!is_admin) {
        add_action( 'wp_enqueue_scripts', 'change_adminbar_css' ); 
    }
    
  15. User Avatar
    Jamil
    Permalink to comment#

    Thanks for sharing this, its really help me, i was finding this to change something in admin. Nice Snippet

  16. User Avatar
    Ross
    Permalink to comment#

    I’m on multisite and this works for the main blog but not the sub sites. Any ideas?

    • User Avatar
      Francis
      Permalink to comment#

      well you have to define them on each subsite theme right?… unless all sub sites have the same theme..

  17. User Avatar
    BackuPs
    Permalink to comment#

    Hi

    I am using it in a plugin (see my example) and it works on every subsite within the wpms. The style is loaded from a subfolder called css from that plugin folder.

    But even in the functions.php it does work on every subsite when you use the correct path and alter it within the code like given in the examples here in the responses.

    Best regards,
    BackuPs

  18. User Avatar
    Catatan Belajar
    Permalink to comment#

    Hi there… How can i add css only for wp-admin/options-reading.php?

  19. User Avatar
    Jatin
    Permalink to comment#

    Hi, I am facing problem in WordPress Admin CSS,
    I want Load custom CSS for wp-admin on user-role base (e.g. editor)
    please reply if you can understood my problem…

  20. User Avatar
    Stephen
    Permalink to comment#

    Jatin, try this: http://docs.appthemes.com/tutorials/wordpress-check-user-role-function/

    Alternatively, the Codex instructs not to do this, but roles can be used in current_user_can:

    http://codex.wordpress.org/Function_Reference/current_user_can

  21. User Avatar
    Alfredo
    Permalink to comment#

    wow thank you for that ! It’s great to optimize admin styling without changing core files.

    For some project, I edited admin files and then re updated changes them after each wordpress update !!!

  22. User Avatar
    Matt Smith
    Permalink to comment#

    Very nice little trick!

  23. User Avatar
    Pradeep
    Permalink to comment#

    i want to add my custom css in admin panel on edit.php in page menu. anyone can tell how to use this code….

    function registerCustomAdminCss(){
    $src = “custom_css.css”;
    $handle = “customAdminCss”;
    wp_register_script($handle, $src);
    wp_enqueue_style($handle, $src, array(), false, false);
    }
    add_action(‘admin_head’, ‘registerCustomAdminCss’);

  24. User Avatar
    William
    Permalink to comment#

    Hello I’m new very new but if I may ask a question, what is a snippet,also what does it do?

  25. User Avatar
    Melissa
    Permalink to comment#

    Colby you are awesome!!!

  26. User Avatar
    Elvin
    Permalink to comment#

    Nice, This is helpful!

    Thanks!

  27. User Avatar
    Mian Rashid
    Permalink to comment#

    I used the code with bit of addition due to the fact my scenario was bit different.. I wanted to only echo this css to other user levels so here my code which is working for me …

    add_action('admin_head', 'my_custom_fonts');
    
    function my_custom_fonts() {
    global $user_level;
        if ($user_level != '10' ) {
      echo '
        /* Styles here! */
      ';
    }}
    • User Avatar
      Ugur
      Permalink to comment#

      Hi Mian,
      Can you share the code if you wanted to only echo css for “shop_manager” user role at the Admin side?

      Thank you.

    • User Avatar
      Michael Cuenco
      Permalink to comment#

      Mian,

      I also need to target shop-manager with woocommerce plugin .

      I hope you could help.

    • User Avatar
      Neo
      Permalink to comment#

      Hi

      Try This,


      function my_custom_css( ){

      global $user;
      
      if (isset($user->roles)  && is_array( $user->roles ) ) {
      
          if( $user->roles[0] == 'administrator' ) {
              //Do something
          } elseif ( $user->roles[0] == 'shop-manager' ) {
              //Do something
          } elseif ( $user->roles[0] == 'editor' ) {
              //Do something
          } elseif ( $user->roles[0] == 'author' ) {
              //Do something
          } elseif ( $user->roles[0] == 'customer' || $user->roles[0] == 'subscriber' ) {
              //Do something
          } elseif ( $user->roles[0] == 'contributor') {
              //Do something
          } else {
              //Do something
          }
      }
      

      }

      Have a nice day.

    • User Avatar
      JerTurowetz
      Permalink to comment#

      Neo, that’s awesome, thanks for taking the time.

      Mian, see some comments above as it’s better practice to use
      add_action( 'admin_enqueue_scripts', 'my_custom_fonts' );

      instead of:
      add_action('admin_head', 'my_custom_fonts');

  28. User Avatar
    Domylook

    Hi,

    If i apply external css in my post, all are looking fine and perfect if i see in Visual View. But if i click on Preview, No customization appears there, only simple text display.

    Please visit below link.

    http://domylook.com/uncategorized/test/

    It is working fine if i check Visual View in Post post. All css are working fine there.
    I wrote this line to include three css file in function.php file.

    add_editor_style( ‘skel.css’ );
    add_editor_style( ‘style_new.css’ );
    add_editor_style( ‘style-desktop.css’ );

    Please help me in solving this issue.

    Thanks
    Neha

  29. User Avatar
    Tran Ngoc Tuan Anh

    I’ve just found a plugin Add Admin CSS which is perfect for this purpose.

  30. User Avatar
    Tik
    Permalink to comment#

    I use a free plugin called AdminMate plugin. Just search “AdminMate” from Add New Pluging page of your WordPress website or search the keyword “AdminMate” from google.com. Let’s try it, I think you’ll love it.

  31. User Avatar
    Lim Socheat
    Permalink to comment#

    Thanks it works for me.

  32. User Avatar
    Barton
    Permalink to comment#

    This is extremely handy!

    Will cut down on client confusion (and likelihood of messing things up!) if I can just hide bits and pieces.

    Thanks a lot!

  33. User Avatar
    Erika
    Permalink to comment#

    This is perfect! Thank you so much. CSS-Tricks never disappoints.

  34. User Avatar
    Abiodun Adetona
    Permalink to comment#

    Hello , Can I turn this to a plugin instead of plonking it into function.php or it must be there ?

    • User Avatar
      Backups
      Permalink to comment#

      Create a plugin by creating a file f.e.

      wploadadminstyle.php with the code below

      create a folder
      1) wploadadminstyle
      2) wploadadminstyle/css
      3) create a css file called adminstyle.css in the css folder with your css.
      4) change the code if you want to load stylesheets based on userroles.

      upload the plugin and activate.

      <?php
      /*
      Plugin Name: WP Load Admin CSS
      Plugin URI: http://yourdomain.com/
      Description: Load Admin CSS.
      Version: 1.00
      Author: Author
      Author URI: http://yourdomain.com/
      License: GPL2
      */
      //function to initialise the

      // let’s start by enqueuing our styles correctly

      if ( ! defined( ‘ABSPATH’ ) ) {
      exit; // Exit if accessed directly.
      }

      function change_admin_css() {
      wp_register_style( ‘add-extra-admin-stylesheet’, plugins_url( ‘/css/adminstyle.css’, FILE ) );
      wp_enqueue_style( ‘add-extra-admin-stylesheet’ );
      }

      if (is_admin()) {
      add_action( ‘admin_enqueue_scripts’, ‘change_admin_css’ );
      }

  35. User Avatar
    Abiodun Adetona
    Permalink to comment#

    Hey Backup ,

    I’m using WordPress multisite hope the change will have effect on all the sites in my network.

    Thanks

    • User Avatar
      Backups
      Permalink to comment#

      No it will work in the websites you activated the plugin in. Or on all if you want all to have the same css tweaks.

      If you want different css per website within the wpms you need to load css styles by blog_ID

      See wordpress.org on how to get the current blog_ID within a multisite. This way you could activate the plugin network wide and have different css applied by using a php switch case programming code

    • User Avatar
      Backups
      Permalink to comment#

      Note: If you network activate the plugin it will work in every website the same way.

  36. User Avatar
    Shishir
    Permalink to comment#

    really, informative , nice comments thanks to all.

  37. User Avatar
    dipti jain
    Permalink to comment#

    Use this code in your custom plugin ‘function.php’ file

    add_action(‘admin_head’, ‘my_custom_fonts’);
    function my_custom_fonts() {
    wp_enqueue_style(‘style-admin’ ,plugin_dir_url(FILE) .’css/style-admin.css’);
    }

  38. User Avatar
    David

    Si funciona, un Genio! Gracias!

  39. User Avatar
    BackuPs
    Permalink to comment#

    If you want to load different css in backend and frontend you can also use this trick

            if (is_admin()) add_action('admin_head', 'load_backend_css');
            if (!is_admin()) add_action('wp_head', 'load_frontend_css');
    
            function load_backend_css() {
            echo '<style>YOUR CSS GOES HERE</style>';
            }
            function load_frontend_css() {
            echo '<style>YOUR CSS GOES HERE</style>';
            }
    
    • User Avatar
      BackuPs
      Permalink to comment#

      You can also only apply the frontend css when the user is logged in by changing the code a bit. This way you can target f.e. the adminbar only with your styles.

          if (is_admin()) add_action('admin_head', 'load_backend_css');
          if (!is_admin() && is_user_logged_in()) add_action('wp_head', 'load_frontend_css');
      
          function load_backend_css() {
            echo '<style>Your CSS goes here</style>';
          }
          function load_frontend_css() {
            echo '<style>Your CSS goes here</style>';
          }
      

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag