New WordPress Theme with SmoothGallery header images

Apr 24th, 2007 by Tim 46

upsilonLots of sites have header images that rotate and link to content on or off site, like at the City Church. That site uses flash, but I came across an excellent AJAX slideshow script called SmoothGallery by Jonathan Schemoul. I couldn’t find anybody who had integrated it into WordPress, so here is a new theme that integrates this script into the header (Actually its my EPSILON theme plus SmoothGallery). I have put this to use on the new upgrade to our SHINE web site here in St Helens. Take a look, to get a feel for what this can do.



How to configure the rotating images and links

To change the rotating images and their links, you need to modify the code in the extra.php file in the theme’s folder. Each image has an image, title, description and link url. It should be pretty straight forward if you have a look at the code. Any questions about SmoothGallery, just visit the script’s site first, before sending me your emails.

And a big pat on the back to Jonathan Schemoul who built SmoothGallery. Simply brilliant.

The next step might be to create a plugin for others to use this in their own themes.

03 May 07 - Oh, and you can download the theme here.

46 Comments on the Comment Wall

  1. 1 David said:

    Wow, that is nice, really nice. It looks fantastic and is brilliant for those wanting to avoid flash and be more accessible. Thanks.

  2. 2 High visual impact church wordpress theme « Church website and blog ideas said:

    [...] Hyde has modified one of his wordpress themes and incorporated JonDesign’s SmoothGallery. It looks fantastic and mimics the flash clickable [...]

  3. 3 viu said:

    Wery nice! Is it possible simply update epsilon theme? I have made some changes, that I do not want to redo…

  4. 4 LivingOS UPSILON 1 WordPress theme said:

    [...] :: demo :: homepage or WP Theme [...]

  5. 5 Tim said:

    Viu,
    There are 3 files that are changed from EPSILON. The header.php contains all the code to embedd and run the SmoothGallery script. Then the extra.php contains the XHTML code for the images and links etc. The bit in extra.php is the bit that everybody needs to edit anyway.
    The last change is to the CSS file, right at the bottom is the css that styles the gallery to suit this theme.

  6. 6 Andrew Eglinton said:

    Dear Tim, I like this theme for its originality and I’d like to use it on a site of mine,problem is the smoothgallery element just won’t work for me. Is this a case of it not working straight out of the box? Is there something I need to configure to get it working? Any hints on how to get it working would be most appreciated.

    Thanks very much indeed.

  7. 7 Linda said:

    Thank you so much for designing this theme! I needed to update our church’s web site and was dreading re-designing the entire site. Switching to WordPress and using your theme had our church’s web site up and going in record time.

  8. 8 anneberit said:

    Thanks from me as well, love the smoothgallery element and I needed an update :D
    But I have a problem with the sidebar in IE(it gets pushed down) and I can’t figure out why (usually IE do this when there are large photos and such - but there aren’t this time). Any ideas or hints to fix it??

    In firefox it looks fine, though ;) But few of my readers use that browser.

    Thanks!!

  9. 9 anneberit said:

    Sorry, the email of the last comment missed a letter… this one is the right one :o

  10. 10 alex ion said:

    I’ve installed it on my site and I cannot get the feed to work.
    Do you think you can help ?

  11. 11 Tim said:

    Do you meen the gallery images. You seem to have removed the code in extra.php that defines all the images. Look at the myGallery div there is nothing there!

  12. 12 pcj said:

    Its an amazing theme.

    The side bar goes down in IE. What can be done about it? Firefox , its awesome.

  13. 13 Brad said:

    Any idea why smoothgallery stops running with a java error when I turn on the slightbox or lightbox plugins in conjunction with this theme? Otherwise, nice work! The gallery slideshow runs fine when I disable the lightbox plugin. There must be a conflict somewhere…

  14. 14 Tim said:

    pcj,
    sidebar issue maybe in an older version of IE. It seems fine in version 6 & 7. What version are you running.

  15. 15 Tim said:

    Brad,
    It may well be a conflict to do with using the same js libraries. Shame they are both great scripts.

  16. 16 Melanie West said:

    Hi Tim! This is the 2nd theme of yours that I am using for my website projects. I love your work. Thanks for sharing this with us.

    I have installed Upsilon without any problems. I am personalizing it a little bit but I couldn’t get the header pictures to change. Is there anything I need to do? Is there a plugin or something I need to download for it to work?

    Please help me… Thanks!
    Have a blessed Sunday!

    Melanie

  17. 17 Tim said:

    You need to edit the html code in extra.php. It should be fairly obvious inside the myGallery div tags.

  18. 18 Melanie West said:

    Hi Tim - I actually know how to change the header images, just for clarification, my problem was even out of the box after i downloaded and install the theme the rotating images didn’t work. But.. I find who the culprit was. It was the TWITTER TOOLS. Just thought I’d leave you a not in case somebody will have the same problem as I do. The theme is perfect but when images don’t rotate try deactivating all your plugins and activating them one by one until you find which one could have caused it. Thanks again! I will be playing with this for a while..

  19. 19 Tim said:

    Thanks for this Melanie.

  20. 20 Melanie West said:

    I have this wp-email plugin that after I click the send it button my sidebar that’s supposedly on the right go way to the left. Anybody here using this theme have same problem? Any help or suggestion is appreciated. Thanks!

  21. 21 Melanie West said:

    I didn’t solve the problem but by using the pop-up option in wp-email my sidebar remains to where it is.

  22. 22 alex ion said:

    I’ve solved my feed problem!

    I also did some customization to the theme. Works great now! Thanks

  23. 23 pcj said:

    Tim,

    Its sorted out. Many thanks.

  24. 24 Alex Ion said:

    It’s sorted out for me too.

    I’ve been using it for some time now! Nice!

  25. 25 afganaf said:

    Hi Tim,

    How can i use that script in sidebar, not header? What do i have to change? From Turkey, with love. :)

  26. 26 Tim said:

    Just take the gallery div tag out of extra.php and copy into sidebar. Then play around with width and heights in the css to make it fit.

  27. 27 afganaf said:

    I tried to adapt SmoothGallery for default WP theme. And i did it. But i have a small problem. “Meta” comes just next to it.

    default theme’s sidebar codes after adding SmoothGallery:

    http://pastebin.ca/666283

    What do i have to do? I guess i need some codes to fix it.

  28. 28 Erik said:

    I’m developing a church website based on Upsilon and I had a question about the page menu navigation. Is there an easy way to include the subpage links on each subpage so the user doesn’t have to his “back” on the their browser to visit other sub links in the page category? I’m thinking it’s something to do with the page.php file, but I’m new to CSS and PHP. Any help would be great. Thanks!

  29. 29 Amit said:

    Hi!

    Great theme. insatalls in a jiffy! thank you.

    Please help resolve RSS feed widget. When I add Google news feed: http://news.google.ca/news?hl=en&ned=ca&q=toronto+real+estate&ie=UTF-8

    It shows an error. Am I doing the right thing?

    Please help.

  30. 30 Scott said:

    Installed your theme as our website and am really enjoying using it. I am having problems getting the pictures in the smooth gallery to display. I believe I have the code set up correctly. It shows the captions, links, .. but not the pictures. Any suggestions?

  31. 31 Scott said:

    Tim-

    I figured it out. The permissions were wrong on the pictures.

  32. 32 Tim said:

    Answered before I got time to respond. If in doubt always check them - gets me every time.

  33. 33 Jonathan said:

    Tim -

    Again I love your themes. I’ve used epsilon, psi and alpha on different projects and I’m now using upsilon for my family page, but I’m having some trouble with the smoothgallery header. I’ve managed to replace the images for the smooth header after a little trouble shooting, but I still have the initial header from epsilon popping up before the page loads my images. I’ve looked in the header.php and extra.php to see if I missed something, but I’m not finding what I should replace to fix the header to initially load my first image.

    Also do you recommend a resource to help me learn some of the basic concepts of php? It’s about time I learned.

    Jonathan

  34. 34 Tim said:

    The default image is probably coming from the CSS style sheet. Books on php here.

  35. 35 John said:

    Love the theme! I use it on my neighborhood site (jeffersonpark.org). A few people have mentioned that the smoothgallery doesn’t work correctly. I had this same issue. Mine stopped working after installing an eCommerce plugin. When I disabled the plugin, it started working again. I had to edit the plugin to get both to play nicely together.

    So, basically… If smoothgallery rotation doesn’t work, disable all of your plugins, then add one at a time. You will eventually find the misbehaving one and can then go from there to figure out how to fix it.

    Great theme though! Everyone loves the new site.

  36. 36 Tim said:

    Well, it is usually due to a conflicting Javscript library. SmoothGallery uses MooTools. Many other AJAX type applications using other libs like JQuery or Prototype and it is these that are conflicting with SmoothGallery.

    LightBox also doesn’t work with SG.

  37. 37 Jamie said:

    Great work on the theme. I am in the final stages of redesign using Upsilon, I will post the URL’s this week so others can get an idea how far the theme can be stretched.

    In the meantime check out WP lightbox JS, I found it to work well with Upsilon and didn’t cause the rotating gallery to stop.

    Get the plug-in here.

  38. 38 Erik said:

    I used your theme for a church website and I thought you’d like to see how it turned out:

    http://safeharboronline.org

    Thanks!

  39. 39 Tim said:

    You have done a really nice job of adapting the theme too. I’ve added your church to the wp-driven church directory.

  40. 40 Tom Albrecht said:

    When I try to download and open the Upsilon .zip file I get a corruption message.

  41. 41 Tim said:

    Try now.

  42. 42 Tom Albrecht said:

    That did it. Thanks!!

  43. 43 Will said:

    I noticed that there are several page templates –amzonstore and cosmos, etc.

    What are they for? How would one deploy them?

  44. 44 Tim said:

    Cosmos is for a keywords plugin that is no longer needed, as WP has its own tag system. Amazonstore can be used to embed you Amazon store. You’ll need to edit this page though to include your own store code.

  45. 45 Jen said:

    Thank you so much for such a beautiful theme!

    Unfortunately I cannot get the rotating pictures to work since I am also using the Slimbox Plugin as well. So sad. :(

    Has anyone been able to get Slimbox to work alongside SmoothGallery?

  46. 46 Tim said:

    No you can’t. They don’t work together. Try Lytebox a Mootools version which works with Smoothgallery.

Leave a Comment

More thinking about:

Living Open Source

Tim’s blog on anything from this week’s lectionary, to open source software like WordPress

Creative Commons License

Links

  • Church Marketing Lab (Flickr Group)
  • HelpTelly
  • Jamendo - (Creative Commons Music)
  • Lectionary Bible Studies
  • Lectionary Graphics (Flickr Group)
  • Liturgy - worship that works
  • LivingOS Blip.TV Channel
  • N T Wright Page
  • Re:Jesus
  • Rowan Williams
  • St Helens Baptist Church
  • TextWeek
  • Ultimate Guitar Tabs
  • Walter Brueggemann
  • WordPress
  • YouVersion