How I Used WordPress Superb Slideshow Plugin In Template

In one post here, I wrote about my fascination for the wordpress slideshow plugin: superb slideshow and how I used it in a post. This superb slideshow plugin can both be used in posts/pages and in the template itself. A wordpress website I am currently pre-designing for our prospective client needed a little animation effect, this time in the index page, specifically in the header area. I thought again of the superb slideshow plugin and I realized I have never tried using it on an index page before.

Going over Gopi’s instructions did not make things easier as he really did not give a step by step guide for us php-challenged folks. I found myself puzzling over how to use the plugin and which xml file he used and where the images were stored. Actually, I was impatient as usual and so I really did not explore all information sources before erroneously deciding that the superb slideshow is a difficult plugin to use in a template. To make the story short, I finally found out how to use the superb slideshow plugin in a template.

How I used the superb slideshow plugin in a template

  1. I created the images I used for my slideshow, making sure all the images are of the same dimensions.
  2. I went to the superb slideshow settings/configuration in the dashboard and found that the default xml file that contains the data for the slideshow is the ‘superb-slideshow-v2.xml’ file.
  3. Instead of creating a new xml file, I just editted the existing ‘superb-slideshow-v2.xml’ file and inputted my images’ data there.
  4. Back in the plugin’s settings page, I adjusted the width and height entries to the actual dimensions of my images.
  5. Finally, I went to my template and inserted the following line of code in the place where I want the slideshow to appear:

Voila! I got some sort of animation effect on my template. The animation effect looked like the one below:


Portion of header in the subject template…

Since the header of the site I was designing gave the effect of one ‘whole’ picture with an animated portion, I divided the picture into two. The left side is fixed and the other is a slideshow. It is here where I found that the plugin created a default top margin of 5px, which destroyed the ‘one whole picture’ effect I was trying to build. I tried messing with the css file of the plugin and, php-challenged as I am, was not able to come up with the right solution (or perhaps I just gave up a little too early). So, I just went the route of actually (physically) adjusting the picture itself (its size) instead of its coordinates.

A note on upgrading to newer versions

The wp superb slideshow plugin’s creator, Gopi, seems to be still keen on updating the plugin as he has created at least 2 updated versions of this plugin since I first used it. Thing is, he seemed to have never really cared about his users’ suggestion of fixing the problem where everytime you upgrade the plugin to the newest version, all files are overwritten and all images and xml files you have created and added are deleted. In the latest version, he still warns old users to backup their xml and image files before updating. This means he has still not addressed this issue. Thus, everytime you update the plugin:

  1. You must first access your server and do a backup of your previous slideshow xml/image files,
  2. Go to your wp plugin dashboard and click the superb slideshow ‘update’ link.
  3. When the update is done, go back to server and restore the xml/image files.

All in all, the plugin is cool, but it’s not necessarily your average user-friendly plugin. Hopefully the next versions would fix this shortcoming. And although presently one can create multiple slideshows in a post or page, we are still limited to only one on a template. Again, hopefully this issue will be given attention by Gopi. Man, I can’t help but be awed by these people. They must be geniuses – these plugin creators.



Comments are closed.