Are you working with custom theme or plugin?, then there can be a chance where you need to enqueue scripts and styles in WordPress admin pages or any specific admin page or may be login page.
To enqueue scripts and styles in WordPress admin pages and login pages, code snippets are given below. You can add those code snippets into your theme’s functions.php file with their respective parameters.
Enqueue Scripts & Style in WordPress Admin for All Pages
To enqueue any scripts and styles in admin, WordPress provides a hook admin_enequeue_scripts. This hook will be the same for both scripts and style.
Add this code to functions.php file to add scripts and styles in WordPress admin for all pages. Don’t forget to change the script and style handle name and path to the file.
function enqueuing_admin_scripts(){
wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );
Enqueue Scripts & Style in WordPress Admin for Posts | Pages | Custom Post Types
To enqueue scripts & style in posts, pages and custom post types page, code snippets are given below. You can use these snippets as per your needs, all you need to set post type.
Don’t forget to change the script and style handle name and path to the file.
For All Listing Page
function enqueuing_admin_scripts(){
// Global Admin Variable, It tells which page is on now.
global $pagenow;
// Global Admin Variable, It tells which post type is on now.
global $post_type;
if(($pagenow == 'edit.php') && ($post_type == 'post_type_name')){
wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
}
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );
For Add New Page
function enqueuing_admin_scripts(){
// Global Admin Variable, It tells which page is on now.
global $pagenow;
// Global Admin Variable, It tells which post type is on now.
global $post_type;
if(($pagenow == 'post-new.php') && ($post_type == 'post_type_name')){
wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
}
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );
Enqueue Scripts & Style in WordPress Admin for Specific Page
To enqueue scripts and styles in admin for specific pages, all you need to find the slug for that page as shown in the image below.
So in this case, I want to enqueue scripts in Settings > General Page. To do that, I will just use the slug of this page options-general.php in my code to check current page.
Don’t forget to change the script and style handle name and path to the file.
function enqueuing_admin_scripts(){
// Global Admin Variable, It tells which page is on now.
global $pagenow;
if($pagenow == 'options-general.php'){
wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
wp_enqueue_script('admin-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
}
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );
Enqueue Scripts & Style in WordPress Login Page
To enqueue scripts & style in the login page, WordPress provides a hook login_enqueue_scripts. This hook will add the scripts & styles in the login page.
Don’t forget to change the script and style handle name and path to the file.
function enqueuing_login_scripts(){
wp_enqueue_style('login-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css');
wp_enqueue_script('login-your-js-file-handle-name', get_template_directory_uri().'/js/your-js-file.js');
}
add_action( 'login_enqueue_scripts', 'enqueuing_login_scripts');
