Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

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.

share|improve this answer
    
Yeah, I've done this ... but it seems that there are a few elements that are not available to jQuery. –  dcolumbus Jan 21 '13 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 '13 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 '13 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 '13 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 '13 at 22:23

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
}
share|improve this answer
    
Can you take a look at my question? I added some more information. –  dcolumbus Jan 21 '13 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 '13 at 11:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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