3

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. Commented Aug 9, 2022 at 22:34
  • add_action("wp_enqueue_scripts", "my_scripts_styles"); Commented Aug 9, 2022 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. Commented Aug 9, 2022 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? Commented Aug 10, 2022 at 0:09
  • Yes. But I didn't even need to. That solved it. Feel like posting an answer for me to accept? Commented Aug 10, 2022 at 0:10

1 Answer 1

2

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.