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
