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_option('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');
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.
The easiest way is using the plugin. Does that one work?
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.
Hi Yin,
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!
Do you know how to inspect CSS?
Is that a trick question? Yes.
Feeling dumb. Issue solved 🙂
After trying the second method without sucess I found this worked for me https://stackoverflow.com/questions/49334826/styling-admin-custom-panel-in-woocommerce
Good Day,
Your code snippet works great. However, the get_settings() function is deprecated. Use get_option() instead. Kindly update your code snippet.
Salud!
Reference: https://developer.wordpress.org/reference/functions/get_settings/
How’s it looking now, captain? 🙂
Perfect, mate! 🙂