0

Each time I enqueue scripts inside the shortcode handler, it ends up in the footer. It doesn't matter whether I register them first and set it to load in the header, if I enqueue inside the shortcode it goes in the footer. From what I understand this is the correct behavior - am I right?

Is there any possibility to enqueue a script from within the shortcode handler that will go in the header?

Typically I'd let it load in the footer but some JS's just refuse to work in the footer and I have to fall back on strpos or regex to look for the shortcode before enqueueing. I'm just trying to find a more efficient way. Thanks!

--Update--

As requested, here were my methods.

  1. Register script

    add_action( 'wp_enqueue_scripts', 'ftrjs_admin_init' );
    function ftrjs_admin_init() {
    wp_register_script( 'lwtcountdown', get_stylesheet_directory_uri().'/lwt/js/jquery.lwtCountdown-1.0.js', array('jquery') );
    }
    
  2. Shortcode

    add_shortcode( 'ftrjs', 'ftrjs_callback' );
    function ftrjs_callback( $atts ) {
    wp_enqueue_script('lwtcountdown');
    wp_enqueue_script( 'lwtcounter' );
    wp_enqueue_style( 'lwtstyle' );
    
    $out = "";
    $out .= "<script type='text/javascript'>
    jQuery(document).ready(function($)
    function set_by_date() {
    $('#countdown_dashboard').stopCountDown();
    $('#countdown_dashboard').setCountDown({
        targetDate: {
        'day':      15,
        'month':    1,
        'year':     2014,
        'hour':     12,
        'min':      0,
        'sec':      0
    }
    });
    $('#countdown_dashboard').startCountDown();
    }
    )};
    </script>";
    return $out;
    }
    

In doing this exercise, I see now why it doesn't work because my shortcode outputs Javascript inline, before the plugin loads in the footer.

Once I pulled that out and put it into a separate JS file and enqueue that file it works.

So now, if I need to pass variables I have to use wp_localize_script.

  • 2
    if your js fails in the footer, then there's something wrong with your js. but the reason it has to go in the footer when enqueued in a shortcode handler is because the header has already been output and sent to the browser. – Milo Nov 15 '13 at 3:24
  • If you really must load a script in the header by means of a shortcode you need to do something like this: wordpress.stackexchange.com/a/101515/21376 But that is labor intensive. I would not do it if there is another way. – s_ha_dum Nov 15 '13 at 4:30
  • @Milo I understand what you're saying, I'm no JS expert so I can't say if there is something wrong or not. Most times I'm enqueing a jQuery plugin. The latest one I tried was a jQuery countdown timer and it just won't work in the footer. – tbm Nov 21 '13 at 13:11
  • @s_ha_dum thanks! That's what I've been doing - well similar but yeah. I too am looking for a better alternative but seems like that's what I have to resort to. – tbm Nov 21 '13 at 13:13
  • It would help if you added the code you are using to enqueue your js and instantiate the plugin to your question. It's possibly an issue of noConflict wrappers or not wrapping your own js in a ready event. Also realize that there are poorly written jQuery plugins out there and it may be an issue that the plugin developer has to fix. – Milo Nov 21 '13 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.