0

I have registered scripts which are supposed to load in head section. But for some reason I don't get these links loaded in head. Instead of loading scripts in head these are loading in footer.

 add_action('init', 'my_enqueued_assets');

    function my_enqueued_assets() { 
        //Register Css
        wp_register_style('my-css', MY_PLUGIN_URL.'css/my_styles.css'); 
        wp_register_style('my-admin-css', MY_PLUGIN_URL.'css/my_admin_styles.css'); 
        //Register JS 
        wp_register_script('my-jquery-min', MY_PLUGIN_URL.'js/jquery-3.2.1.min.js');
        wp_register_script('my-script-min', MY_PLUGIN_URL.'js/my_isotope.min.js');
        wp_register_script('my-script', MY_PLUGIN_URL.'js/my_isotope.js', array('jquery'), my_PLUGIN_VERSION, false );
        wp_register_script('my-lightbox-script', MY_PLUGIN_URL.'js/my-lightbox.js', array('jquery'), my_PLUGIN_VERSION, false );
        wp_register_script('my-prefix-script',MY_PLUGIN_URL.'/js/myscript.js', array('jquery'), '0.1',false );
    }

I loaded these scripts in shortcode to load scripts and style when only shortcode is used or called.

function my_shortcodes_init()
{
    function my_shortcode($atts = [], $content = null)
    {
        //default portfolio value
        $id = 1;
        wp_enqueue_style('my-css'); 
        wp_enqueue_script('my-jquery-min');
        wp_enqueue_script('my-script-min'); 
        wp_enqueue_script('my-script');
        wp_enqueue_script('my-lightbox-script');

        if (isset($atts["id"])) {
            $id = $atts["id"];
        }       
        require MY_PLUGIN_DIR.'views/isotope.php';
    }
    add_shortcode('MY_GALLERY', 'my_shortcode');
}
add_action('init', 'my_shortcodes_init');
  • please any one here to explain or solve this issue i am newbie in wordpress plugin development. – Pravin Work Jun 23 '17 at 6:30
2

This happens because of the order of execution of your WordPress page. In your code it goes like this:

  1. At init, which is early in the generation process of the page, you are registering the scripts. That is, you are telling WP that you want to use these later on. No html is generated.
  2. At init you are also registering a shortcode. This means that you are defining a function that will be triggered once the shortcode has been encountered. No html is generated.
  3. WP then goes on generating the html. First the head of the page, menus and so on, until it comes to the post content.
  4. In the post content it finds the shortcode and starts executing the function my_shortcode you have defined. Inside this function it finds wp_enqueue_script. At this point the html of the head already has been generated. So it has no choice but placing the html with the scripts in the footer of the page.

If you want the scripts in the head, you must make sure wp_enqueue_scripts is triggered at init. Of course, this means they will also be enqueued when there is no shortcode in the content.

  • how can i enqueue those scripts and style only when shortcode encounter – Pravin Work Jun 23 '17 at 10:07
  • great explaination ever...and it really worked . – Pravin Work Jun 23 '17 at 10:15
  • but how can i restrict these scripts and style to load only when shortcode is encountered.. – Pravin Work Jun 23 '17 at 10:16
  • To do so, you would have to pre-run the post loop at init, check if the shortcode is present anywhere and if yes enqueue the scripts. This is possible, but fairly complicated stuff. If it's not essential that your scripts load in the head, I'd keep it the way it is now. – cjbj Jun 23 '17 at 10:23
  • but i am using this code in plugin...how do i know where this shortcode will be used. – Pravin Work Jun 23 '17 at 10:48
0

The final argument in the wp-enqueue-script function is a boolean which specifies whether the script should appear in the footer.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

The first two scripts in your example do not specify the optional arguments, so it will default to true, putting the scripts down in the footer.

  • but those three in which i have mentioned those are also not loading in head – Pravin Work Jun 21 '17 at 11:43
  • actually i have registered scripts first and loaded in shortcode so that these scripts can only be available if shortcode is applied. – Pravin Work Jun 21 '17 at 11:57
  • hey i hvae described and added code of shortcode will you please try this for me... – Pravin Work Jun 23 '17 at 6:31

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.