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.
This is our sample theme in action, you can view the theme with both sliders here!
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.
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!!
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.
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.
Wide Slider
If the excerpts option is not checked on the settings page then the main slider will show the full width images.
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.
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.
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