I’m building a site that needs the wonderful Supersized jQuery module for background effects. I’ve seen several sites out there promoting integration into wordpress themes, but all of them are lacking in proper WordPress conventions. To avoid headaches, include your scripts and styles correctly into your themes and you won’t anger developers down the road when conflicts start to arise. It’s very simple. Always use wp_enqueue_script() over directly inserting js calls. ALWAYS. Doing it the right way will negate all conflicts down the road.
Benoit De Boeck has a good tutorial on his site about integrating Supersized into WP, but a couple small missteps will likely snag the WordPress Novice. Here are a few things to keep in mind when reading his tutorial.
1. Download Supersized and add the contents into your theme directory as instructed.
2. Call the supersized stylesheet, but use wp_enqueue_style(); instead. Observe:
<?php wp_enqueue_style( 'supersized_style', get_bloginfo('template_url').'/supersized/css/supersized.css'); ?>
Edit the supersized stylesheet accordingly to update image paths.
Now, include the two .js files needed for Supersized to work: jquery and the Supersized .js file. USE wp_enqueue_script();
<?php wp_enqueue_script( 'supersized_js', get_bloginfo('template_url').'/supersized/js/supersized.3.1.3.min.js', array('jquery')); ?>
Note that we are only calling jquery indirectly- since we added ‘jquery’ to the dependency array argument wordpress will know to call jquery when appropriate.
In this way we have told WordPress that we need jquery, but left the heavy lifting up to WordPress itself. The enqueue function will only call jquery once, removing the possibility of conflicts. When we call the Supersized .js file, we add the second argument to let WordPress know that ‘jquery’ is a dependency, thus WordPress will also call the .js files in the proper order.
Lastly, his script is calling jQuery in a manner that may cause issues. WordPress natively runs jQuery in “No conflict mode” so you will need to replace his
Nearly every one of these items, if left uncorrected, may cause serious headaches to the unprepared. Do your blog some good, and use proper conventions when developing your themes. Cheers!