• Skip to primary navigation
  • Skip to main content
  • Skip to footer

WPJohnny

WordPress Performance Guides and Reviews

  • Start a WordPress site
  • Hosting
  • Themes
  • Plugins
  • Blogging
  • Marketing

How to customize WordPress admin CSS

WordPress plugins May 20, 2020 by Johnny 9 Comments

Want to adjust how your WordPress dashboard looks?

Maybe you want things sized differently or in different colors, or different fonts, etc. Whatever the reason…it’s possible!

METHOD #1 (easy) – install plugin Add Admin CSS by Scott Reilly

  • Simple enough, install plugin and then paste in whatever CSS styles you want in there.

METHOD #2 (manual) – add code snippet to functions.php

  • This way is more manual and does pretty much the same as the plugin but without actually installing a plugin. Instead, you’re hooking the function into your theme functions.php file.
  • Copy the code below into your theme functions.php file.
  • Take note of the theme directory and CSS file being called. Change/rename it to match your theme.
  • Then go create the the admin CSS and put your desired styles in there.
/* Admin CSS styles */
function adminStylesCss() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/themes/yourtheme/css/wp-admin.css';
    echo '<!-- Admin CSS styles -->
          <link rel="stylesheet" type="text/css" href="' . $url . '" />
          <!-- /end Admin CSS styles -->';
}
add_action('admin_head', 'adminStylesCss');

Share this post:

Share on FacebookShare on TwitterShare on LinkedInShare on WhatsAppShare on EmailShare on SMS

Read all my posts on WordPress plugins

About Johnny

Right on the edge of WordPress development! 10+ years of WordPress design, development, hosting, speed optimization, product advisor, marketing, monetization. I do all that.

More WordPress Guides

Oxygen Builder ISN’T a pagebuilder (and that’s why it’s great)

Code Click-to-Copy (WPJ Plugin)

MemberPress vs MemberMouse vs DAP – WordPress Membership Plugins Review (2018)

How to Negotiate Web-Design Prices (for designers)

Core Web Vitals – score optimization tips

WPCloudDeploy custom hacks and fixes

Reader Interactions

9 Comments

  1. Matthew

    November 2, 2020 at 3:00 pm

    The code snippet used to work but not anymore.

    The latest WordPress core blocks out the css file (probably for a security reason) and I haven’t found an easy solution to this problem.

    Reply
    • Johnny

      November 2, 2020 at 3:26 pm

      The easiest way is using the plugin. Does that one work?

      Reply
  2. Matthew

    November 2, 2020 at 3:59 pm

    I can still add css to admin area the old ghetto way. echo ‘<style> haha. but I was never a fan of css residing inside php.

    adding a plugin for styling admin area? I am pretty sure that’s not the best practice standard of WP development or any web development.

    I suppose you can build a site with 100’s of plugins but I would not consider that a legit development; at least not a professional one anyhow.

    Reply
  3. JetGuy

    January 29, 2022 at 10:22 am

    Hi Johnny,

    Just ran into this article. Very helpful. Thank you.

    We’re currently using your Method #2. Works like a charm.

    Now, here’s another challenge where we could use your expertise:

    Many plugin developers embed CSS (styling) code inside their .php files which affect, for example, their plugin link colors and/or font weight as shown in WP’s Plugins dashboard.

    More specifically, some developers add the link “Go Pro” using a red, bold font underneath their plugin name in WPs Plugins dashboard. We’d like to remove that and/or change the styling.

    So, any suggestions on how to accomplish the above? A code similar to Method #2 would be nice.

    Thank you!

    Reply
    • Johnny

      January 30, 2022 at 5:37 am

      Do you know how to inspect CSS?

      Reply
      • JetGuy

        January 30, 2022 at 8:18 am

        Is that a trick question? Yes.

        Reply
      • JetGuy

        October 16, 2022 at 7:44 am

        Feeling dumb. Issue solved 🙂

        Reply
  4. Ivan

    September 7, 2022 at 2:25 am

    After trying the second method without sucess I found this worked for me https://stackoverflow.com/questions/49334826/styling-admin-custom-panel-in-woocommerce

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

More links

  • Gadget reviews
  • Try my free WPJ plugins
  • Join the WPJ FB Group
  • WPJ YouTube & newsletter
  • Become a WPJ Affiliate

Popular Reviews

  • Best WordPress Hosting
  • Best WordPress Themes
  • Best WordPress Plugins
  • Best WordPress Cache Plugins

Services

  • Speed optimization
  • Speed optimization courses
  • WordPress hosting
  • Hire me or other experts
  • Client login

About Johnny

10+ years of WordPress design, development, hosting, speed optimization, marketing.
Contact me.

newsletter block

Copyright 2023 | WordPress guides by Johnny Nguyen

Click to Copy