How to load scripts and style for frontend and admin in WordPress1 min read
Reading Time: < 1 minuteFor Frontend:
Use wp_enqueue_script() and wp_enqueue_style() Functions:
These functions are used to safely add scripts and styles to the WordPress frontend.
Place these functions in your theme’s functions.php file.
Example Code to Enqueue a Frontend Script:
function mytheme_enqueue_scripts() {
wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');
Example Code to Enqueue a Frontend Style:
function mytheme_enqueue_styles() {
wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');
For WordPress Admin:
Use admin_enqueue_scripts Hook:
This hook is specifically for loading scripts and styles in the WordPress admin area.
Example Code to Enqueue an Admin Script:
function mytheme_admin_enqueue_scripts() {
wp_enqueue_script('my-admin-script', get_template_directory_uri() . '/js/admin-script.js', array('jquery'), '1.0.0', true);
}
add_action('admin_enqueue_scripts', 'mytheme_admin_enqueue_scripts');
Example Code to Enqueue an Admin Style:
function mytheme_admin_enqueue_styles() {
wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/css/admin-style.css', array(), '1.0.0', 'all');
}
add_action('admin_enqueue_scripts', 'mytheme_admin_enqueue_styles');
Array
