0

Please help me to understand why this works.

I have loaded my jQuery in mu functions.php-file like this:

<?php 
    function load_jquery() {
        wp_enqueue_script( 'jquery' );
    }

    add_action( 'wp_enqueue_scripts', 'load_jquery' );
?>

This is the only proper way of doing this I know.
But now comes the problem
From a github page
I have downloaded a .zip-file to add to my website

To do this I have to add the following in the head of my header.php-file :

    <script src="<?php bloginfo('template_directory')?>/js/modernizr-2.6.2.min.js"></script>
    <script src="<?php bloginfo('template_directory')?>/js/jquery-1.9.1.min.js"></script>
    <script src="<?php bloginfo('template_directory')?>/js/jquery.cookie-1.3.1.js"></script>
    <script src="<?php bloginfo('template_directory')?>/js/jquery.steps.js"></script>

The first time I did this I left out the jquery-1.9.1.min.js file because I thought jQuery was allready loaded. It didn't work.

After I added the jQuery file the whole thing came to live like it should be.

The part I don't understand is why I had to load jQuery two times.

I work with WP 4.4.2

Can somebody explain this to me?

---------- UPDATE -----------
So I found that the order of what is loaded matters!
The demo-file (the github link) states teh following order:

<script src="../lib/modernizr-2.6.2.min.js"></script>
<script src="../lib/jquery-1.9.1.min.js"></script>
<script src="../lib/jquery.cookie-1.3.1.js"></script>
<script src="../build/jquery.steps.js"></script>

If I change the location of jquery-1.9.1.min.js and place it at the bottom everything stops working. If I place it just above jquery.steps.js everything works again.

This is the demo version. If I translate this to my WordPress installation I can't edit the output of my wp_head(). Here is what my wp_head()-output looks like:

<script src="http://192.168.104.105:8888/basic/wp-includes/js/jquery/jquery.js?ver=1.11.3" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1" type="text/javascript">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax-min.js?ver=4.4.2" type="text/javascript">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.3.5/jquery.localScroll.min.js?ver=4.4.2" type="text/javascript">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js?ver=4.4.2" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-content/themes/basic_theme/js/modernizr-2.6.2.min.js?ver=4.4.2" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-content/themes/basic_theme/js/jquery.cookie-1.3.1.js?ver=4.4.2" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-content/themes/basic_theme/js/jquery.steps.js?ver=4.4.2" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-content/themes/basic_theme/js/modernizr.js?ver=4.4.2" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-content/themes/basic_theme/js/mootools.js?ver=4.4.2" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-content/themes/basic_theme/js/slimbox.js?ver=4.4.2" type="text/javascript">
<script src="http://192.168.104.105:8888/basic/wp-content/themes/basic_theme/js/modernizr_team.js?ver=4.4.2" type="text/javascript">

Should I change the output order (if possible) of wp_head()

I also tried to load the jquery.steps.js file in the wp_footer() but no luck

Regestring and Enqueuing:

function pr_scripts_styles() {

wp_enqueue_script('jquery'); // just enqueue as its already registered 
wp_enqueue_script( 'jquery_parallax', '//cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax-min.js' );
wp_enqueue_script( 'jquery_localscroll', '//cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.3.5/jquery.localScroll.min.js' );
wp_enqueue_script( 'jquery_scrollto', '//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js' );
wp_enqueue_script( 'jquery_scrollto', '//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js' );

/*   REGISTER ALL JS FOR SITE */
wp_register_script('modernizr_2_6_2',get_stylesheet_directory_uri().'/js/modernizr-2.6.2.min.js', array( 'jquery' ));
wp_register_script('jquery_cookie_1_3_1',get_stylesheet_directory_uri().'/js/jquery.cookie-1.3.1.js', array( 'modernizr_2_6_2'));
wp_register_script('jquery_steps',get_stylesheet_directory_uri().'/build/jquery.steps.js',array( 'jquery_cookie_1_3_1' ),'',false);
wp_register_script('modernizr',get_stylesheet_directory_uri().'/js/modernizr.js');
wp_register_script('mootools',get_stylesheet_directory_uri().'/js/mootools.js');
wp_register_script('slimbox',get_stylesheet_directory_uri().'/js/slimbox.js');
wp_register_script('modernizr_team',get_stylesheet_directory_uri().'/js/modernizr_team.js');


/*   REGISTER ALL CSS FOR SITE */
wp_register_style('font_awesome',get_stylesheet_directory_uri().'/font-awesome/4.5.0/css/font-awesome.css');
wp_register_style('normalize',get_stylesheet_directory_uri().'/css/normalize.css');
wp_register_style('main',get_stylesheet_directory_uri().'/css/main.css');
wp_register_style('jquery_steps',get_stylesheet_directory_uri().'/css/jquery.steps.css');
wp_register_style('slimbox_css',get_stylesheet_directory_uri().'/css/slimbox.css');
wp_register_style('teammembers',get_stylesheet_directory_uri().'/css/teammembers.css');

/*   CALL ALL CSS AND SCRIPTS FOR SITE */
wp_enqueue_script('modernizr_2_6_2');
wp_enqueue_script('jquery_cookie_1_3_1');
wp_enqueue_script('jquery_steps');
wp_enqueue_script('modernizr');
wp_enqueue_script('mootools');
wp_enqueue_script('slimbox');
wp_enqueue_script('modernizr_team');

wp_enqueue_style('font_awesome');
wp_enqueue_style('normalize');
wp_enqueue_style('main');
wp_enqueue_style('jquery_steps');
wp_enqueue_style('slimbox_css');
wp_enqueue_style('teammembers');
}
add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );
2

You can enqueue all your scripts the same way as you enqueue jQuery.

Register and enqueue all your Javascripts like this (in your load_jquery function)

wp_register_script (
    'yourscripthandle', //string $handle: a string to identify this script
    get_bloginfo( 'template_url' ) . '/js/yourcustomjs.js', //string $src: Path of your script file
    array ('jquery' ), // array $deps = array(): defining which scripts your script is dependend on. In your case, it's jQuery.
    '', // string|bool $ver = false: The version of your Script
    true //bool $in_footer = false: whether your script should be enqueued in `wp_head()` or `wp_footer()`
);
wp_enqueue_script( 'yourscripthandle' );

Afterwards you just need to make sure that you set $in_footer to false, if you need the scripts in the header.

Also make sure your theme calls wp_head()!

The problem with loading jQuery two times seems to be that it is included after your scripts are called - so adding it a second time befor the others solved that issue. Please be sure to correct this, as this is going to have implications on a lot of stuff.

10
  • Thnx. I do have the wp_head() called in my header and wp_footer() in my footer. I have all my scripts in my header. I'll move them to the register function. I'll search the codex how to register multiple scripts at once. – Interactive Feb 9 '16 at 15:27
  • You can just register them one by one, but that is not too hard to do. – fischi Feb 9 '16 at 15:30
  • I have replaced all my codes and deliberately left the jquery-1.9.1.min.js out of it and the problem remains. If I add it it works but other functions fail. Any other thoughts of what I might try? – Interactive Feb 9 '16 at 16:16
  • what is where in your source code? – fischi Feb 9 '16 at 16:28
  • Sorry. I did like you said. All my js and css files are registered and enqueued in my functions.php file. I have done everything like mentioned in the link I sent before. Everything is now loaded in the wp_head() and I think that this is the problem for some reason – Interactive Feb 9 '16 at 16:48

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.