LTech
LTech

Reputation: 1761

adding jquery ui to wordpress site

I would like to use http://jqueryui.com/dialog/ on my wordpress site but I can't figure out how to add it. I created a file Chameleon/js/popup.js with the code:

 jQuery(document).ready(function($) {
    $( "#dialog" ).dialog();
  });

Then I added to functions.php

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'popup', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/popup.js', // this is the location of your script file
        array(' <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">') // this array lists the scripts upon which your script depends
);

and in my post template I added the code:

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

but it doesn't work.

Upvotes: 0

Views: 1222

Answers (1)

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

add path as like this

add_action( 'wp_enqueue_scripts', 'add_my_script' ); 
function add_my_script() {
wp_enqueue_style( 'themeslug-jquery-css', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'themeslug-stylesheet', get_template_directory_uri.'/resources/demos/style.css' );
wp_enqueue_script( 'themeslug-popup', get_template_directory_uri() . '/js/popup.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-main', '//code.jquery.com/jquery-1.10.2.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-ui', '//code.jquery.com/ui/1.11.2/jquery-ui.js', array('jquery'), '' );
}

Upvotes: 2

Related Questions