0

I want to run my own JavaScript on a specific WordPress page but only after a third party's plugin runs as I am trying to slightly modify that plugin. My problem is that my JavaScript is running before, not after, the plugin's script. Is my mistake in how I am referring to the plugin's script (i.e. the dependent script) in the $deps array?

<?php  
// What was originally in the child theme’s function.php file  
add_action( 'wp_enqueue_scripts', 'you_enqueue_styles' );

function you_enqueue_styles() 
{
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

// Added by me to the child theme’s function.php file
function load_new_js() {
    if( is_page( 692 ) ) {
        wp_enqueue_script('modify_plugin_js', 'https://www.example.com/mycustomscript.js', array('greetingnow', 'jquery'), '',false);
    }
}
// Should I even bother putting in a priority of 100 to try and force this to be run last?
add_action('wp_enqueue_scripts', 'load_new_js', 100);

This is what the script in the HTML looks like:

<html>
<body>

<script>
<!-- This is the dependent code that should run first and is put directly into the HTML file by the third party Plugin provider -->
var greetingnow = "Good Morning!";
alert(greetingnow);
</script>

</body>
</html>
  • It's okay to add dependent script in your wp_enqueue_script function. – Anton Lukin Nov 27 '18 at 19:49
  • Thanks for the reply @AntonLukin, I know it is okay but my problem is the dependencies are not working as I expected. – computerusernov2018 Nov 27 '18 at 20:12
  • I want greetingnow to run first and then mycustomscript.js. – computerusernov2018 Nov 27 '18 at 20:18
  • Where is greetingnow enqueued? If in another plugin, how is the plugin enqueing the script? – czerspalace Nov 27 '18 at 20:47
  • greetingnow is not enqueued anywhere. I thought I did not have to enqueue it since it is already a script in the HTML page. Do I still have to include it in the enqueue function? – computerusernov2018 Nov 27 '18 at 21:47
-1

Try this...

function load_new_js() {
    if( is_page( 692 ) ) {
        wp_enqueue_script(
            'modify_plugin_js',
            get_stylesheet_directory_uri() . '/mycustomscript.js',
            array('jquery','greetingnow')
        );

    }
}

If that doesn't work, what plugin are you using?

  • I tried that as well, to no avail. The plugin is Caldera Form's add on for Google Places autocomplete address search. – computerusernov2018 Nov 28 '18 at 3:18
  • down vote? really? Just trying to help by narrowing it down – RiddleMeThis Nov 28 '18 at 13:23
  • 1
    I also discovered that I needed to request a new (replacement) Google API code; secondly I did not have a callback in the API URL key. – computerusernov2018 Nov 29 '18 at 16:30
1

Use wp_add_inline_script(). It lets you add and inline script that's dependent on an enqueued script:

function wpse_320377_register_scripts() {
    wp_register_script( 'my-script-handle', 'https://www.example.com/mycustomscript.js', [ 'jquery' ], '', true );
    wp_add_inline_script( 'my-script-handle', 'var greetingnow = "Good Morning!"; alert(greetingnow);', 'before' );

    if ( is_page( 692 ) ) {
        wp_enqueue_script( 'my-script-handle' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_320377_register_scripts' );

In that example, it registers a custom script, my-script-handle, and then attaches the inline script to it using wp_add_inline_script() so that whenever my-script-handle is enqueued, the inline script will be output right before it. The result will look something like this:

<script>
    var greetingnow = "Good Morning!"; alert(greetingnow);
</script>
<script type="text/javascript" src="https://www.example.com/mycustomscript.js"></script>
  • wp_add_inline_script() is a good suggestion. But the output is the other way around: I want the inline script to be executed first and then mycustomscript.js. – computerusernov2018 Nov 28 '18 at 1:40
  • 1
    You can set the third argument of wp_add_inline_script() to 'before' to put the inline script first. I've updated my answer. – Jacob Peattie Nov 28 '18 at 2:05
  • That would work for me except that the inline text is populated by a third party's plugin, the end result being it would be outputted to the HTML twice. I just want my .js file executed after the inline script runs. – computerusernov2018 Nov 28 '18 at 3:16

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.