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. It must be in the themes functions?

  2. Azhar Kamar
    Permalink to comment#

    Awesome! Just what i need. ;)

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

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

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

  8. External ref worked perfectly, thanks.

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

  10. 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. 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');
    
  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. 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. 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. 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 !!!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".