Title: Enqueue javascript and jQuery Last modified: August 22, 2016 --- # Enqueue javascript and jQuery * [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/) * I am trying to use this [ buttons UI](http://unicorn-ui.com/buttons/) in my template. However, it requires its own .js and jQuery library. I think I successfully managed to enqueue the .js in the functions.php using * ``` wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/jquery-2.1.3.min.js', array( 'jquery' ),'', false); wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/buttons.js', array( 'jquery' ),'', false); ``` * However, I still can’t get these dropdown buttons to work. What am I doing wrong? Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/page/2/?output_format=md) [→](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/page/2/?output_format=md) * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661597) * Hi prophecym. Do they work if you drop the css and code into a default WP theme like Twenty Fifteen? * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661604) * Hi bdbrown. I’ve just tried your suggestion. And they don’t work in Twenty Fifteen as well. I can’t think of a plugin that would conflict with a custom javascript code for these buttons. I am pretty much lost. * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661606) * See below for the whole code in the functions.php file as a reference: * ``` /* Enqueue javascript /* ------------------------------------ */ if ( ! function_exists( 'alx_scripts' ) ) { function alx_scripts() { wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ),'', false ); wp_enqueue_script( 'jplayer', get_template_directory_uri() . '/js/jquery.jplayer.min.js', array( 'jquery' ),'', true ); wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ),'', true ); wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/jquery-2.1.3.min.js', array( 'jquery' ),'', false); wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/buttons.js', array( 'jquery' ),'', false); if ( is_singular() ) { wp_enqueue_script( 'sharrre', get_template_directory_uri() . '/js/jquery.sharrre.min.js', array( 'jquery' ),'', true ); } if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } } add_action( 'wp_enqueue_scripts', 'alx_scripts' ); ``` * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661607) * From my testing, it seems WordPress won’t allow you to register multiple scripts with the same handle (the first argument to `wp_enqueue_script()`). WordPress uses the first script with that handle and ignores the rest. * So try using a unique handle for each of your three added scripts. You’ll probably also need to change the dependencies (the third argument to `wp_enqueue_script()`: WordPress uses the handle to assign dependencies, so if a script depends on another, you pass the second script’s handle to the array). * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661608) * It’s a trick…;-) The buttons.js code isn’t included with the download from the website. You need to get it on [GitHub](https://github.com/alexwolfe/Buttons/blob/master/js/buttons.js). I also used this to load up jquery: * ``` ``` * I just installed it and it works as expected. * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661609) * I definitely didn’t understand how to actually proceed with stephencottontail’s suggestion. And, according to bdbrown, it works. However, I still can’t get it to work. * For the CSS code, I was using the “Custom CSS” plugin. Just to test it, I tried to enqueue the stylesheet using: * ``` /* Enqueue css /* ------------------------------------ */ if ( ! function_exists( 'alx_styles' ) ) { function alx_styles() { wp_enqueue_style( 'style', get_stylesheet_uri() ); if ( ot_get_option('responsive') != 'off' ) { wp_enqueue_style( 'responsive', get_template_directory_uri().'/responsive.css' ); } if ( ot_get_option('custom') == 'on' ) { wp_enqueue_style( 'custom', get_template_directory_uri().'/custom.css' ); } wp_enqueue_style( 'buttons', get_template_directory_uri().'/buttons/buttons.css' ); wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' ); } } add_action( 'wp_enqueue_scripts', 'alx_styles' ); ``` * And all the styling is gone with this method. My best guess is that I am doing something wrong with the way I register the files into the functions.php. * bdbrown, would you tell me what exactly did you do? I have all the files in the“ so-called registered folders.” * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661610) * Try this code, then: * ``` /* Enqueue javascript /* ------------------------------------ */ if ( ! function_exists( 'alx_scripts' ) ) { function alx_scripts() { wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ),'', false ); wp_enqueue_script( 'jplayer', get_template_directory_uri() . '/js/jquery.jplayer.min.js', array( 'jquery' ),'', true ); wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ),'', true ); wp_enqueue_script( 'buttons-js', get_template_directory_uri() . '/js/buttons.js', array( 'jquery' ),'', false); if ( is_singular() ) { wp_enqueue_script( 'sharrre', get_template_directory_uri() . '/js/jquery.sharrre.min.js', array( 'jquery' ),'', true ); } if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } } add_action( 'wp_enqueue_scripts', 'alx_scripts' ); ``` * Also, are you using a child theme? Can you post a link to your site? * [bdbrown](https://wordpress.org/support/users/bdbrown/) * (@bdbrown) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661612) * All I did to test it was create buttons.css (from the website download) and buttons. js (from GitHub) in my root directory. Then I dropped these two links into header. php at the end of the section. I say “at the end” because, it appears that if they’re loaded before the wp_head() function is executed, they get overwritten or disabled: * ``` ``` * Turns out you don’t need to load the googleapis jquery since jquery is already loaded by the theme. * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661613) * [@stephencottontail](https://wordpress.org/support/users/stephencottontail/) * I tried your code, and it is still not working. I am not using a child theme. And unfortunately I am working locally. It is not live. So there is no link to the site yet. * [@bdbrown](https://wordpress.org/support/users/bdbrown/) * I also tried your method. And I was very hopeful that it would work this time. But still nothing. I am sure I am doing something really stupid. I copied the buttons.css and buttons.js under the “hueman” folder. And right after wp_head() function, I included your code as it is. And still nothing. To test it again, when I removed the CSS code from the “Custom CSS” plugin, all the styling were gone again. * I am about to go crazy with this. All of your suggestions should work logically. Do you guys think some plugin is conflicting with this? * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661614) * I can’t imagine me working on a local server would have any effect on registering some css and js files. * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661615) * I noticed you said you “copied the buttons.css and buttons.js” under the “hueman” folder. Did you put those files in their own folder or are they in the main theme’s folder? Does this code work for you: * ``` /* Enqueue javascript /* ------------------------------------ */ if ( ! function_exists( 'alx_scripts' ) ) { function alx_scripts() { wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ),'', false ); wp_enqueue_script( 'jplayer', get_template_directory_uri() . '/js/jquery.jplayer.min.js', array( 'jquery' ),'', true ); wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ),'', true ); wp_enqueue_script( 'buttons-js', get_template_directory_uri() . '/buttons.js', array( 'jquery' ),'', false); if ( is_singular() ) { wp_enqueue_script( 'sharrre', get_template_directory_uri() . '/js/jquery.sharrre.min.js', array( 'jquery' ),'', true ); } if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } } add_action( 'wp_enqueue_scripts', 'alx_scripts' ); ``` * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661616) * Actually both. They are in both places for both methods you guys suggested. So I have the buttons.js under the js folder, and also under the hueman folder. * I just tried the code above, and that didn’t work either. Very strange. I don’t think I can sleep tonight. * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661618) * Aside from registering the js file, how come registering the css file doesn’t work as well? * Right now, I am only able to use the stylesheet by adding it into the “Custom CSS” plugin. If I try to register it in the functions.php, it doesn’t work. But for example, this works just fine. * `wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font- awesome.min.css' );` * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661619) * From my testing, “buttons” is one of WordPress’ reserved handles. Does it work if you use this code: * `wp_enqueue_style( 'unicorn-buttons', get_template_directory_uri().'/buttons/ buttons.css' );` * Thread Starter [prophecym](https://wordpress.org/support/users/prophecym/) * (@prophecym) * [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/#post-5661620) * Yes. That worked. The CSS part is done. Maybe I should try a different handle name for the js? Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/page/2/?output_format=md) [→](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/page/2/?output_format=md) The topic ‘Enqueue javascript and jQuery’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/hueman/3.7.27/screenshot.png) * Hueman * [Support Threads](https://wordpress.org/support/theme/hueman/) * [Active Topics](https://wordpress.org/support/theme/hueman/active/) * [Unresolved Topics](https://wordpress.org/support/theme/hueman/unresolved/) * [Reviews](https://wordpress.org/support/theme/hueman/reviews/) ## Tags * [buttons](https://wordpress.org/support/topic-tag/buttons/) * [dropdown](https://wordpress.org/support/topic-tag/dropdown/) * [javascript](https://wordpress.org/support/topic-tag/javascript/) * [jquery](https://wordpress.org/support/topic-tag/jquery/) * 16 replies * 3 participants * Last reply from: [prophecym](https://wordpress.org/support/users/prophecym/) * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/enqueue-javascript-and-jquery/page/2/#post-5661621) * Status: not resolved