The WordPress enqueue system

descriptionStandard

I recently made a brief overview of the WordPress enqueue system to act as a quick reference for others.

Table of Contents

    Here are several simple example on how to use the WP wp_register_script and wp_enqueue_script script system:

    $testy_js = '/lib/js/testy_script.js';
    wp_register_script( 'testy-example-script', $testy_js, array(), '1.0.0', true );
    wp_enqueue_script( 'testy-example-script', true );

    Does a script rely on another script being available first:

    $testy_js = '/lib/js/testy_script.js';
    wp_register_script( 'testy-example-script', $testy_js, array(), '1.0.0', true );
    wp_enqueue_script( 'testy-example-script', true );
    // The next script loads after 'testy-example-script'
    $another_js = '/lib/js/another_script.js';
    wp_register_script( 'another-script', $another_js, array('testy-example-script'), '1.0.0', true );
    wp_enqueue_script( 'another-script', true );

    Require additional inline JS in conjuction with your main script:

    $testy_js = '/lib/js/testy_script.js';
    wp_register_script( 'testy-example-script', $testy_js, array(), '1.0.0', true );
    wp_add_inline_script( 'testy-example-script', 'jQuery(document).ready(function($) {
        // our inline script here
    });' );
    wp_enqueue_script( 'testy-example-script', true );

    Pass values from PHP to your JS script:

    $testy_js = '/lib/js/testy_script.js';
    wp_register_script( 'testy-example-script', $testy_js, array(), '1.0.0', true );
    // Here you can set object attribute value from PHP to access in JS
    wp_localize_script( 'testy-example-script', 'testy_vars', array(
        'message' => __( 'This is a test message! Hello!', '' )
    ) );
    wp_enqueue_script( 'testy-example-script', true );

    Then in your JS script you can access it via:

    jQuery(document).ready(function($) {
    let msg = testy_vars.message
        // Additional JS here
    });

    Hope you enjoy!

    Leave a Reply

    I'm pleased you have chosen to leave a comment and engage in a meaningful conversation. Please keep in mind that comments are moderated according to our privacy policy, links are set to nofollow.

    Your email address will not be published. Required fields are marked *