2

This is really confounding.

In a child theme functions.php file, I have confirmed that WP thinks my script(s) are enqueued:

add_action("wp_enqueue_scripts", "my_scripts_styles");
function my_scripts_styles() {
wp_register_script('my_gallery',
    get_theme_file_uri('/scripts/main.js'),
    array ('jquery', 'jquery-ui'),
    '1.0',
    true
);
wp_enqueue_script('my_gallery');


if ( !wp_script_is('my_gallery', 'enqueued') ) {
    echo '<p>my_gallery failed to queue up!</p>';
} else {
    echo "my_gallery is enqueued.";
}
}

Output: my_gallery is enqueued.

Based on this useful bit of debug code:

add_action('wp_footer', 'fb_urls_of_enqueued_stuff');
function fb_urls_of_enqueued_stuff( $handles = array() ) {
    global $wp_scripts, $wp_styles;

    // scripts
    foreach ( $wp_scripts -> registered as $registered )
        $script_urls[ $registered -> handle ] = $registered -> src;
    // styles
    if ( empty( $handles ) ) {
        $handles = array_merge( $wp_scripts -> queue, $wp_styles -> queue );
        array_values( $handles );
    }
    // output of values
    $output = '';
    foreach ( $handles as $handle ) {
        if ( ! empty( $script_urls[ $handle ] ) )
            $output .= $handle . ": " . $script_urls[ $handle ] . '<br />';
    }

    echo $output;
}

Returns a short list, including correct paths to the above two files:

my_gallery: https://example.local/wp-content/themes/my-2020-child/scripts/main.js
twentytwenty-js: https://example.local/wp-content/themes/twentytwenty/assets/js/index.js
wp-block-library: /wp-includes/js/dist/block-library.min.js

However, those files are neither requested in the HTML nor loaded by the browser. This is confirmed locally in WP Local and on a public server.

I can hard-code the load into the theme footer:

<?php wp_footer(); ?>
<?php echo '<script src="' . get_theme_file_uri('/scripts/main.js') . '"></script>'?>

Then the files show up in the Network tab, and my console.log('hello') shows up.

I'm at a loss here. Why is these supposedly enqueued script not getting enqueued?

Update

Actually it seems to be because one script (actually loading two) depends on the other that the issue is happening.

    wp_register_script('my_flickity',
        get_theme_file_uri('/scripts/flickity.min.js'),
        array ('jquery', 'jquery-ui'),
        '1.0',
        true
    );
    wp_enqueue_script('my_flickity');
    if ( !wp_script_is('my_flickity', 'enqueued') ) {
        die("not enqueued."); # Does not die
    }
    if ( !wp_script_is('my_flickity', 'registered') ) {
        die("not registered."); # Does not die
    }
    wp_enqueue_script( 'my_gallery',
        get_theme_file_uri('/scripts/main.js'),
        array( 'my_flickity') # HERE IS THE PROBLEM
    );

If I remove the 'my_flickity' dependency, the scripts both load. Do I need to hook wp_enqueue_scripts a second time?

Update Two

Within the wp_enqueue_scripts-hooked script:

    if ( !wp_script_is('my_flickity', 'done') ) {
        die("not done."); I DIE!!!
    }
5
  • On what action hook are you using wp_register_script? I'd guess you're firing it too early.
    – vancoder
    Aug 9 at 22:34
  • add_action("wp_enqueue_scripts", "my_scripts_styles");
    – MikeiLL
    Aug 9 at 23:05
  • actually, I'm enqueueing two scripts, one dependent on the other and this is where the issue is coming up. Updating post now.
    – MikeiLL
    Aug 9 at 23:15
  • 1
    WordPress does not register a script with the handle jquery-ui by default. Are you/is one of your extensions registering a script with the jquery-ui handle?
    – bosco
    Aug 10 at 0:09
  • Yes. But I didn't even need to. That solved it. Feel like posting an answer for me to accept?
    – MikeiLL
    Aug 10 at 0:10

1 Answer 1

1

WordPress does not register a script with the handle jquery-ui by default, and it will skip printing the markup for any enqueued script for which it is unable to resolve all dependencies at the time of printing. So unless you or another extension is registering or enqueuing a script with the jquery-ui handle, your script which depends upon it will not print.

If your script does depend on jquery-ui, the following is a list of jQuery UI component handles which are registered by default:

  • jquery-ui-core (also includes jquery-ui-widget and jquery-ui-position)
  • jquery-ui-accordion
  • jquery-ui-autocomplete
  • jquery-ui-button
  • jquery-ui-datepicker
  • jquery-ui-dialog
  • jquery-ui-menu
  • jquery-ui-mouse
  • jquery-ui-progressbar
  • jquery-ui-selectmenu
  • jquery-ui-slider
  • jquery-ui-spinner
  • jquery-ui-tabs
  • jquery-ui-tooltip
  • jquery-ui-checkboxradio
  • jquery-ui-controlgroup
  • jquery-ui-draggable
  • jquery-ui-droppable
  • jquery-ui-resizable
  • jquery-ui-selectable
  • jquery-ui-sortable
  • jquery-ui-position
  • jquery-ui-widget

A nicely formatted list of all of the scripts which WordPress registers by default can be found on the wp_enqueue_scripts() documentation page. Alternately, they can also be found in the source of the wp_default_scripts() function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.