Jquery integration with my theme

I think the main problem is that you need to use a no-conflict wrapper when calling tab slideout. However, rather then simply point out the problem i’m going to cover some things you should be doing to make this script work “The WordPress Way” ..(ie. using an enqueue and hooking onto an appropriate hook to make that enqueue).

First, we need an appropriate action and there’s a couple we can use front-side.

The hook i’ll use is wp_print_scripts, because as you might have guessed it’s for enqueuing scripts.

add_action( 'wp_print_scripts', 'enqueue_slideout' );

function enqueue_slideout() {
    wp_enqueue_script( 'jquery-slideout', 'http://tab-slide-out.googlecode.com/svn/trunk/jquery.tabSlideOut.v2.0.js', array('jquery'), '2.0', false );
}

I went and dug up the location of the most recent version, 1.3 is a good year older than the most recent 2.0, so i’ve updated the path to point at a more recent version.

jQuery is loaded as a dependancy inside the enqueue, so you don’t need to be doing any extra includes for jQuery, the enqueue will take care of that for you(regardless of whether your jQuery script has been re-registered to pull from Google – as many WP users choose to do).

Next, we’ll hook onto wp_head and output the script to setup the slideout tab using a no-conflict wrapper that fires when the document is ready(most scripts will work fine like this, though not all)..

add_action( 'wp_head', 'setup_slideout_tabs' );

function setup_slideout_tabs() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     
            pathToTabImage: '<?php bloginfo('stylesheet_directory'); ?>/images/contact_tab.gif', 
            imageHeight: '122px',                     
            imageWidth: '40px',                       
            tabLocation: 'left',                      
            speed: 300,                               
            action: 'click',                          
            topPos: '200px',                          
            leftPos: '20px',                          
            fixedPosition: false                      
        });
    });
    </script>
    <?php
}

You should note i’ve added in a little PHP to point the image path at the current theme’s folder, so do ensure you have an image named contact_tab.gif in your theme’s image folder, ie. wp-content/themes/YOUR_THEME/images/contact_tab.gif or update the image path appropriately.

Add the CSS you posted before into your theme’s stylesheet, there’s really no need to output it inline, and the stylesheet is going to be getting loaded anyway, so it makes sense to just stick it in there.

In the end, you should have something that looks like this..

Hope that helps…