How do I load a CSS style into WordPress admin area only?

3 comments

1. Just hook your callback into admin_print_styles, i.e.:

   add_action( 'admin_print_styles', 'mytheme_add_init' );
   

   Alternately, you could add an is_admin() conditional wrapper inside your callback, and hook into wp_enqueue_scripts:

   function mytheme_add_init() {
       if ( is_admin() ) {
           $file_dir=get_bloginfo('template_directory');
           wp_enqueue_style("functions", $file_dir."/scripts/custom.css", false, "1.0", "all");
           wp_enqueue_script("rm_script", $file_dir."/scripts/custom.js", false, "1.0");
       }
   }
   add_action( 'wp_enqueue_scripts', 'mytheme_add_init' );
   

   But the absolute best approach is to hook into your Theme’s admin page, via admin_print_styles-appearance_page_{pagename}:

   add_action( 'admin_print_styles-appearance_page_{pagename}', 'mytheme_add_init', 11 );
   

   This is a custom hook specifically for your appearance page, as defined via your add_theme_page() call.

   Log in to Reply

2. Late answer: As both previous answers showed old, incomplete or complicated ways, here’s an updated version that works the v3.5+ way.

   What’s different?

   Here’s the list

   • The first thing we do is using the admin_enqueue_scripts hook. This hook
   • The wp_enqueue_style()s last argument is the targeted media and it’s already set to all per default. No need to add it.
   • We use the get_template_directory_uri() function to retrieve the URl for our stylesheet. No need to check the option value for template_directory here.
   • We then use the return value of get_template_directory() to retrieve the path and wrap it into a filemtime() call to get the last time where the stylesheet was edited. This way we append a new version number as query argument and force browser to reload the stylesheet if there’s a new version. No need to force hard reloads with Ctrl + F5.
   • One important thing is to add the right dependencies as you don’t want to have your styles overwritten with a higher specifity by wp-admin.css, ie (even worse) or the color scheme. The really tough part is to check the color scheme, as this file carries most of what is styled in the admin UI and is a user setting. We want to add this as dependency as well.
   • The last thing we do is wrapping the call to add the hook into another function that is hooked to the contextual admin_head-* hook, where * is the pageslug. We hook it two times to take new as well as edited posts into consideration.

   Here’s the code for your functions.php file.

   add_action( 'admin_head-post.php', 'wpse44135AttachAdminStyle' );
   add_action( 'admin_head-post-new.php', 'wpse44135AttachAdminStyle' );
   function wpse44135AttachAdminStyle()
   {
       add_action( 'admin_enqueue_scripts', 'wpse44135EnqueueAdminStyle' );
   }
   function wpse44135EnqueueAdminStyle()
   {
       $scheme = get_user_meta(
           get_current_user_id(),
           'admin_color',
           true
       );
   
       wp_enqueue_style(
           "admin_style",
           get_template_directory_uri()."/scripts/custom.css",
           array( 'wp-admin', 'ie', "colors-{$scheme}" ),
           filemtime( get_template_directory()."/scripts/custom.css" ),
           "all"
       );
   }
   

   Alternatives?

   In case you just want to add styles to the TinyMCE WYSIWYG editor, you can use add_editor_style() to register your themes stylesheet in the admin areas text editor as well. The path you add as argument is relative to your themes root. In your functions.php file:

   add_editor_style( '/scripts/custom.css' );
   

   It’s as simple as that.

   Log in to Reply

3. Here is a quick way to add some style in admin head. hope this helps:

   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>';
   }
   

   Log in to Reply