WordPress + Supersized, the right way.

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

jQuery(function($){

With:

jQuery(document).ready(function($) {

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!


16 Responses to WordPress + Supersized, the right way.

delastuff

Great tips, thanks.

Could you post a header.php file with the code snips inserted, please?
I cannot quite get it to work.

I’m using the Thematic Framework btw.


Matt

Your mileage will considerably vary, and I advise against simply plopping this code into your header.php page unaltered, but try to look for the key items you need to have loading and available on your page. These include:

* The enqueued script and style files.
* The jQuery call to supersized.

Also, confirm your theme has the ever important < ?php wp_head(); ?> call AND that the wp_head() call comes AFTER your enqueue calls.

<html>
<head>
 
< ?php wp_enqueue_style( 'supersized_style', get_bloginfo('template_url').'/supersized/css/supersized.css');
wp_enqueue_script( 'supersized_js', get_bloginfo('template_url').'/supersized/js/supersized.3.1.3.min.js', array('jquery'));
wp_head();
?>
<script type="text/javascript">  
    jQuery(document).ready(function($) {
                $.supersized({
                    //Specific Supersized calls - consult Supersized documentation.             
                }); 
            });    
</script>
</head>
<body>
</body></html>

Jamie

Um perhaps a better option would be to to follow the guidelines on the function reference and add this code to your theme’s functions.php file rather than edit your theme header – you can use the wp_print_styles action and init action to add your new style and custom scripts from your functions file:

function custom_init() 
{
    wp_enqueue_script('supersized_js', get_bloginfo('stylesheet_directory'). '/supersized/js/supersized.3.1.3.min.js', array('jquery'));
}
add_action('init', 'custom_init');
 
 
function custom_styles() 
{
    wp_enqueue_style('supersized_style', get_bloginfo('stylesheet_directory') .'/supersized/css/supersized.css');
}
add_action('wp_print_styles', 'custom_styles');

Dimitri Vorontzov

Excellent post Matt.

Perhaps you could help me with a bit of advice. Something is not quite working for me with Supersized / WordPress combination.

I can load images perfectly fine when they are loaded from external URL:

 
jQuery(document).ready(function($) {
 
                $.supersized({
                    //Background image
                    slides  :  [ { image : 'http://www.mysite.com/mydirectory/myimage.jpg' } ]                  
                });
            });

However, when I try to load locally, nothing happens:

        
jQuery(document).ready(function($) {
 
                $.supersized({
                    //Background image
                    slides  :  [ { image : '/supersized/backgrounds/myimage.jpg' } ]                    
                });
            });

What am I missing here?

Would be grateful for your advice.

Best regards,

Dimitri Vorontzov


Matt

I think you answered your own question in that regard. If the images are loading incorrectly locally but correctly with a fully qualified domain, something must be wrong with your image path. Is the supersized domain sitting at the root of your web directory? I’ll suspect that it isn’t, so

'/supersized/backgrounds/myimage.jpg'

won’t work for you.

Try adding the full path of where these slides are at, and if using WordPress and this directory is within your theme folder use this:

'< ?php bloginfo('template_url');?>/supersized/backgrounds/myimage.jpg'

Which will give you a proper domain path.


Eric

Wow, this is good to know. I had never even heard of wp_enqueue before. many non-experts like myself are still struggling trying to get Supersized 3 (3.2 out now!) to integrate with WordPress. If you ever have a moment, your own tutorial would be great to learn from too. What I really want to know is how to make it work *without* a hard-coded image array. I.e. pulling images from any post.


Matt

Pulling images from *any* post would prove slightly difficult, as you would want to be assured that the images were of the right size and quality to make a fitting background image.


luis

I understand the “because” and I believe that it is the solution, but HOW … I can’t make it work in my case… i need to add to functions.php? or tell me please what is the correct syntax in my case of using the “Twenty Ten” theme ..please a small example knowing that I have the supersized inside the theme folder?


Benoit De Boeck

It had been a few months that I wanted to leave a message here about my tutorial on the integration of Supersized in WP. Matt was right about my tutorial not integrating the js (and css) files the proper way. Having seen the post from Matt, I have since improved my WP coding (not difficult when starting from scratch !). I still should update the tutorial though. For those of you interested in integrating Supersized in WordPress, I have released a plugin (using “the proper way” to enqueue the files :-) ), WP Supersized that integrates Supersized in WordPress, with plenty of options to choose from.


Benoit De Boeck

Oops ! I was referring to the post from Matt of course (not Marc…) !


Justin

I have plugged in supersized to my website but when it works it squishes the image down to nothing when moving the window. I want it to decrease or increase in size depending on the window size. Can anyone help me resolve this issue?


roshan

Matt, i have manage to run supersize on my wordpress, i have 1 problem, is there any way wordpress can upload images to slide path of the supersize, i need to give a user to upload images via wordpress to supersize.


Matt

There is no out of the box solution for this. You would need to develop or find a plugin that could handle public image uploads and tailor Supersized to view and manipulate them.


Dani Weymouth

Hi all. I see the latest version of Supersized includes the wp_enqueue_script() function. Supersized works IE 8 but not in 9 (regular or compatibility mode). It does work fine though in Chrome and Mozilla. I am wondering if others are having this same problem?

My site is http://www.seaninconcert.com.

As a side note, I’ve tried using a validator (http://validator.w3.org/check?uri=http%3A%2F%2Fseaninconcert.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=1&No200=1&st=1&user-agent=W3C_Validator%2F1.3#line-52) and got the following errors:

[quote] HTML5 Validator Error ✉
Line 11, column 64: Bad value X-UA-Compatible for attribute http-equiv on element meta.

Line 57, column 49: Attribute name not allowed on element meta at this point.

Line 57, column 49: Element meta is missing required attribute itemprop.

Line 59, column 38: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
#rpliscrollticker {display:none;}
Line 71, column 45: Attribute http-equiv not allowed on element meta at this point.

Line 71, column 45: Element meta is missing required attribute itemprop.

Line 72, column 30: The language attribute on the script element is obsolete. You can safely omit it.

Line 104, column 56: The language attribute on the script element is obsolete. Use the type attribute instead.

Line 109, column 30: The language attribute on the script element is obsolete. You can safely omit it.

Line 114, column 23: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

Line 785, column 50: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

Line 789, column 7: Stray end tag head.

Line 791, column 143: An body start tag seen but an element of the same type was already open.
…-mainstage-page-php custom-background ai1ec-calendar ai1ec-action-posterboard”>
Line 791, column 143: Cannot recover after last error. Any further errors will be ignored.
…-mainstage-page-php custom-background ai1ec-calendar ai1ec-action-posterboard”>
[/quote]

Unfortunately, I can’t figure out how to fix these errors and am unsure as to whether any of them are related or conflicting with Supersized. Does anyone have any suggestions as to where I can go to figure out these errors and/or what to try next?

Any help would be very appreciated as IE is the only thing left holding us up from going live!!!

Thanks!


Matt

Is it not working at all?


Dani Weymouth

Hi. In IE9, standards mode, it won’t load at all. The circle just keeps spinning. And it appears to be preventing a tickler from loading as well. I added one line of code in the head and it now seems to be working in 8.

http://seaninconcert.com/?doing_wp_cron=1357443802.0982069969177246093750