We will make an image slider for any WordPress theme using the jquery pluging Flexslider, created by WooThemes. Besides, we will enable the website administrator to fully administrate the slider options and add new slides from the wordpress admin panel using the OptionTree plugin.

You will need to be familiar with WordPress, php and html to better understand this tutorial. Remember that Google is your friend and you might clear any doubt faster than I can.

Step 1 – Select FlexSlider files

We will need to download Flexslider and extract the content from the downloaded zip file. Create a folder and name it “flexslider” in root of your theme, then put in there the following files from the content you just extracted:

• flexslider.css
• jquery.flexslider.js
• jquery.flexslider-min.js
• And the image folder that contains the file bg_direction_nav.png.
• Besides, create a php file using your prefered code editor and name it flexslider.php, we will use it later.

Stept 2 – Create OptionTree options

First you will need to install OptionTree plugin from the WordPress panel Plugins>Add new, or download it from wordpress.org and upload it using the wordpress panel o via FTP. After that, activate the plugin and click on Settings to create the following options. Remember that OptionTree makes differences between capital and lower cases when you name IDs. I suggest to always use lower case for all IDs.

Slides options

Notice: Whithin each subsetting you will see the add setting buton. If you press that button, you will see nothing happens. Scroll down the page a little bit and you will see another add setting button. The second button is the good one.

Options to control the behavior of the slider

After adding the options above, click on the save changes button and then go to Appearance>Theme Options>Slider Options. Set up the slider as you need it.and press Save changes.

Then, go to Appearance>Theme Options>Slider and add two new slides. Make sure to select the Full size radio button to get the full image link and to link is pointed to the image file, if not, hit the buttom File URL after uploading the file. I suggest uploading images at the size you will be using theme, so you will avoid some resizing issues. Remeber to add the http:// protocol to the links you add, otherwise, they won’t work.

Stept 3 – Integrate OptionTree php code and Flexslider

Open the file flexslider.php that was created in stept 1 and paste the following.

<?php
/**
 * Flexslider & Option Tree
 *
 * Custom slider with option using OptionTree.
 * Snippets created by Iru Dionisio.
 * Ask questions at http://inovanto.com/
 */
 ?>
<!-- Flexslider markup -->

<div class="flex-container">
	<div class="flexslider">
		<ul class="slides">      
		<?php if ( function_exists( 'ot_get_option' ) ) {

			/* get the slider array */
			$diapositivas = ot_get_option( 'slides', array() );
  
			if ( ! empty( $slides ) ) {
				foreach( $slides as $dslide ) {
					echo (
						'<li>
							<a href="' . $slide['slide_link'] . '" rel="bookmark">
								<img src="' . $slide['slide_image'] . '" alt="' . $slide['title'] . '" />
								<p class="flex-caption">' . $diapositiva['slide_caption'] . '</p>
							</a>
							
						</li>'
					);
				}
			}
		} ?>
		</ul><!-- .slides -->
	</div><!-- .flexslider -->
</div><!-- .flex-container -->

<?php if ( function_exists( 'ot_get_option' ) ) {
	$animation = ot_get_option( 'animation' );
	$automatic_animation = ot_get_option( 'automatic_animation' );
	$automatic_animation = ot_get_option( 'automatic_animation' );
	$paged_navigation = ot_get_option( 'paged_navigation' );
	$arrows_navigation = ot_get_option( 'arrows_navigation' );
} ?>

<!-- Flexslider Script -->
<script type="text/javascript" charset="utf-8">
	$(window).load(function() {
		$('#header-slider').flexslider({
			slideshow: <?php echo $automatic_animation ;?>,
			animation: "<?php echo $animation ;?>",
			controlNav: <?php echo $paged_navigation ;?>,
			directionNav: <?php echo $navegacion_por_botones ;?>,
			slideshowSpeed: <?php echo $arrows_navigation ;?>,
		});
	});
</script>

Stept 4 – Add js and style in the themplate

Add the following lines before the closing tag in header.php.

<!-- Add the following lines before the closing tag </head> in header.php -->
<?php $template_url = get_template_directory_uri(); ?>
<link rel="stylesheet" href="<?php echo $template_url; >/flexslider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php echo $template_url; ?>/flexslider/jquery.flexslider.js&quot></script>

Stept 5 – Call the slider

Once you finish previous steps, include the slider in any template using the following code.

<?php include (TEMPLATEPATH . '/flexslider/flexslider.php'); ?>

In case the slider is not showing, please verify the name of the vars. If everything is right, check in the source code of the generated page if the slider code is there. In case you see the slider in the source code, then wrap the slider include with a DIV and set a fixed witdh and height, besides add the display: inline-block CSS property to the div.

If you need any help, correct or suggest something, please leave a comment.