Adding Custom Admin CSS Styles and JavaScript to the WordPress Dashboard

Customizing the WordPress admin can be very useful. A few reasons come to mind:

  • reducing visual clutter
  • adjusting the size of form inputs
  • for highlighting important help text and form fields
  • hiding particularly dangerous actions (like “Delete” and “Reset”) from accidental client access

It’s straightforward to customize WordPress themes using CSS and JavaScript. If you need to adjust things on the admin side, here’s a reliable way to include custom scripts and styles from your theme in the WP Dashboard, in a way that should reduce the likelihood of introducing script conflicts and other unpredictable issues.

functions.php
// Add custom admin styles and scripts to the WP Dashboard
function screenthumb_enqueue_custom_admin_style() {
  wp_register_style(
    'screenthumb-admin',
    get_template_directory_uri() . '/css/admin.css',
    false,
    filemtime( get_template_directory() . '/css/admin.css' )
  );
  wp_enqueue_style( 'screenthumb-admin' );
}
add_action( 'admin_enqueue_scripts', 'screenthumb_enqueue_custom_admin_style' );

function screenthumb_enqueue_custom_admin_scripts() {
  wp_enqueue_script(
    'screenthumb_admin',
    get_template_directory_uri() . '/js/admin.min.js',
    array('jquery'),
    filemtime( get_template_directory() . '/js/admin.min.js' ),
    false
  );
}
add_action( 'admin_enqueue_scripts', 'screenthumb_enqueue_custom_admin_scripts' );

You’ll need to add a custom theme directory for your admin scripts and styles, such as:

PHP
get_template_directory_uri() . '/js/admin.min.js',

Then, these files can be included using the admin_enqueue_scripts action hook, as with the wp_enqueue_scripts action.