I have created a plugin, and it loads some scripts in footer. I want to make sure my plugin scripts are loading before any other scripts. Is there a way to acheive this. I have been behind this for the last few days. Actually my plugin adds a shortcode and whenver the shortcode gets called it loads a js file also. sample script is below:

add_action('after_setup_theme', function() {
    add_shortcode('another-shortcode', function($atts) {

       wp_enqueue_script('another-custom-script', plugin_dir_url( __FILE__ ) . '/another-custom-script.js');
       //for test
        return getdate()['year'];
    });
});

I have created a plugin, and it loads some scripts in footer. I want to make sure my plugin scripts are loading before any other scripts. Is there a way to acheive this. I have been behind this for the last few days. Actually my plugin adds a shortcode and whenver the shortcode gets called it loads a js file also. sample script is below:

add_action('after_setup_theme', function() {
    add_shortcode('another-shortcode', function($atts) {

       wp_enqueue_script('another-custom-script', plugin_dir_url( __FILE__ ) . '/another-custom-script.js');
       //for test
        return getdate()['year'];
    });
});

• plugin-development
• wp-enqueue-script

• It would be difficult to ensure your script loads before any other script. Maybe you could use wp_footer and manually add the script with a priority 0 but I think it may be easier to just use wp_enqueu_scripts hook with a priority 0. If your script has dependencies, such as jQuery, then it will be much more difficult. – Howdy_McGee ♦ Commented Feb 24, 2020 at 16:03
• @Howdy_McGee the script is loading as in the sample code. then Is there a way I can load the script in the header when we are loading script via 'after_setup_theme' as in the code. I see only when using 'wp_enqueue_scripts ' the last param for loading in footer/header is not working. – Salih K Commented Feb 24, 2020 at 16:11
• If the last param of wp_enqueue_script() is not working I would assume that the theme is missing wp_head() and wp_footer()` which is concerning. – Howdy_McGee ♦ Commented Feb 24, 2020 at 16:17
• No, wp_head() and wp_footer are in place. I am trying with the basic default theme. If you try 'wp_enqueue_script' inside 'after_setup_theme' hook, you will find this. – Salih K Commented Feb 24, 2020 at 16:20
• This is because after_setup_theme() is too late. You need to use the wp_enqueue_scripts hook specifically. – Howdy_McGee ♦ Commented Feb 24, 2020 at 16:24

1 Answer 1

Shortcodes are parsed while outputting content, so the problem may be that other scripts are always included first because hooks like wp_head() are called before WP ever gets to any content.

Instead of shortcodes, you could enqueue on the wp_enqueue_scripts hook, if you can find a query condition to isolate the places where you want the script enqueued:

<?php
add_action('wp_enqueue_scripts', 'wpse_first_enqueue', 1);
function wpse_first_enqueue() {
    // Only enqueue on your desired condition
    // In this example, only on individual Posts
    if(is_singular('post')) {
        wp_enqueue_script('another-custom-script', plugin_dir_url( __FILE__ ) . '/another-custom-script.js');
    }
}
?>

If you're planning to distribute the plugin, and there isn't a query condition that always clearly isolates the places where the script needs to fire, you might consider always enqueuing it on the front end with this low priority. You could still have users enter a shortcode which creates a div, and then in the JS, if that div exists in the content, fire your functionality. (If the div doesn't exist, don't fire anything.)

Or, if you're just using this for your own site, and all of the JS files are enqueued properly, you could dequeue all scripts and then re-enqueue everything with dependencies. You can't say "enqueue this one first," but you can say "make sure Script A is enqueued before this next script is enqueued." The downside is you will need to enqueue your script on every front end page, but again you can set up a condition that waits and only fires when someone has used the plugin on that page.

<?php
add_action('wp_enqueue_scripts', 'wpse_dequeue_and_re_enqueue', 1);
function wpse_dequeue_and_re_enqueue() {
    // Step 1: Dequeue jQuery
    wp_dequeue_script('jquery');
    // (continue dequeueing all JS scripts)
    // Step 2: Enqueue your script
    wp_enqueue_script('another-custom-script', plugin_dir_url( __FILE__ ) . '/another-custom-script.js');
    // Step 3: Re-enqueue everything, with your script as dependency
    wp_enqueue_script('jquery', '/wp-includes/js/jquery/jquery.js', array('another-custom-script');
    // (continue re-enqueueing all scripts)
}
?>

You'll need to be careful about the order and dependencies, and it may be tedious to maintain, but this will guarantee that (with the current theme and plugin set) your script is always included before anything else.