Wordpress

How to load scripts and style for frontend and admin in WordPress1 min read

January 15, 2024 < 1 min read

author:

Array

How to load scripts and style for frontend and admin in WordPress1 min read

Reading Time: < 1 minute

For 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