How do I use a jQuery plugin in my theme?

Hello,

Adding custom jQuery into WordPress is not always that simple. Sometimes the theme jQuery can conflict and sometimes you have to put the scripts in the footer instead of the header.

These 4 files will go in your header

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.mousewheel.min.3.0.6.js"></script>
<link rel="stylesheet" href="/css/jquery.sbscroller.css" />

Then for the scrollbar you need this, placed before the closing </body> tag – where #myelement is replaced by your element selector, obviously:

<script type="text/javascript">
$('#myelement').sbscroller();
</script>

Here is a good tutorial:

https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

Also you may want to load up the jQuery in the footer and test that.

This is obviously not correct. You didn’t even mention “jquery.sbscroller.js”. You also are calling in Google’s copy of jQuery when I don’t need it. Everything you’ve said is stuff that I already know, and at the same time, not enough information for me to work with.

Don’t I need “wp_enque_script” or whatever? And if I’m going to call in Google’s copy of jQuery, don’t I need to deregister WordPress’s? And don’t I need to register the Javascript files in functions.php?

You have only copied every other vague tutorial I have already seen on the net…

It is correct. Those files need to be in your site, link them internally and change out links.

To call jQuery with functions

<?php
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

This loads WordPress jQuery which is not enough to get your plugin working since you need the custom jQuery plugins

<?php wp_enqueue_script("jquery"); ?>

When you say I have only copied every other vague tutorial then maybe the problem is you need to slow down and read things since these tutorials are obviously there to help.

Sorry. You are still wrong– and I already told you why. The main javascript file here is “jquery.sbscroller.js”, which you have not mentioned at all. “jquery.mousewheel.min.3.0.6.js” is just an add-on for the main jQuery plugin.

I read and read and read and read and READ, and no matter what I tried, I could not get ANY kind of jQuery working before. Hopefully your latest post is the final information I need. We’ll see soon…

Hello,

Also if you are using Chrome use the Inpsect element feature then check the console and it will tell you the jQuery errors.

Maybe the problem is you are thinking I am just going to type and explain exactly what you need code and all.

What I am actually doing is showing you different methods and explaining why somethings would not work.

MTPrower, if you’re still looking for the answer to this, then add the following to your functions.php:

function sb_scroller_scripts() {
    wp_enqueue_script( 'jquery' );
	wp_register_script( 'jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js');
    wp_enqueue_script( 'jqueryui' );
	wp_register_script( 'sbscroller', get_template_directory_uri().'/js/jquery.sbscroller.js');
    wp_enqueue_script( 'sbscroller' );
	wp_register_style('sbscrollercss',get_template_directory_uri().'/jquery.sbscroller.css');
	wp_enqueue_style('sbscrollercss');
}    

add_action('wp_enqueue_scripts', 'sb_scroller_scripts');

This assumes you have jquery.sbscroller.js in your templates file and jquery.sbscroller.js in a subfolder called js. If you’ve already got jQuery loaded you don’t need the first line. This will load all the jQuery files and the css file in your header.

Then on the page you want the scroller to appear, add the following via the html tab:

<script type="text/javascript">
jQuery('#myelement').sbscroller();
</script>

Note that you have to use jQuery in full here since WordPress applies jQuery.noConflict() by default, which means the $ shortcut won’t work.

I’ll add this to the plugin page as well.

Hi guys, I just wanna say thank you because I had exactly the same problem as MTPrower (just with another plugin) and this post was of a lot of help for me. Specially the last post from batters22, well done man. I followed your instructions and my plugin was working after that.
Btw, MTPrower it seems that you get desperate too quick. A programmer has to keep his head cool and sooner or later you will get what you are looking for.

Thanks for the answer, Digest WP and Batters22…As a WP newbie, this is a huge step in my learning process. Appreciate it