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', '.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>
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/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 Commented Nov 27, 2018 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 Commented Nov 27, 2018 at 20:12
- I want greetingnow to run first and then mycustomscript.js. – computerusernov2018 Commented Nov 27, 2018 at 20:18
- Where is greetingnow enqueued? If in another plugin, how is the plugin enqueing the script? – czerspalace Commented Nov 27, 2018 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 Commented Nov 27, 2018 at 21:47
2 Answers
Reset to default -1Try 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?
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/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/mycustomscript.js"></script>