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:

  1. By using the admin_enqueue_scripts WordPress hook or
  2. 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 ) {
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_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;
  echo '<script>
  	/* Your js code here */

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

Learn more about the following WordPress hooks:

Recent Articles

Blog Categories

Related Articles

If you enjoyed reading this, then please explore our other articles below:


Leave a comment

Leave a Reply

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.