Add Custom CSS to Admin Area WordPress

How to write custom style CSS for WordPress admin area. Learn to control the styling hooks of admin WordPress. Most recommended way to enqueue admin styles. Best practice of admin styling.

Share

Probably you need to customize WordPress admin styles. The whole styles will be delete if you update the wordpress, after you edit core style-sheet of WordPress admin. Best practice is to use WordPress admin hooks provided by WP core.You can add directly style tag and point the WordPress to execute in head.  Two ways to add custom CSS to admin area of WordPress.

While working with a plugin we need to customize the style of textfield in advance custom fields . Using admin_enqueue_scripts we can apply custom CSS to admin WordPress.

Method 1.  Adding Styles using admin_head Action.

Use admin_head hook to add styles but it will reset when your theme update. Rather adding <style> tag to function.php file. We recommended the 2nd method to add stylesheet to your WordPress admin

add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
 echo '<style>
 *, body {
 font-size:15px; color:#c03;
 }
 </style>';
 }

Above method target header function of of WP-Admin and put the styles before </head>. We recommended professional way, so you cant loose your design next time.


 

Method 2. Adding Via Admin Enqueue Scripts.

Below is the simple 3 steps on how to enqueue scripts in admin panel of wordpress, by using the below function your stylesheet will be loaded to admin only and hidden to front end.

  • Create “admin.css” file in your current theme directory.
  • Open theme function.php file, Copy/ Paste the below function.
  • We will use admin_enqueue_scripts simple 3 line of code.
  • Advance: if you’re working with child theme read the note.
function add_admin_style() {
 wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/admin.css');
 /*
 if you are using child theme then replace
 get_template_directory_uri to get_stylesheet_directory_uri
 */
 }
 add_action('admin_enqueue_scripts', 'add_admin_style');

Note: Replace “get_template_directory_uri()” with “get_stylesheet_directory_uri()”

Admin_Enqueue_Script Explanation:

Admin enqueue script used to include your own Scripts(JS or CSS) to admin WordPress. Moreover admin_enqueue_scripts take one parameter to target or check only specific page type like (edit or setting etc).


 

Plugin Styles in WordPress Admin

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

Leave a Reply

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