How To Load JS And CSS Into WordPress?

Loading JavaScript JS and CSS into WordPress involves using the appropriate hooks and functions to ensure the scripts and styles are properly enqueued and loaded on the front end or admin area. If CSS and JavaScript are not loaded properly in WordPress, several issues can arise, impacting the functionality and appearance of your website. Below are the steps to load JS and CSS into WordPress.

Loading JS and CSS on the Front End

1. Add your JS and CSS files to your theme or plugin directory.

2. Enqueue Scripts and Styles in the Functions File: In your WordPress theme functions.php file or your plugin’s main file, use the wp_enqueue_scripts action hook to load your JS and CSS files.

function my_theme_enqueue_scripts() {
    // Enqueue CSS file
    wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), '1.0.0', 'all');
    
    // Enqueue JS file
    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', 'my_theme_enqueue_scripts');

Parameters for wp_enqueue_style and wp_enqueue_script:

• Handle: A unique name for the script or style.

• Source: The URL to the script or style.

1. For themes: get_template_directory_uri() or get_stylesheet_directory_uri().
2. For plugins: plugin_dir_url(__FILE__).

• Dependencies: An array of handles for any scripts or styles that must be loaded before this one.

• Version: The version number of the script or style.

• In Footer: (JS only) Whether to load the script in the footer (true) or the header (false).

Loading JS and CSS in the Admin Area

Enqueue Scripts and Styles in the Functions File:

Use the admin_enqueue_scripts action hook to load your JS and CSS files in the WordPress admin area.

function my_admin_enqueue_scripts() {
    // Enqueue CSS file
    wp_enqueue_style('my-admin-style', plugin_dir_url(__FILE__) . 'css/admin-style.css', array(), '1.0.0', 'all');
    
    // Enqueue JS file
    wp_enqueue_script('my-admin-script', plugin_dir_url(__FILE__) . 'js/admin-script.js', array('jquery'), '1.0.0', true);
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');

Inline JavaScript and CSS

For adding inline JavaScript and CSS, you can use the wp_add_inline_script and wp_add_inline_style functions, respectively, after enqueuing the scripts and styles.

function my_inline_script_and_style() {
    // Enqueue main script and style
    wp_enqueue_script('my-inline-script', get_template_directory_uri() . '/js/inline-script.js', array(), '1.0.0', true);
    wp_enqueue_style('my-inline-style', get_template_directory_uri() . '/css/inline-style.css', array(), '1.0.0', 'all');
    
    // Add inline JavaScript
    $inline_js = 'console.log("Inline script loaded");';
    wp_add_inline_script('my-inline-script', $inline_js);
    
    // Add inline CSS
    $inline_css = 'body { background-color: #f0f0f0; }';
    wp_add_inline_style('my-inline-style', $inline_css);
}
add_action('wp_enqueue_scripts', 'my_inline_script_and_style');

What is the difference between admin_enqueue_scripts, admin_print_scripts, and admin_print_styles?

The three WordPress hooks admin_enqueue_scripts, admin_print_scripts, and admin_print_styles are all related to including scripts and styles in the WordPress admin area but differ in their purpose and timing.

Here’s a breakdown of each hook:

admin_enqueue_scripts

This hook is used to enqueue scripts and styles for the WordPress admin area. Enqueuing is the process of registering and adding scripts and styles to the WordPress queue, ensuring they are loaded in the correct order and preventing conflicts.

• Use this hook to register and enqueue scripts and styles.
• It runs when the admin page is being set up and is the recommended hook for enqueuing admin scripts and styles.

Example Code:

function my_custom_admin_scripts() {
    wp_enqueue_script('my-custom-script', plugin_dir_url(__FILE__) . 'js/custom-script.js', array('jquery'), '1.0', true);
    wp_enqueue_style('my-custom-style', plugin_dir_url(__FILE__) . 'css/custom-style.css');
}
add_action('admin_enqueue_scripts', 'my_custom_admin_scripts');

admin_print_scripts

This hook is used to print scripts directly into the admin page. It’s typically used for inline scripts rather than enqueuing external files.

• Use this hook to add inline JavaScript directly to the admin page.
• This hook runs later in the execution process, after admin_enqueue_scripts, but before the footer.

Example Code:

function my_custom_admin_inline_script() {
    echo '<script type="text/javascript">console.log("Admin inline script loaded.");</script>';
}
add_action('admin_print_scripts', 'my_custom_admin_inline_script');

admin_print_styles

This hook is used to print styles directly into the admin page. Like admin_print_scripts, it is intended for inline styles.

• Use this hook to add inline CSS directly to the admin page.
• This hook runs later in the execution process, after admin_enqueue_scripts.

Example Code:

function my_custom_admin_inline_style() {
    echo '<style type="text/css">body { background-color: #f1f1f1; }</style>';
}
add_action('admin_print_styles', 'my_custom_admin_inline_style');

Summary

admin_enqueue_scripts: Enqueue scripts and styles in the admin area. Recommended for registering and enqueuing external files.
admin_print_scripts: Print inline JavaScript in the admin area.
admin_print_styles: Print inline CSS in the admin area.

Use admin_enqueue_scripts for enqueuing external scripts and styles, and use admin_print_scripts or admin_print_styles for adding inline JavaScript or CSS, respectively. Ensure you enqueue your scripts and styles correctly to avoid conflicts and ensure proper loading order.