I'm not sure what I'm doing wrong, but the output of my custom shortcode isn't producing on the front end of the page. I need to load a script from within the output code of a shortcode function.

function superForms ($atts) {
 $atts = shortcode_atts (array (
   'id' => '',
    ), $atts );
 return '<div id='. $atts['id'] .'></div>
    <link rel="stylesheet" media="screen" href="https://assets.sokt.io/superform/superform.css" />
        window.superformIds = ['. $atts['id'] .'];
    <script src="https://assets.sokt.io/superform/superform.js"></script>';}
add_shortcode ( 'superform', 'superForms');

My shortcode is [superform id=Htgm5], which is the ID that needs to be inserted into the DIV identifier, and inside the brackets in the script code for window.superformIds.

But it's not showing on the front end. Any help is much appreciated! Thanks!

  • When you say "not showing", have you inspected the HTML and made sure this code is not there or is the script not working as you expect it? – kero May 21 '19 at 13:09
  • I looked at HTML, and the code was missing entirely. I think I had a syntax error, and anyway, the answer below from MikeNGarrett simplified the code. Thanks! – tommycopeland May 21 '19 at 20:03

This is mostly working fine. You probably want quotes around your id in the window.superformIds array to ensure it's a string.

This is a bad way of going about this. With scripts and styles you want to avoid outputting them directly on the page wherever the shortcode is placed.

Here's a better method:

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
    wp_register_style( 'superform', 'https://assets.sokt.io/superform/superform.css', array(), '1.0.0', 'screen' );
    wp_register_script( 'superform', 'https://assets.sokt.io/superform/superform.js', array( 'jquery' ), '1.0.0', true );

function superForms( $atts ) {
    $atts = shortcode_atts(
            'id' => '',
    wp_enqueue_script( 'superform' );
    wp_enqueue_style( 'superform' );
    wp_localize_script( 'superform', 'superformIds', array( $atts['id'] ) );
    return '<div id="' . $atts['id'] . '"></div>';
add_shortcode( 'superform', 'superForms' );

This registers the scripts and styles ahead of time, allowing you to enqueue them when the shortcode is called. This prevents multiple scripts from being added to the page since enqueuing something twice will only include it once.

You can also specify things like dependencies for your scripts. It looks like superform requires jQuery.

Finally, you can localize your script which passes the associated ID to the DOM and makes it available to the script.

One note, superforms assumes jQuery is set to $. You will need to handle this as well.

  • 1
    Yup, that took care of it! Thanks for the reminder to enqueue the scripts, makes much more sense. – tommycopeland May 21 '19 at 20:02

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.