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=".css" />
    <script>
        window.superformIds = ['. $atts['id'] .'];
    </script>
    <script src=".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!

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" />
    <script>
        window.superformIds = ['. $atts['id'] .'];
    </script>
    <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!

• php
• shortcode
• html

Share Improve this question edited May 21, 2019 at 12:52 tommycopeland asked May 21, 2019 at 12:46 tommycopelandtommycopeland 333 bronze badges 2

• 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 Commented May 21, 2019 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 Commented May 21, 2019 at 20:03

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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(
        array(
            'id' => '',
        ),
        $atts
    );
    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.