Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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. Ahmad Awais
    Permalink to comment#

    It must be in the themes functions?

  2. Azhar Kamar
    Permalink to comment#

    Awesome! Just what i need. ;)

  3. 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

    • 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. 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. Dhafian
    Permalink to comment#

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

  6. Blaine
    Permalink to comment#

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

    • 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.

    • 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. 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

    • 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. Ian Applegate
    Permalink to comment#

    External ref worked perfectly, thanks.

  9. Sudip
    Permalink to comment#

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

  10. 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. 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');
    
    • Francis
      Permalink to comment#

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

    • Valentin
      Permalink to comment#

      Thank you for your snippet CapitalH.

    • Matt
      Permalink to comment#

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

  12. Alex
    Permalink to comment#

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

  13. 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. 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. Jamil
    Permalink to comment#

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

  16. Ross
    Permalink to comment#

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

    • Francis
      Permalink to comment#

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

  17. 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. Catatan Belajar
    Permalink to comment#

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

  19. 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. 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. 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. Matt Smith
    Permalink to comment#

    Very nice little trick!

  23. 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. 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. Melissa
    Permalink to comment#

    Colby you are awesome!!!

  26. Elvin
    Permalink to comment#

    Nice, This is helpful!

    Thanks!

  27. 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! */
      ';
    }}
    • 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.

  28. 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. Tran Ngoc Tuan Anh

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

  30. 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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```