How to use jquery and wp_enqueue_script

Question

I´ve spent a good while trying to figure this out. Im trying to add a script that need an external jquerylibrary. I can make it work by inserting my script between scripttags, however i understand thats not the correct way to do it, and it breaks another script on the site.

I spent a fair amount of time tonight trying to figure out how to add the script correct, and i just cant get it.

I understand something like this is the correct way to enqueue the script:

function my_scripts_method() { wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.9.1.js'); wp_enqueue_script( 'jquery' ); } add_action('wp_enqueue_scripts', 'my_scripts_method');

My main question is, how do i write my functions so it calls the library, and at the same time failsafe it so it only loads once, and doesnt crash with other scripts? This is the script:

$(document).ready(function () {


$("#menu-item-16").hover(




          function () {
                  $('body').css("background", "#ff9900");
              }, 
              function () {
                $('body').css("background", "#ccc");
             }
            );

            $("#menu-item-17”).hover(
              function () {
                  $('body').css("background", "red");
              }, 
              function () {
                  $('body').css("background", "#ccc");
              }
            );

            $("#menu-item-18”).hover(
              function () {
                  $('body').css("background", "yellow");
              }, 
              function () {
                  $('body').css("background", "#ccc");
              }
            );
        });

Edit:

Second question, several librarys and a stylesheet.

As said above i have a little more complex script that you guys might be able to help me out.

I have this code in the header right now, and it works.

   `<link rel="stylesheet" type="text/css" href="/wp-content/themes/neighborhood/js/jquery.fullPage.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">     </script> 
 <script type="text/javascript" src="/wp-content/themes/neighborhood/js/vendors/jquery.slimscroll.min.js"></script>

<script type="text/javascript" src="/wp-content/themes/neighborhood/js/jquery.fullPage.js"></script>



<script>
 $(document).ready(function() {
$.fn.fullpage({
    verticalCentered: true,
     resize : true,
    slidesColor : ['#AF1700', '#359973', '#F46321', '#A6C7DB'],
    scrollingSpeed: 700,
    easing: 'easeInQuart',
    menu: false,
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    autoScrolling: true,
    scrollOverflow: true,
    css3: false,
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#element1, .element2',
    normalScrollElements: '#element1, .element2',
    keyboardScrolling: true,
    touchSensitivity: 15,
    continuousVertical: false,
    animateAnchor: false, 
    setScrollingSpeed: 1000,



});
});    

 </script>

`

From my newfound insights, i tried this, and it didnt work:

`

function fullpage() {     wp_enqueue_script('jquery');

wp_register_style( ’fullpage-css', get_template_directory_uri() . '/js/jquery.fullPage.css','','', 'screen' );   
wp_register_script( 'jquery.1.8.3', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array('jquery'),'',true  ); 
 wp_register_script( 'jquery.1.9.1', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', array('jquery'),'',true  );

 wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'',true  ); 
 wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'',true  ); 
 wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', '', null,''  ); 

wp_enqueue_style( 'fullpage-css' ); // Enqueue our stylesheet

wp_enqueue_script( 'jquery.1.8.3' );  // Enqueue our first script

 wp_enqueue_script( 'jquery.1.9.1' ); // Enqueue our second script

 wp_enqueue_script( 'fullpage' );  // Enqueue our third  script

wp_enqueue_script( 'fullpagecode' ); // Enqueue fourth script

 wp_enqueue_script( ’slimscroll’ ); // Enqueue fifth script

  }add_action( 'wp_enqueue_scripts', ’fullpage’ ); `

This is the code you are using for your site? It has some typo replace ” with this " — Rahil Wazir
– Rahil Wazir, Commented Feb 22, 2014 at 0:51

hyperdrive · Accepted Answer · 2014-02-22 03:39:34Z

5

Don't run your jquery in a script. This will break other scripts in wordpress.

Make a .js file (eg. example.js and put this in your theme folder under a /js directory) and 'enqueue' it in your functions.php file like this.

function theme_styles() {
    wp_register_style( 'fullpage-css', get_template_directory_uri() . '/css/jquery.fullPage.css' );   
    wp_enqueue_style( 'fullpage-css' ); 
}
add_action('wp_enqueue_scripts', 'theme_styles');

function theme_scripts() {
    wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'1.0.0',true  ); 
    wp_enqueue_script( 'fullpage' );
    wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'1.0.0',true  ); 
    wp_enqueue_script( 'fullpagecode' );
    wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', array('jquery'), null, true  );
    wp_enqueue_script( 'slimscroll' );
}
add_action('wp_enqueue_scripts', 'theme_scripts');

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

$src is the path to the js file. $deps is where you define this script requires jquery, like this. array('jquery')

You don't need to include jquery as wordpress has this built in.

Then in your .js file in your theme folder wrap your code in a No Conflict wrapper. Using $() will return undefined otherwise.

jQuery(document).ready(function($) {

    $("#menu-item-16").hover(
          function () {
                  $('body').css("background", "#ff9900");
          }, 
          function () {
            $('body').css("background", "#ccc");
         }
    );

    $("#menu-item-17").hover(
        function () {
          $('body').css("background", "red");
        }, 
        function () {
          $('body').css("background", "#ccc");
        }
    );

    $("#menu-item-18").hover(
        function () {
          $('body').css("background", "yellow");
        }, 
        function () {
          $('body').css("background", "#ccc");
        }
    );

});

edited Feb 22, 2014 at 3:39

answered Feb 22, 2014 at 0:59

hyperdrive

1,8565 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jerry Over a year ago

Thanks for the reply! Still not following though (Sorry). Should i create a .js file with the jQuery(document).ready(function($) {... code, and then link it inside the function that i place in functions.php? No need to call the script in the head and such then? Thanks again!

hyperdrive Over a year ago

Make a js file with the jQuery() code. Put it in wp-content/themes/your-theme/js/. I just posted this wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); to show you how the action works. Use the first one. get_template_directory_uri() . '/js/example.js' This is the reference to your theme directory and the javascript file.

Jerry Over a year ago

So thats it? Wrap the code in a .js that you link to the wp_enqueue_script function that you place in functions.php, and no need to call it in the header.. Ok ill get it. And, yeah understood what you meant wuth that line of code a bit to late. However, this breaks the other script, and this one doesnt function properly, but it does execute. Its a start. Thanks a lot for the patience.

Jerry Over a year ago

Hey that worked! It still doesnt work with my other script, but i have that loaded in the header and now i know how to do this properly, finally. Thanks a lot!

Jerry Over a year ago

Added a second question, if you dont mind. Please point out what i am doing wronf here. Fullpagecode is the .jsfile with the $(document).ready(function code. Thanks!

|

Collectives™ on Stack Overflow

How to use jquery and wp_enqueue_script

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related