Home / WordPress / How to add custom CSS or JS code to WordPress admin panel

How to add custom CSS or JS code to WordPress admin panel

Published On: December 16th, 2019|Categories: WordPress|Tags: wordpress admin|2 min read|

Adding CSS/JS to WordPress admin can be very useful if you want to customize the dasboard, for example to make the WooCommerce menu item purple or highlight something to make it easier to find. You can customize a clients admin panel to match their brand identity.

There are two ways to add your custom CSS/JS code to WordPress admin dashboard:

By using the admin_enqueue_scripts WordPress hook or
By adding a custom function to the functions.php file of your WordPress theme.

PHP Snippet: Add CSS code to WordPress admin by enqueuing

function webroom_add_custom_css_file_to_admin( $hook ) {
  wp_enqueue_style(
  'your_custom_css_file',
  'https://yoursite.com/your_css_file.css');
}
add_action('admin_enqueue_scripts', 'webroom_add_custom_css_file_to_admin');

PHP Snippet: Add JS code to WordPress admin by enqueuing

function webroom_add_custom_js_file_to_admin( $hook ) {
  wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
}
add_action('admin_enqueue_scripts', 'webroom_add_custom_js_file_to_admin');

PHP Snippet: Add CSS/JS code to all WordPress pages

function add_custom_css_file( $hook ) {
  wp_enqueue_style(
  'your_custom_css_file',
  'https://yoursite.com/your_css_file.css');
  wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
}
add_action('wp_enqueue_scripts', 'add_custom_css_file');

PHP Snippet: Add CSS/JS code to WordPress admin by custom function

add_action('admin_head', 'webroom_add_css_js_to_admin');

function webroom_add_css_js_to_admin() {
  echo '<style>
    body, textarea, input {
      font-size: 12px;
    } 
  </style>';
  echo '<script>
  	/* Your js code here */
  </script>';
}

Just put the snippet in your child theme’s functions.php file.

Learn more about the following WordPress hooks: