I would recommend getting a single script to enqueue correctly and, from there, enqueuing one script at a time in order to isolate the JavaScript conflict.

All the best,
Matty.

Regarding your query, I have a few ideas:

1. Your code to create the slider itself needs to be in a JavaScript file, that would also need to be enqueued. I’d recommend creating a generic functions.js file, stored in your “scripts” folder, containing the code to setup the Coda slider. You would then need to add another enqueue below the line entitled “coda-slider”, to enqueue your setup script for the slider.

2. Do you have “TEMPLATE_URL” defined? If not, add this to your functions.php file (preferably at the top):

define( 'TEMPLATE_URL', trailingslashit( get_stylesheet_directory_uri() ) );

This sets TEMPLATE_URL equal to your theme’s folder and enables the correct direct link to each JavaScript file.

3. Change the action from running on init() to wp_head(). I have found this to work better and have amended the blog post to reflect this.

I hope this helps, Wagner. Please let me know if you require any further assistance with this.

Cheers,
Matt.

$(“selector”)

Use

jQuery(“selector”)

Or you could also say jQuery().ready(function($) {}; if you want to keep using your $ signs…

Cheers

Wonder if you could help… I’ve tried your technique with the Coda-Slider. I’ve implemented it in my template file using this:

<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js”>
<script type="text/javascript" src="/scripts/jquery.easing.1.3.js”>
<script type="text/javascript" src="/scripts/jquery.coda-slider-2.0.js”>

$().ready(function() {
$(‘#coda-slider-1′).codaSlider();
$(‘#coda-slider-2′).codaSlider({
dynamicArrows: false,
dynamicTabs: false,
autoSlide: true,
autoSlideInterval: 4000,
autoSlideStopWhenClicked: true
});
$(‘#coda-slider-3′).codaSlider();
$(‘#coda-slider-4′).codaSlider();
$(‘#coda-slider-5′).codaSlider({
dynamicArrows: false,
dynamicTabs: false
});
$(‘#coda-slider-6′).codaSlider({
crossLinking: false,
firstPanelToLoad: 3
});
$(‘#coda-slider-7′).codaSlider({
autoHeightEaseDuration: 300,
autoHeightEaseFunction: “easeInOutExpo”,
slideEaseDuration: 300,
slideEaseFunction: “easeInOutExpo”
});
$(‘#coda-slider-8′).codaSlider({
autoHeightEaseDuration: 2500,
autoHeightEaseFunction: “easeInOutElastic”,
slideEaseDuration: 2500,
slideEaseFunction: “easeInOutElastic”
});
$(‘#coda-slider-9′).codaSlider({
dynamicArrows: false
});
});

And works fine. However, that’s not the proper way to do it, so using your tutorial I wrote this code:

function wm_enqueue_theme_js () {
wp_enqueue_script(‘easing’, TEMPLATE_URL . ‘scripts/jquery.easing.1.3.js’, array(‘jquery’), ’1.0′, false);
wp_enqueue_script(‘coda-slider’, TEMPLATE_URL . ‘scripts/jquery.coda-slider-2.0.js’, array(‘jquery’, ‘easing’), ’1.0′, false);
} // End wm_enqueue_theme_js()

add_action(‘init’, ‘wm_enqueue_theme_js’);

And added into my functions file. But it doesn’t work! Any ideas of why? Thanks!

Yeah, I do wrap my code snippets in CODE tags. I’ll be highlighting them more in my redesign (coming soon) as well as looking into adding a syntax highlighter to make longer snippets easier to read.

Thanks again for your comment.

but I think you should wrap your code into PRE or CODE tags?

I’m currently in the process of redesigning and recoding this blog. I will be adding features to enhance the code visibility and will look into adding a syntax highlighter. Thanks for the note.

Cheers,
Matty.