Enqueue javascript and jQuery

Hi prophecym. Do they work if you drop the css and code into a default WP theme like Twenty Fifteen?

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.

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' );

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).

It’s a trick…;-) The buttons.js code isn’t included with the download from the website. You need to get it on GitHub. I also used this to load up jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

I just installed it and it works as expected.

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.”

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?

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 <head> 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:

<!-- Buttons core css -->
<link rel="stylesheet" href="buttons.css">
<!-- Only needed if you want support for dropdown menus -->
<script type="text/javascript" src="buttons.js"></script>

Turns out you don’t need to load the googleapis jquery since jquery is already loaded by the theme.

@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

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?

I can’t imagine me working on a local server would have any effect on registering some css and js files.

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' );

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.

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' );

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' );

Yes. That worked. The CSS part is done. Maybe I should try a different handle name for the js?