Re-order the assets load

  • BGH_

    (@bgh_)


    11 years, 5 months ago

    Hello everyone,

    I’m having an issue while loading the assets of my website. This is the order they’re loading:

    <link rel='stylesheet' id='comments_evolved_tabs_css-css'  href='http://www.example.com/wp-content/plugins/trunk/assets/styles/plugin.css?ver=1.5.8' type='text/css' media='all' />
<script type='text/javascript' src='http://www.example.com/wp-includes/js/admin-bar.min.js?ver=4.0'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/comment-reply.min.js?ver=4.0'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js?ver=1.10.4'></script>

    But I need them to load in this order:

    <link rel='stylesheet' id='comments_evolved_tabs_css-css'  href='http://www.example.com/wp-content/plugins/trunk/assets/styles/plugin.css?ver=1.5.8' type='text/css' media='all' />
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/admin-bar.min.js?ver=4.0'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/comment-reply.min.js?ver=4.0'></script>

    Is there a way to achieve to load in this desired order?

    Thank you in advance!

    Best Regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • codemovement.pk

    (@codemovementpk)

    11 years, 5 months ago

    <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

    $deps can do it for you, add all your dependent javascript and it will load before your script.

    //Source: http://codex.wordpress.org/
<?php
function my_scripts_method() {
	wp_enqueue_script(
		'newscript',
		plugins_url( '/js/newscript.js' , __FILE__ ),
		array( 'scriptaculous' )
	);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
// Source: http://codex.wordpress.org/

    $in_footer will allow to load the js in footer after the content. Do it as you like ..

    Thread Starter BGH_

    (@bgh_)

    11 years, 5 months ago

    Thanks for your answer, codemovement.pk!

    Sorry that I didn’t provide much details, but I was in a rush when I posted this topic.

    This is the code I have for loading the plugin assets:

    function my_scripts_and_styles() {

   if ( ! is_single() )
      return;

   wp_register_style('comments_evolved_tabs_css', COMMENTS_EVOLVED_URL . '/assets/styles/plugin.css', null, COMMENTS_EVOLVED_VERSION, "all");
   //wp_enqueue_script('jquery');
   //wp_enqueue_script('jquery-ui-core');
   wp_enqueue_script('jquery-ui-tabs');

}

    So, in theory it should be this way:

    function my_scripts_and_styles() {

   if ( ! is_single() )
      return;

   wp_register_style('comments_evolved_tabs_css', COMMENTS_EVOLVED_URL . '/assets/styles/plugin.css', null, COMMENTS_EVOLVED_VERSION, "all");
   //wp_enqueue_script('jquery');
   //wp_enqueue_script('jquery-ui-core');
   wp_enqueue_script(
		'jquery-ui-tabs',
		includes_url( '/js/jquery/ui/jquery.ui.tabs.min.js' , __FILE__ ),
		array( 'admin-bar', 'comments-reply' )
	);

}

    Note that in the last array, I added 'admin-bar' but I don’t know if that’s the correct way of ‘spelling’ it, the same goes with 'comments-reply'.

    Is this right or I understood it wrong?

    Regards.

    Thread Starter BGH_

    (@bgh_)

    11 years, 5 months ago

    Ok, tried the above, but it didn’t work, I think the problem is on the final array which this is something I made up before testing to see if I understood the way it works.

    Any help with this, please?

    Thanks in advance!

    Regards.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Re-order the assets load’ is closed to new replies.