How to Enqueue Script & Style in WordPress Admin & Login

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.

Advertisement

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.

enqueue-scripts-styles-in-wordpress-specific-page

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

Advertisement

Related Posts

Leave a Reply

Your email address will not be published.

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top