Help with loading JS in shortcodes only

I’m working on a simple plugin, and it’s the first time I use OOP and namespace, so I’ll include the whole code.
I’m trying to load JS only when the shortcode is processed… but it doesn’t work, the script isn’t loaded!

Any suggestion? What I’m doing wrong?
Thank you very much.
Simone.

namespace xxsimoxx\smyp;

class Send_Position {
	public function __construct() {
		add_action( 'wp_enqueue_scripts', [$this, 'register_script'] );
		add_shortcode( 'smyp', [$this, 'button_shortcode'] );
	}

	public function register_script() {
		wp_register_script( 'smyp-script', plugins_url( '/scripts/smyp.js', __FILE__ ), array(), '1.0.0', false  );
		wp_register_style( 'smyp-style', plugins_url( '/styles/smyp.css', __FILE__ ), array(), '1.0.0', 'all'  );
	}

	public function button_shortcode( $atts, $content = null ) {
		wp_enqueue_script('smyp-script');
		wp_enqueue_style('smyp-style');
		return '<button class="smyp-button" onclick="smypSend()">' . $content .'</button>';
	}
}
new Send_Position;

Did you create the script? The above works for me after placing the file into it’s own directory and creating the script. I can’t upload a zip here… sent to you on Slack instead.

By the way, good show for loading your scripts and styles performantly for shortcodes!

1 Like

Thanks to @CodePotent for the help.
Partially solved.
It has something to do with the theme, I’ll try to figure out what!

Simone.

1 Like

This is a case where, had you not asked the question, you might still be digging around in the plugin code for the error. :wink:

BTW, +1 for trying to solve the problem on your own before asking…but then asking when it the problem didn’t reveal itself after some work.

1 Like

I think you need:

wp_register_script( 'smyp-script', plugins_url( '/scripts/smyp.js', __FILE__ ), array(), '1.0.0', true  );

because by the time you process the content the header has probably been output.

1 Like

Ok, I figured out the problem.

Background

I wanted a clean way to enqueue CSS and JavaScript only where my shortcode is called.
I didn’t like the way

if ( i-am-in-a-post() && this-post-needs-my-scripts() )

So the right way seemed to be

  • register the script with wp_register_script
  • enqueue it with wp_enqueue_script within the shortcode

For this thing to work the script must be in the footer (or it’s too late), so $in_footer have to be true

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

And the enqueue is better done this way for not having duplicates:

		if( ! wp_style_is( "smyp-style", $list = 'enqueued' ) ){ 
			wp_enqueue_style('smyp-style'); 
		}

The issue

Because it’s my first ever OOP code (i just used some perl classes in some scripts) and the code wasn’t working on two different sites with different setup I belived that was the code… but the problem was in themes.

Both themes were not calling wp_footer() in the footer file that is inserted by get_footer(), so everything that ClassicPress wanted to insert in the footer was not honored.

Thank you for the support!

Simone.

7 Likes