WordPress.org

Ready to get started?Download WordPress

Forums

How do I use a jQuery plugin in my theme? (9 posts)

  1. MTPrower
    Member
    Posted 1 year ago #

    I am building a theme from scratch using the Whiteboard Framework. I have decided to create custom scrollbars within the theme using the "Vertical Scrollbar Plugin" shown here:

    http://www.simonbattersby.com/blog/vertical-scrollbar-plugin-using-jquery-ui-slider/

    I've been using WordPress for years and have not once, through all my days of reading and tinkering, been able to install a jQuery plugin onto any of my themes. I've read all sorts of beginners' tutorials and "do's and don'ts", enough to be a guru if I knew anything about jQuery. But apparently I need things broken down to the bare basics.

    What exactly do I put in my header.php and functions.php, and after I do, where do I put the PHP that tells the script which elements to add a scrollbar to? I have my files in the correct places (or maybe I'm still wrong).

    Please reference and use the material from the plugin's home page that I linked to. I've already spent too much time copy-paste replacing code from other peoples' tutorials with code from the plugin page, to no avail.

    Also, I do not have a site online. I am building my site offline with XAMPP, so I have no site to link to. But it's basically the Whiteboard Framework, barely modified.

  2. Digest WP
    Member
    Posted 1 year ago #

    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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://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:

    http://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.

  3. MTPrower
    Member
    Posted 1 year ago #

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

  4. Digest WP
    Member
    Posted 1 year ago #

    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', 'http://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.

  5. MTPrower
    Member
    Posted 1 year ago #

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

  6. Digest WP
    Member
    Posted 1 year ago #

    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.

  7. batters22
    Member
    Posted 1 year ago #

    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', 'http://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.

  8. luis_dvalle
    Member
    Posted 1 year ago #

    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.

  9. Teke
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic