2

I'm creating a plugin that allows a user to use a shortcode. This shortcode depends on a bunch of javascript that needs to be present once the shortcode loads.

I'm having issues trying to decide when and where to load the javascript. Pieces of the code that the shortcode spits out are elements that need to be present, but aren't available for jQuery to utilize.

Is there a specific way of loading and attaching scripts that a shortcode relies on?

function build_total_search_method( $atts ) {

    $shorcode_php_function = include( dirname(__FILE__) . "/includes/total_search.php" );

    return $shorcode_php_function;

}
add_shortcode( 'total_search', 'build_total_search_method' );

This seems to work, but it also prints a 1 to the page. Is this method okay?

2 Answers 2

4

Use wp_enqueue_script in your shortcode handler, in WordPress >= 3.3 it will be added to the page in the wp_footer action. Pass any data you need from PHP to JavaScript via wp_localize_script.

6
  • Yeah, I've done this ... but it seems that there are a few elements that are not available to jQuery.
    – dcolumbus
    Jan 21, 2013 at 20:43
  • I'm not sure what you mean by that, edit your question to show the code you're attempting to use.
    – Milo
    Jan 21, 2013 at 20:44
  • If those elements aren't available to jquery when the DOM ready event fires, what makes you think including js inside the content is going to make any difference?
    – Tom J Nowell
    Jan 21, 2013 at 21:23
  • When creating a shortcode, the option is to return a string ... but my shortcode is quite large, with both HTML and JS. Can I return a .php file?
    – dcolumbus
    Jan 21, 2013 at 21:39
  • See the example in PHP docs for include. Don't put JavaScript directly in your returned shortcode data, enqueue and localize an external file. Also, as Tom mentioned, you're probably doing things wrong if DOM elements don't exist when your JS fires.
    – Milo
    Jan 21, 2013 at 22:23
0

The wp_enqueue_script() include the wp_localize_script() is the right solution. Parse the arguments of the shortcode or enqueue always the script.

If you have many data and you will use this in a Json object. Some hints, which should help, if it comes to problems or which link to solutions via JSON directly. The function wp_localize_script() decodes HTML Entities, which is kind of important, but not always the perfect solution. The function uses json_encode(), which can let to problems in multi-dimensional arrays in connection with the decoding of entities. The alternative solution is to send data as json object, like the example below.

add_action( 'admin_enqueue_scripts', 'fb_print_scripts' );
function fb_print_scripts() {
    global $current_screen;

    if ( isset( $current_screen -> id ) && ! in_array( $current_screen -> id, array( 'post', 'page' ) ) )
        return;

    if ( is_plugin_active_for_network( plugin_basename( __FILE__ ) ) )
        $options = get_site_option( 'my_options_id' );
    else
        $options = get_option( 'my_options_id' );

    if ( ! $options )
        return;
    ?>
    <script type="text/javascript">
        var my_json_object = <?php echo json_encode( $options ); ?>;
    </script>
    <?php
}
2
  • Can you take a look at my question? I added some more information.
    – dcolumbus
    Jan 21, 2013 at 23:15
  • I think the 1 is a problem in your file format, check, if it the right format, like unix-utf8 file. The 1 is a typical output from wrong header of the file.
    – bueltge
    Jan 23, 2013 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.