2010
12.31
UPDATE: I have now written a WordPress plugin taking care of the integration of Supersized 3.1.3 in WordPress, with many options available to choose how and where to display it. Have a look at WP Supersized!

THIS POST IS NOW OBSOLETE.
Supersized 3.1.1 is now available and a new version of my tutorial is available.

I really wanted to use Supersized as a slideshow for the background of my photography website based on WordPress. After a lot of experimenting, I finally managed to integrate it into a WordPress page. It seems that I am not the only one who has tried to make it work so I thought that my experience could be useful for others. Here is how I have done it. I am no specialist in coding so this can probably be done more efficiently but the essential is that it works ! You can have a look at the result on my About page.
Read below for the detailed procedure that I used.

I have not modified anything in the code itself so all the credits go to Sam Dunn at buildinternet.com for creating this superb full screen background !
My goal was to have only a slideshow with no navigation in the background but I guess that most of what follows remains the same if you want to use Supersized on a Post page or if you want to include the navigation part of Supersized.

This tutorial is based on the idea that you want to keep the standard page templates untouched. So I created a new set of css, page template and header for the page where I wanted to use Supersized.
Here is the procedure that I followed.

1. Download the Supersized 3.0.zip file from buildinternet.com. Copy the content of the Supersized folder into the theme folder that you will use (i.e. in: www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/)

2. In your theme folder, make a copy of the standard header, giving it a new name (e.g. header-supersized.php).
Go to the WordPress Appearance Editor and edit this new header-supersized file. At the end of the <head>, add the scripts for Supersized. You can not copy text from this page but this code comes right from the default.html file that you find in the Supersized folder. You can copy it from there.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/js/effects.core.js"></script>
<script src="http://www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/js/effects.slide.js"></script>
<script type="text/javascript" src="http://www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/supersized.3.0.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 0,
thumbnail_navigation: 0,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 0,
slide_captions: 0,
slide_interval: 8000,
slides : [
{image : 'http://www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/slides/image1.jpg', title : 'title of the slide', url : 'urlofyourchoice'},
{image : 'http://www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/slides/image2.jpg', title : 'title of the slide', url : 'urlofyourchoice'}
]
};
$('#supersized').supersized();
});
</script>

At the start of the <body>, add the following lines:


<div id="loading">&nbsp;</div>
<div id="content-wrapper">

This last line is important: the content-wrapper div starts here in the header page but is not closed in this header file. It will be closed later in the page template (see below).

All the options can be modified as you wish, just follow the usage described on the Supersized website. Do not forget to add your images in the slides folder. Above, I show an example with two images but add as many as you wish, making sure to leave out the comma after the last image.

3. In you theme folder, make a copy of the standard Page Template, giving it a new name (e.g. Supersized Page Template).
Go to the WordPress Appearance Editor and edit this new template. At the top of the template, instead of calling the standard header, replace

<?php get_header(); ?>
by

<?php get_header(supersized); ?>

This calls the new header containing the Supersized code that has been created above.

Add the following lines at the end of the page template:
CORRECTED: You need to create a copy of the footer.php file, rename it to footer-supersized.php. The following lines should then be added at the end of the footer-supersized.php file (instead of the end of the page template), just before wp_footer();

</div>
<div id="supersized"></div>

As you see, the content-wrapper div is closed here.
The very last line calls the Supersized background itself.

In this case, you will of course need to modify the call to the footer, at the end of the template: instead of calling the standard footer, replace

<?php get_footer(); ?>
by

<?php get_footer(supersized); ?>

4. Copy the full supersized.css content into the standard Stylesheet (style.css) or add a call to the supersized.css file in your new header-supersized.php.

5. If you use the WP-Minify plugin, make sure to exclude supersized.3.0.js from minify, otherwise Supersized does not work correctly.

Everything should now be ready ! So far, I tested it successfully with WordPress 3.0.3 in Chrome 8.0 and Firefox 3.6. I still have an issue with IE8: it behaves erratically and several attempts are sometimes needed to get to the page. Also, it takes ages to load the first image or it just hangs there loading and loading… The good news is that IE9beta works without problem !

Enjoy Supersized in WordPress !

I hope that this is clear. If you have questions, do not hesitate to ask me. And if you have improved on this, please tell me !

13 comments so far

Add Your Comment
  1. Interesting- appreciate the sharing of your research.

    I am trying to integrate Supersized into WP where the scrollable site lies on top of Supersized. Thus far, I cannot achieve the normal site scrolling (vertically) using Supersized. Have you had any success with a scrollable WP page and Supersized?

    Thanks.

    • I still have not tried it on a scrollable page. But Supersized 3.0 can do it in a simple html page (there is an example on the Supersized web page) so I guess it should work as well with WP.
      I will try it when I have time.

      Benoit

    • Bill,
      I have now tried a scrollable page.
      Have a look at my About page . It is a scrollable page with Supersized in the background. To achieve this, I only had to apply the steps described in my tutorial.
      Make sure that you do not have a background that is hiding Supersized.
      Benoit

  2. Hi Benoit

    Thanks for sharing. Do you know how to install this using existing headers in a template? I’m trying to avoid creating a new header as my theme uses several templates depending on the page. I’m basically trying to find out if I can install by just using a js function call in the header and css and code addition to the target template?

    Cheers

    • Zak,

      As I explained in my tutorial, I only created a duplicate of my template and header because I wanted to create a unique page with Supersized in the background without modifying the rest of my site. But you can of course use exactly the same procedure on your usual template and header. Something I did not mention in my post is that you should of course remove any existing background to your page !

      Benoit

  3. Thanks for the tutorial, I used it with Thematic Framework and works like charm. If someone are trying with this theme, follow the instruccions, just in the part to add this code:

     

    Use the hook ‘thematic_before’ in your file functions.php

    Iv.

  4. [...] De Boeck has a good tutorial on his site about integrating Supersized into WP, but a couple small missteps will likely snag the WordPress [...]

  5. I was able to fumble my way thru SMF forum theme index.template.php and successfully added supersize3.2.4 code . thanks

  6. Is it possible to view a specific background image for the projects in this theme?

    http://themetrust.com/themes/reveal

    The problem might be, that the pages doesn’t load new when clicking in the next project

    Plz help!

    • Peter,
      With the latest update, you can easily choose different images for each page or post by selecting them in the page/post editor (in the WP Supersized source of images box).

    • Peter,
      I forgot to mention that you must be careful to have a transparent background for your theme, otherwise the WP Supersized background images will not be visible. Have a look at the FAQ for more details.

  7. can you with this script make the site slide away so yo can only see the bagground and go thrug the gallery

    • expresscms,
      If what you ask is to be able to have full screen slideshow without anything else on screen (no menu or widgets), this is very easy by creating a new template in WP (removing all elements that you do not need). I am preparing a post describing how to build a full screen slideshow with WP Supersized. I hope to have it ready soon.

Notify me of followup comments via e-mail. You can also subscribe without commenting.