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.
At the start of the <body>, add the following lines:
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
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();
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
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 !