Enqueuing some javaScript for a shortcode in a custom WordPress plugin

Question

The following code works as expected on my WordPress setup, but when I send it to my friend who is running a cPanel managed version of WordPress, the JavaScript never runs. I can inspect the DOM and see that the js-test div is inserted though, verifying that the php ran. Any thoughts on what might be causing this? Am I doing something improper with the way I am enqueuing the script? I'd ideally like to only enqueue the script if the plugin's shortcode is present on the page, to avoid an unnecessary request.

js-test.php

<?php
/*
Plugin Name:  JS Test
Description:  JS Test
Version:      1.0
License:      MIT
License URI:  https://opensource.org/license/mit
*/

add_shortcode( 'js_test', function( $atts, $content, $tag ) {
  add_action("wp_enqueue_scripts", function() {
    wp_enqueue_script('js-test', plugin_dir_url( __FILE__ ) . 'js-test.js');
  });

  return "<div id='js-test' />";                                                
});

js-test.js

document.addEventListener('DOMContentLoaded', function() {
  const target = document.getElementById("js-test");                            
  console.log('target: ', target);
  if (target == null) {
    return;
  }

  target.innerHTML = "hello!!!";
});

LoicTheAztec · Accepted Answer · 2024-10-28 11:58:26Z

1

You should not use wp_enqueue_scripts hook inside your shortcode, instead you should directly add wp_enqueue_script() function like:

add_shortcode( 'js_test', 'js_test_shortcode' );

function js_test_shortcode( $atts, $content, $tag ) {
    wp_enqueue_script('js-test', plugin_dir_url( __FILE__ ) . 'js-test.js');
  
    return '<div id="js-test"></div>';    
}

It should work now.

Note that I added a closing tag for your DIV.

answered Oct 28, 2024 at 11:58

LoicTheAztec

257k25 gold badges403 silver badges451 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul I Over a year ago

This fixed it, thank you!

Collectives™ on Stack Overflow

Enqueuing some javaScript for a shortcode in a custom WordPress plugin

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related