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>';
}Apply Custom CSS to Admin Area
Chris Coyier
on
It must be in the themes functions?
Yup.
Awesome! Just what i need. ;)
Thats my opinion.
damn cool and clear
Hi,
have you tried to test with an external CSS file like :
Maybe it would be more practical.
Thanks from France (sorry for my poor english) for your good ressources
Hello, where i put this code? function.php? but what function.php? please sendme the path of this file, Thanks
I agree with NicoGaudin It would be good to know whether this would work with an external stylesheet instead of embedded styles.
Yes! I’ll try it.. this is what I need..
Anyone ever find out if this works with external style sheets?
@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:
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
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’);
function my_custom_fonts() {
wp_enqueue_style(‘admin_styles’ , get_template_directory_uri().’/css/style.css’);
}
add_action(‘admin_head’, ‘my_custom_fonts’);
External ref worked perfectly, thanks.
I am just looking for this kind of tutorials. I don’t like the default font of WordPress dashboard.
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
This would a much more efficient and standard way to add admin styles:
if you want to use the functions.php do so:
and if you want to use a plugin use this:
this is the right to do it.. Good Job Sir
Thank you for your snippet CapitalH.
Remember to use
get_stylesheet_directory_uri()rather thanget_template_directory_uri()if it’s a childtheme.thanks CapitalH and Matt!
get_template_directory_uri() won’t work incase of a childtheme you need to use get_stylesheet_directory_uri() instead
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' );This is the correct approach. Thank you.
I tried this but it only works in the Dashboard area, not the Posts area. Any idea?
Also in other pages with editing areas, such as pages or customizer.
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' ); }it’s work, Thank you BackuPs.
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' ); }Thanks for sharing this, its really help me, i was finding this to change something in admin. Nice Snippet
I’m on multisite and this works for the main blog but not the sub sites. Any ideas?
well you have to define them on each subsite theme right?… unless all sub sites have the same theme..
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
Hi there… How can i add css only for wp-admin/options-reading.php?
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…
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
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 !!!
Very nice little trick!
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’);
Hello I’m new very new but if I may ask a question, what is a snippet,also what does it do?
Colby you are awesome!!!
Nice, This is helpful!
Thanks!
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! */ '; }}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.
Mian,
I also need to target shop-manager with woocommerce plugin .
I hope you could help.
Hi
Try This,
function my_custom_css( ){
}
Have a nice day.
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');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
I’ve just found a plugin Add Admin CSS which is perfect for this purpose.
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.
Thanks it works for me.
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!
This is perfect! Thank you so much. CSS-Tricks never disappoints.
Hello , Can I turn this to a plugin instead of plonking it into function.php or it must be there ?
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’ );
}
Hey Backup ,
I’m using WordPress multisite hope the change will have effect on all the sites in my network.
Thanks
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
Note: If you network activate the plugin it will work in every website the same way.
really, informative , nice comments thanks to all.
Use this code in your custom plugin ‘function.php’ file
Si funciona, un Genio! Gracias!
If you want to load different css in backend and frontend you can also use this trick
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.
You can also use Custom CSS Injector plugin ( https://wordpress.org/plugins/css-injector/ ) to add custom CSS only to admin area.
Awesome! Just what I was looking for. Thanks!
Works great, thanks you very much! This tiny little adjustment makes the admin a little better for my clients:
I wish there was a site with ‘admin theme tweaks’ like this. Sadly I could not find one. If anyone happens to know one, please email: heinz AT verdi DOT link
Cheers!
Hi Everyone, I’m trying to create 4 buttons like this
in the admin area. but I want to make them different colors, any suggestions.?
Thank you in advance
thanks very much :))
Fantastic…
thanks for sharing this simple and effective method.
Have a nice day!
Good trick. Thank you so much for sharing! I feel like it’s worth mentioning as it’s a bit better practice in general, but David Walsh has also posted a way to enqueue a stylesheet for the admin.
Link: Add Custom CSS WordPress Admin