Create a slider for WordPress using Flexslider and OptionTree

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.

Level: Intermediate

Resources:

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

Section

Label: Slider

ID: slider

Setting

Label: Slides

ID: slides

Type: List Item

Description: Add as many slides as you need for the slider.

Settings (button): Using this button, you will be able to add subsettings. Add the following ones.

Setting

Label: Slide image

ID: slide_image

Type: Upload

Description: Adds an image for the slide.

Setting

Label: Slide link

ID: slide_link

Type: Text

Description: Put a link for the slide image.

Standard: #

Setting

Label: Slide caption

ID: slide_caption

Type: text

Description: Adds caption to the slide image.

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

Section

Label: Slider Options

ID: slider_options

Setting

Label: Animation

ID: animation

Type: Select

Description: Select the animation type.

Add choice (botón): Use this button to add the following options.

Choice

Label: Slide

Value: slide

Choice

Label: Fade

Value: fade

Setting

Label: Automatic animation

ID: automatic_animation

Type: Select

Description: Check it if you want to animate the slider automatically.

Add choice (botón): Using this botton, add the following choices.

Choice

Label: Yes

Value: slide

Choice

Label: No

Value: false

Setting

Label: Animation speed

ID: animation_speed

Type: Text

Description: Type the transitions speed (in milliseconds).

Standard: 7000

Setting

Label: Paged navigation

ID: paged_navigation

Type: Select

Description: Displays a bullets navigation menu below the slider.

Add choice (botón): Add the following choices.

Choice

Label: Activate

Value: true

Choice

Label: Deactivate

Value: false

Setting

Label: Arrows navigation

ID: arrows_navigtion

Type: Select

Description: Displays two arrows when over the mouse on the slider images.

Add choice (botón): Add the folowing choices.

Choice

Label: Activate

Value: true

Choice

Label: Deactivate

Value: false

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.