How to include jquery, jquery-ui in wordpress

Question

How to include jquery, jquery-ui-core and https://www.paytabs.com/theme/express_checkout/js/jquery-1.11.1.min.js in wordpess. I get an error "Uncaught TypeError: jQuery(...).UItoTop is not a function". Here's a piece of code:

function magikCreta_load_jquery(){
      wp_enqueue_script('jquery');
      wp_enqueue_script('jquery-ui-core');
      wp_enqueue_script('jquery-ui', 'https://www.paytabs.com/theme/express_checkout/js/jquery-1.11.1.min.js', array('jquery-ui-core'));
    }

<?php echo '<script>
            jQuery(document).ready(function($){
                Paytabs("#express_checkout").expresscheckout({
});</script>';

You realise that jquery-1.11.1.min.js file is just jQuery, not jQuery-UI? Loading a second jQuery nukes any previously loaded plugins — Phil
– Phil, Commented Feb 10, 2017 at 0:15
also nothing here would indicate you are loading a plugin script that would contain the missing function — charlietfl
– charlietfl, Commented Feb 10, 2017 at 0:45

Tristup · Accepted Answer · 2017-02-10 10:16:40Z

1

Please go through the belwo code, hope that assists

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() 
 {
      //the array with jquery and jquery-ui-core are dependency for your file i.e my-custom.js 
    wp_enqueue_script('my-custom-js', get_stylesheet_directory_uri().'/my-custom.js', array('jquery', 'jquery-ui-core'));  
}

And place your custom code to my-custom.js :

jQuery(document).ready(function($){
                Paytabs("#express_checkout").expresscheckout({
});

answered Feb 10, 2017 at 10:16

Tristup

3,6381 gold badge16 silver badges26 bronze badges

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

1 Comment

Sasa Jovic Over a year ago

Yes this load my-custom.js in the footer and not initialized my div

Marinus Klasen · Accepted Answer · 2017-02-10 00:57:13Z

0

The nice way would be to load a separate file.

add_action('wp_enqueue_scripts', 'so13452_enqueue_scripts');
function so13452_enqueue_scripts() {
    // The array('jquery', 'jquery-ui-core') will force jquery and jquery-ui-core from core to be included
    wp_enqueue_script('name', get_stylesheet_directory_uri().'/file.js', array('jquery', 'jquery-ui-core'));

    // Only include jquery core
    wp_enqueue_script('jquery');

    // Jquery ui core
    wp_enqueue_script('jquery-ui-core');

}

You can also add it inline:

add_action('wp_head', 'so13453_enqueue_scripts');
function so13453_enqueue_scripts() {
    ?>
        <script>
            //
        </script>
     <?php
}

answered Feb 10, 2017 at 0:57

Marinus Klasen

4383 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to include jquery, jquery-ui in wordpress

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related