A Morning in the Streets.
Creative Essentials.
Water on the rocks.
This is a caption for the slide. Try to keep it short.
Slide LeftSlide Right

Synapse Customization: Full Width Slideshow

A user recently posted in our support forum asking how to add a full width slideshow to Synapse.

I thought this would be quite a challenge and was a little worried that breaking out of the theme container, rendering some custom markup, calling up all the necessary CSS and JavaScript, etc. would be a huge undertaking.

Though it was quite a task, I simply hooked into the framework’s st_below_header() function and piggybacked off of the existing “Slides” custom post type.

This demo uses the jQuery Cycle and Aaron Vanderzwan’s MaxImage plugin.

To get the source, just see the follow-up reply in the forum post mentioned above.

Full Width Slider Customization

Installation

Important: In order to use this customization, you need to be using Synapse as child theme.
  • Add the code from functions.php to your child theme's functions.php.
  • Upload the fs-slideshow folder and its contents to your child theme folder root.
  • Use the sample images as a test or template for your own images.

Usage

Create a slideshow in the "Slides" custom post type in WP. This slideshow must be designated for full-width large images. Not all the settings and functionality are used as in standard slides.

Name the slides whatever you like for your own reference. You can use the "caption" field to add a caption. Keep it short. HTML markup is allowed if you want to use hyperlinks.

Once you've created all your slides, go to Appearance → Widgets and drag an instance of the "Full Width Slider" Widget to the "Full Width Teaser" Widget location and choose the settings you wish to use.

Notes

In the functions.php file, you'll notice a conditional of is_front_page(). This is so the script isn't loaded throughout your entire WP site. If you're not using this widget on your home page, change the conditional to one of your preference.

See WordPress Conditionals: http://codex.wordpress.org/Conditional_Tags