INSTALLING WOOTHEMES FLEXSLIDER INTO YOUR WORDPRESS THEME
http://return-true.com/2012/04/installing-woothemes-flexslider-into-your-wordpress-theme/


April 17, 2012


WooThemes FlexSlider is a feature slider just like any other, however this one has been designed to keep with the current trend & actually be responsive.

FlexSlider does have some ability to be customized, however if you are looking for large amounts of customization (including custom transitions) I prefer the super customizable jQuery Cycle (GIYF) which can also be responsive if your CSS is setup correctly.

One important note is that if you are installing this into a child theme you will want to add all of the code into your child’s functions.php file rather than the parent’s.

I need to make this very clear because if I don’t someone will probably get confused. I am not the developer of FlexSlider. If you have any questions about FlexSlider they are best pointed towards WooThemes. If you have any questions about integrating FlexSlider with WordPress I will try to help you as much as I can, but I will not help with general FlexSlider questions.


INSTALLING FLEXSLIDER

First go download FlexSlider from the WooThemes website. You only need flexslider.css and jquery.flexslider-min.js. Place them into a folder inside your theme. A folder called js, or javascript is normally good. If you already have one, even better.

Once you’ve done that you need to add some HTML. This is a difficult part to write for as the HTML might differ depending on where you are installing it. However for my demo I used:

<!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- -->

<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<?php
$flex = new WP_Query(array('category_name' => 'featured', 'posts_per_page' => 3));
if($flex->have_posts()) :
while($flex->have_posts()) : $flex->the_post();
?>
<li>
<?php the_post_thumbnail(); ?>
<p class="flex-caption"><?php the_excerpt(); ?></p>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
</div>

<!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- -->

The code I’ve used here is pretty basic. Notice the use of WP_Query though. It is good to get into a habit of using this for any custom query, remember query_posts() is bad, try not to use it.

The featured image is grabbed using the_post_thumbnail(). I’ve used the excerpt for the captions. If you would prefer you can remove the caption (by removing the p tag) or you can swap out the excerpt for something else. If you have any questions feel free to ask in the comments & I’ll try to help out as much as I can.

It is also difficult to explain where you would place it. Normally though a slider would be on the homepage so it would be placed in your theme’s home page template.

Next you need to attach the jQuery. To do this it is best to use wp_enqueue_script(). In your functions.php file add this:


function my_add_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('flexslider', get_stylesheet_directory_uri().'/js/jquery.flexslider-min.js', array('jquery'));
wp_enqueue_script('flexslider-init', get_stylesheet_directory_uri().'/js/flexslider-init.js', array('jquery', 'flexslider'));
}
add_action('wp_enqueue_scripts', 'my_add_scripts');


Make sure to change the js in the file paths to the folder you files are in. Now you may notice I’ve added a file that doesn’t exist, flexslider-init.js. This is the file you are going to add all your initializing code for FlexSlider into. So create that file and add the following inside it:


(function($) {
$(window).load(function() {
$('.flexslider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
});
})(jQuery)



Again this code is straight from the FlexSlider website, apart from some minor changes to help it ‘get along’ with WordPress. Since WordPress runs in No Conflict mode I’ve used the jQuery variable instead of $. I have however passed $ through when we are in an independent scope so we can code quickly using $.

Upload that file to the same location as the other FlexSlider files and that’s it.

Next we need to attach the CSS file. This is very similar to attaching the jQuery file except we use the wp_enqueue_style function to do it. In fact you can just add the style enqueues into your other function if you wish, for this example though I am going to do it separately. Some people prefer this way to keep them organized.



function my_add_styles() {
wp_enqueue_style('flexslider', get_stylesheet_directory_uri().'/css/flexslider.css');
}
add_action('wp_enqueue_scripts', 'my_add_styles');



That’s pretty much all there is to it. There is a small note about the CSS though. if you want to have a specific width, but still keep responsiveness in the slider. To do that I used the following CSS:


.flex-container {
max-width: 940px;
margin: 0 auto;
}



The max-width will keep the slider at the width you want, but will allow it to be pushed below it on smaller resolutions.


HINTS & TIPS

I do have a quick tip. When you attach your files using wp_enqueue_script and wp_enqueue_style you can still use conditionals inside the functions. So if you only want to attach your slider files on the homepage to save a little bandwidth you can wrap them in a conditional with the is_home() function to check if you are on the homepage or not. Like this:



if(is_home()) {
//wp_enqueues here
}



Finally as I mentioned earlier if you are using a child theme all of the code would be added to your child theme’s functions.php file. Also any CSS edits would be made to the child themes style.css.

If you have any questions please feel free to ask them in the comments. If you have questions about FlexSlider in general please direct them to WooThemes as they develop FlexSlider.