Installing WooThemes FlexSlider Into Your WordPress Theme
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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:
|
1 2 3 4 5 6 |
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:
|
1 2 3 4 5 6 7 8 |
(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.
|
1 2 3 4 |
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:
|
1 2 3 4 |
.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:
|
1 2 3 |
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.
68 Comments
Art Jean
How are you?
I’m getting the following Javascript error:
Uncaught TypeError: Object [object Object] has no method ‘flexslider’ custom.js:57
What should I do about it?
Paul Robinson
Hi,
That would generally mean that it is unable to find Flexslider. The best thing to do is open up whatever dev tools you are using (Chrome, Firebug etc) and check the network panel when the page is loading to see if you get an error when it tries to load the flexslider JavaScript file. If you do get a 404 or 500 error you will need to see if you can discover why that is. Generally it is because the path to the file is incorrect.
If the file is attached without any problems it could be that jQuery isn’t attached, or that Flexslider is being attached before jQuery as that has sometimes caused that error for me in the past.
Alkesh Miyani
Great tutorial for beginner.
I also like same one also, you can share me that one also
Many thanks!
Eva Coleman
Hi there,
I am trying to solve this issue for a client….he’s got a Flexslider (the older version – not flexslider2) and he wants to increase # of slides from a default of 10 slides. Is there a way to do this or do I need to update it to Flexslider2? Thanks in advance and for advise.
Here is the code I’ve got:
Author Edit: Your code was eaten by WordPress. Could you repost the code using pastebin or here in the comments but using the tags shown in this pastebin so that WordPress doesn’t mangle it. I apologise for the inconvenience.
Paul Robinson
Hi Eva,
I’ve edited your comment as the code was messed up by WordPress. Could you try reposting the code following the little message I left on your comment.
In the meantime though. Increasing the number of slides shown would actually fall to WordPress and not Flexslider. How to change it depends on how the slider query is being created. Whichever way though the argument you need to add is the same. Here is an example of the two main methods of creating the query. The first is
query_posts()function.Then we have the preferred version. Creating an instance of the
WP_Queryobject.If those don’t help, feel free to repost your code as I mentioned & I’ll try to help you out as best I can.
Eva Coleman
Hi Paul,
Thanks so very much for taking the time to answer my question and helping me.
This is a theme purchased from Theme Forest and it’s been discontinued so there is no way to ask the author about the changes. I have contacted someone from Woothemes, but for some reason he stopped responding….anyway the snippets of the code you sent don’t do anything…
Here is the code – if you need I could give you an access to the dashboard so you can see the whole thing..
Admin Edit: Again, please use pre tags as shown here to stop the code being parsed incorrectly by WordPress. Or you can also just paste it into Pastebin and post a link to your pastebin.
Eva Coleman
It looks messed up again, please email me, hope the contact form gets my email through 🙂
Paul Robinson
Hi Eva,
As noted, please use the tags shown on the first link to stop your code being eaten by WordPress, or just paste the code into a Pastebin on their website and post the link here in the comments.
I haven’t received an email via the contact form. I’ve just double checked it is working as we’ve making some server and theme changes, as you can probably tell, but I received all test emails without any issues. I’ll drop you an email directly via the email you used when commenting.
Maia Buckingham
Hello, this is a great tutorial, the farthest I’ve been able to get installing Flexslider on WordPress. My only issue is how to get the images to display? I’ve tried entering both “add_image_size” and “the_post_thumbnail” and have had no success. I’ve tried adding images to my post editor as well as adding a featured image. Once either is entered into the functions.php file where do you add the images in the WP Post/Page Editor?
Paul Robinson
Hi Maia,
Thank you, although I think you’ve just highlighted a flaw in the tutorial about something I didn’t cover. 🙂
Once you have set everything up as in this tutorial you would add the image in the post editor as a featured image. It is normally a small box in the right hand sidebar on the post edit page.
If you can’t see that box and you have checked it isn’t off in the screen options, then it is likely that your theme doesn’t have post thumbnail support enabled. If that is the case you will need to add an extra section in your functions file. Just add:
Hopefully that will solve the issue. I think I’ll give this tutorial an update soon and republish it as it is in need of an update to make it so it is a bit more up-to-date with adding theme support and using OOP style PHP.
Peter
This is an exceptionally well written article. You’ve covered absolutely every area on this topic – THANK YOU!
Jop
Hi Paul!
Thank you for the tutorial! I would like to add a slider in my about page so in that case where should I place the HTML file?
Cheers
Paul Robinson
Hi,
That’s a tricky one. It all depends on your theme. If your theme has a template used for your about page then you would place it on there. If it does not then you would either have to make one or you would have to place it on the default page template and use a conditional to restrict it to show only on your about page.
Please feel free to drop me an email via the contact form if you need further help with this, it would be easier than trying to help via comments.