how to include custom jquery UI to my child theme

2 Views

i got this little problem …

i downloaded custom jquery UI bundle from jquery UI and i cant include it to child theme in wordpress
can u please educate me how to do this step by step because iam still not very good in coding

Read More

i try this but does not work.. 

<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/js/css/jquery-ui-1.10.4.custom.min.css"/>

<script src="<?php echo get_template_directory_uri(); ?>/js/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/js/jquery-1.10.2.js"></script>

<script>
$(function() {
  $( "#accordion" ).accordion({
    collapsible: true
  });
});
</script>

thank you in advance.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. you should use wp_enqueue_script() in your functions.php file

    function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/js/JQueryUI.js', );
    wp_enqueue_script( 'slider', get_template_directory_uri() . '/js/slider.js' );
    wp_enqueue_script( 'gallery', get_template_directory_uri() . '/js/gallery.js' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

    You should also note that WordPress enqueues jQuery in noConflict mode, so you’ll need noConflict wrappers to be able to use $:

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

 jQuery(function() {
  jQuery( "#accordion" ).accordion({
    collapsible: true
  });
});
    });

    Then you just call wp_head() and WordPress will automatically add those javascripts to your page.

  2. All JavaScript files should be added via wp_enqueue_script() and all CSS files via wp_enqueue_style().

    The codes should be added to your child themes functions.php file.

    Here is an example from the WordPress Codex:

    /**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );