Display OptionTree created Slider using the Flexslider image slider from WooThemes
I was looking for an easy way to integrate the OptionTree plugin’s slider with FlexSlider by WooThemes and I couldn’t find any. So I thought this would be useful to others as well.
Full Code:
<?php
$slides = get_option_tree( 'SLIDE_ID_HERE', $option_tree, false, true, -1 );
if ( ! empty( $slides ) ) { ?>
<div class="flexslider slider" id="slider">
<ul class="slides">
<?php
foreach( $slides as $slide ) {
$id = custom_get_attachment_id( $slide['image'] );
$custom = wp_get_attachment_image_src( $id, 'slider' );
echo '<li><a href="'.$slide['link'].'"><img src="'.$custom[0].'" alt="'.$slide['title'].'" /></a><p class="flex-caption">'.$slide['title'].'</p></li>';
}
?>
</ul>
</div><!-- END .flexslider.slider #slider -->
<?php } ?>
The above code will take each of the slides you’ve added into the OptionTree plugin and spit them out in the code used by Flexslider to display your slider.
Looking at the code, in the line of php code below, you’ll be changing the “SLIDE_ID_HERE” text to the id you gave your slider in the OptionTree plugin setup.
$slides = get_option_tree( 'SLIDE_ID_HERE', $option_tree, false, true, -1 );
And then a bit further down the code you will see this line of code which is where you’ll call your uploaded image for each slide – I like to create a new image size in the functions.php file so when I upload the photos into the slider, they’re cropped to the “slider” size.
You can change the ‘slider’ id to whatever image size you’d like (ie: thumbnail, medium, large, full).
$custom = wp_get_attachment_image_src( $id, 'slider' );
If you want to create your own slider image size to be cropped in the WordPress admin, you can do so by adding the following code to your functions.php file.
// This theme uses post thumbnails if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' ); add_image_size( 'slider', 1240, 420, true ); // $id, width, height, crop
Once that’s done, you’re all set and your FlexSlider powered slider will now show the slides you added in the OptionTree plugin.
Enjoy!