Woo Themes Flex Slider

The Flex Slider we have been working with has changed ownership to Woo Themes, this does not affect us using the Flex Slider in our own themes, we have created a child theme with two sliders as a proof of concept.

The child theme we have created and is downloadable from this page has two sliders, the header slider and a widget slider, a basic slider has it uses but we have enhanced the theme with a settings page, and a number of options.

First we have to say that this is a working but by no means a full solution, only a few options have been changed and tested, so you are free to download and use the code, however we cannot offer support!

The Theme

As always the theme is a child theme from the latest WordPress and twenty eleven theme, please make sure you are updated before activating the theme.

Twenty Eleven Woo Themes Flex Slider

This is our sample theme in action, you can view the theme with both sliders here!

flexslider-1

Featured Images

The slider uses the featured images uploaded via the admin area, if you have already uploaded featured images then use the Ajax Thumbnail Rebuild plugin, this will add the extra sizes the slider uses.

To upload new images navigate to the pages or posts and upload or assign the featured images, if you want full width then minimum of 1000px wide, our wide images are cropped to the height of 240px to allow for the sliders.

flexslider-4

Slider Excerpts

If you have custom excerpts like in the screenshot above these will be used if you select the except option from the slider setup, if not the theme will create an excerpt from the content, it will be trial and error getting the balance right.

If excerpts are selected them a smaller image is used 360px by 240px this is a crop of the featured image.

Main Slider Setup

We have created a nice setup page to control the slider and slider content, the content can be from pages, all posts or specific categories, change settings and experiment for the best options for your website.

If the first option is not set then no slider will show!!

flexslider-2

Widget Slider Setup

Like the Main Slider except the pages or post category is selected on the widget, you can have more than one widget on a page as each gets it’s content based on the widget parameters.

flexslider-3

Sidebar Widget Settings

Add the widget from the widget page to the sidebar, options are to use pages, latest posts or a specific categories latest posts, save and close.

flexslider-5

Wide Slider

If the excerpts option is not checked on the settings page then the main slider will show the full width images.

flexslider-6

That is all download and enjoy, but sorry we are not able to offer support, the theme is meant as a starting point for beginner and intermediate developers.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

3 thoughts on “Woo Themes Flex Slider

  1. Hi, first of all thanks for this interesting theme. I have a small problem and I don’t where’s the problem. I need to change the logo size, so I want to apply:

    #branding img {
    height: auto;
    margin-bottom: -7px;
    }

    I’ve put this code directly inside “custom-style.css” but it’s not working, it isn’t overriding the twentyeleven style.css although it seems to be kicking in looking at the page source… (If I change style.css directly it does work). Thanks for your help.

  2. thanks David,
    this post/child theme helped me to integrate the slider into a new theme; not being too familiar with jQuery, I checked the code (= ‘learning by disection’) and the Codex, until I was able to get the slider to work.
    cheers, Michael

  3. The file that I download from woo themes is not a plugin,or at least I cant upload it,neither upload and extract works from FTP server. I have found similar version but works like a plugin in this post http://www.fergusweb.net/software/flex-slider/ (this is not my site and sorry if advertising.) Can you provide zip file with the plugin you have used in screen shots if it works with 3.5 version. Thanks

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More