Installing WooThemes FlexSlider Into Your WordPress Theme

April 17, 2012 / Wordpress / by Paul Robinson / 68 Comments

This post was published back on April 17, 2012 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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>

<?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(); ?>

</li>

<?php

endwhile;

endif;

</ul>

</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');

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)

(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');

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;
}

.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
}

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.

FlexSlider jQuery Slider Theme WooThemes Wordpress

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

68 Comments

Awesome! Thanks for the tut 🙂

author

No worries James, hope it was useful. 🙂

Hey Paul, I am revisiting this now, but notice the code right under the “Installing FlexSlider” headline appears to be messed up with rouge semicolons? I tried fixing it myself but was kind of a guessing game as to what delete and what not to delete.

– James

author

Hi James,

Apologies. I’ve corrected the problem & hopefully it won’t happen again, although I’m stumped as to what the cause was.

hi,
I’m sorry for my bad english.
I’ve try it, but i’ve this error message: Uncaught TypeError: object is not a function on line 2 of the flexslider-init.js. can i do to fix it?

author

Hi Simone,

It’s difficult to debug JS errors like that without access to the page, but best guess is that jQuery or FlexSlider, most likely jQuery, is not available.

Have you made sure jQuery is attached to the page?

yes, i’m resolve it whit this small change:

jQuery(window).load(function() { 
    jQuery('.flexslider').flexslider({
		//option...
	});
});

jQuery(window).load(function() {

jQuery('.flexslider').flexslider({

//option...

});

author

Odd, looks like your code didn’t like the reference pass through. Oh well. It doesn’t make much difference other than the fact you can’t use the $ in place of jQuery.

I’m happy you managed to figure things out though.

Great tut and beautiful website! I’m just jumping into wordpress development and jquery, but I couldn’t get the slider to work with the line “jQuery(window).load(function($)” in flexslider-init.js. Maybe you can shed some more light no the “No Conflict scope” and “independent mode” for me. I must have spent a couple of hours fighting with the plugin until I went to the flexslider installation page and saw that they didn’t use the “$” in their custom jquery. It worked immediately when I deleted the “$”. The interesting thing is that I left the subsequent “$” and didn’t have to change them to “jQuery”. Maybe it has something to do with the HTML5 Reset I’m using.

author

Hi Sean,

The problems is actually caused by the closure I’ve used. I will adjust it after I’ve submitted this comment.

The problem is this code:

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

jQuery(window).load(function($) {

$('.flexslider').flexslider({

animation: 'slide',

controlsContainer: '.flex-container'

});

Because it needs to have a closure that protects against conflicts with other libraries you can use this instead:

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

(function($) {

$(window).load(function() {

$('.flexslider').flexslider({

animation: 'slide',

controlsContainer: '.flex-container'

});

})(jQuery)

There are a lot of ways to write that, but I’ve found this to be the most robust version & works in every environment I’ve tried it in.

Thanks Paul!

author

Not a problem.

Hi,

how can i display the images? do attach them as a gallery?

thnx

author

Hi Sabrina,

If you are using the_post_thumbnail() you would attach the images to your post.

Just remember that if you do not have post thumbnail support in your theme you will need to add add_image_size(100, 300, true) to your functions.php file where 100 is the width you want, 300 is the height you want, and true determines if the images should be hard cropped.

Also remember that you need to add the add_image_size() before you upload an image or WordPress won’t know to create thumbnails in that size yet.

Hope that helps.

Hi,

Where should i put the code?

in the function my_add_scripts? of under it?

Now i add the pictures like:

upload – upload the pictures en then save and then close. So the pictures are attached at the page but you dont see it. (in the gallery)

Great tut! Been having an issue with getting 3rd party files to init with Flexslider.

“NetworkError: 403 Forbidden – http://localhost/wordpressC:wampwwwwordpress/wp-content/themes/Bones/library/js/jquery.flexslider-min.js?ver=3.4.2”

I really don’t get it and can’t seem to get past it. This is the 2nd tut I’ve done with this roadblock. Please help!

author

Hi Ben,

Looks like something strange is going on with your file path. It seems to be a combination of a HTTP based path (URL) and a file system path. The reason could honestly be anything from a problem with the code, to a conflict in WP all the way up to a problem with your Apache settings.

Hi Paul, is it possible to add the flex slider to a static/landing page for the twenty eleven WP theme? I have a child theme.

Thanks in advance,

Crystal

author

Hi Crystal,

You could set your WP options to load a page as it’s front page, and then make a custom page template with Flex Slider installed on it. The instructions would be very similar, with the exception that you may want to use conditionals to restrict the JavaScript to loading only on the landing page. Does that make sense?

Great tutorial thanks alot …….I needed it >>then i found this

hey there
it’s a great tut
but i have a problem i followed this tutorial step by step the background of the slider appears but the images doesn’t appear although i had the add_theme_support(‘post-thumbnails’); in my functions.php file

author

Hi,

Did you add the line that adds the image size. Just having the theme support function isn’t enough, you need to add the image size function to:

add_image_size('size-name', 100, 100, true);
// params(size handle, width, height, hard crop)

1 2	add_image_size('size-name', 100, 100, true); // params(size handle, width, height, hard crop)

Great tutorial. If I wanted to implement ‘slider w/thumbnail controlnav pattern’:

1) Add controlNav: “thumbnails” to javascript
2) Display thumbnail? This is were I am having trouble For straight HTML you add it to .
How do you do it your loop?

Thanks

author

Hi Tom,

Well as WordPress uses an object cache you could just use rewind_posts() to set the post pointer back to the start & then run through the loop a second time but using the HTML structure required for that FlexSlider pattern. Does that make sense? Because of WP’ object cache running through the loop again shouldn’t give a performance hit.

From the demos this looks like a great slider, but I can’t get it to work in my WordPress site. Before I discovered your tutorial I tried to follow Woo’s instructions. They don’t tell you what files go where, and the download has several files and then more inside a “demo” and “images” folders.

The slider seemed to start in that it drew the thin bar that loads before the images load. But no images ever appeared.

To follow your instructions I pulled out the changes to header.php that I had made from Woo’s instructions. You say to upload flexslider.js, jquery.flexslider.js, and the theme folder. I don’t know what you mean by the theme folder. I uploaded the demo and images folders anyway. All of these went in the js folder in the theme folder.

After I did everything you said, the post with the slider code just displays the photos like a list. It behaves the same whether or not I have the following in header.php (I first tried the google address for jquery.min.js and when that didn’t work I tried downloading it):

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="http://the.mountaingallery.net/wp-content/themes/align-child/flexslider.css" type="text/css">
<script src="http://the.mountaingallery.net/wp-content/themes/align-child/jquery.min.js"></script>
<script src="http://the.mountaingallery.net/wp-content/themes/align-child/jquery.flexslider.js"></script>

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

$(window).load(function() {

$('.flexslider').flexslider();

});

</script>

author

Hi Lane,

All scripts should be attached using the method I mention (the action hook method) so that WordPress can track them. A lot of developers still hard code them into their header file, but for best results you shouldn’t.

The theme folder is exactly that. The folder that your theme is held in. This is usually inside wp-content/themes. So if your theme was WordPress’ default ‘Twenty Twelve’ your theme folder would be found at wp-content/themes/twentytwelve.

Installing a slider yourself, especially without any previous HTML/CSS/PHP experience isn’t the easiest thing to do, but it is possible. There is just a lot more to it than you might think.

Without any errors or being there to look at the problem it’s pretty difficult to troubleshoot. I can only suggest to go through everything double checking that everything is done as suggested.

Great tutorial, I leart a lot! Is it possible to get the slider to load the full size featured image for the slider? Right now it loads a medium image format and scales it to the full width of my site, resulting in blurry images.

Thanks

Never mind I solved it,

I just rememberd how much I hate it when people say “I solved it” without showig you how. So the solution is

 <?php the_post_thumbnail('full'); ?>

1	<?php the_post_thumbnail('full'); ?>

Great article, thanks. I followed the tutorial and I have it working nicely, except for one minor annoyance: I notice that when there’s only one image in the slider the directional and control nav buttons are hidden, but if there are no images at all the navigational elements are still visible on the page. If I hide them through CSS with ‘display: none;’ and/or ‘visibility: hidden;’ the directional areas are still clickable. Can this be corrected by amending the Javascript file? I’m much more proficient at CSS than I am with JS. Any suggestions you can make are appreciated. Thanks again for the terrific tutorial.

Answered my own question. If anyone else is interested, here’s how to hide the directional nav buttons when no Featured posts are selected (it wasn’t very difficult, really): In the current version of jquery.flexslider.js, go to line 268 and you’ll see (slider.pagingCount === 1). This line is just above another that reads: slider.directionNav.addClass(disabledClass); Just change that first line to (slider.pagingCount === 0). Then in my flexslider.css file I added this:

.flex-direction-nav a.flex-prev.flex-disabled,
.flex-direction-nav a.flex-next.flex-disabled {
	opacity: 0.0!important; 
	filter:alpha(opacity=0);
}

.flex-direction-nav a.flex-prev.flex-disabled,

.flex-direction-nav a.flex-next.flex-disabled {

opacity: 0.0!important;

filter:alpha(opacity=0);

}

This will completely hide all traces of the Flexslider if you don’t have any posts in the Featured category. Hope that helps save some others a bit of time.

author

Hi John,

Fantastic stuff. I was trying to figure out a way to do it without editing the core file, so that upgrades don’t overwrite it, but to be honest that is so simple it’s not worth worrying about, lol.

Nice job & thanks for sharing. 🙂

Hi Paul,

I have the same question as Lane above. Sorry if this is a bit too basic, but I’m new to WP and javascript and I too have trouble with the instruction re the theme folder. So here’s where I’m stuck at:

“You only need flexslider.css (1), jquery.flexslider-min.js (2), and the theme folder (3). Place them into a folder inside your theme.” Did you mean place 1, 2, and 3 inside a folder inside the theme?

My theme is called “mystile”, in it I have a folder called “includes” which in turn has a “js” folder and a “css” folder in it. I placed the “flexslider.css” in the css folder, and the jquery.flexslider-min.js in the “js” folder and modified the paths accordingly in the script. Now my problem is where to put the theme folder? I can’t place my theme folder into a folder inside my theme as it won’t allow that. I’m confused. :/

author

Hi Isabel,

I’ve altered the post so it makes more sense. I must have been thinking of NivoSlider which comes with different themes, or at least I hope I was. If not I’m losing the plot.

Hopefully it makes a lot more sense now. From what you’ve said you’ve got it exactly right, just pretend the imaginary theme folder never existed, lol. Apologies for confusing you.

Good day, thank you so much for the tutorial.

I got my flexslider to work…the problem is I need to instances of it on the same page. As soon as I add the second instance of the flexslider I get double the amount of controls on instance 1 and 2…and they don’t work as they should.

Any ideas how to have more than one instance of the flexslider on the same page?

Your help would be greatly appreciate.

Thanks in advance

author

Hi Alwyn,

Sadly I didn’t write FlexSlider and I’ve never needed to use two instances of it (yet!) so don’t have any experience with getting them to play nice with each other unfortunately.

You could try heading over to WooThemes and asking there, or you could try the WordPress StackExchange as they are extremely helpful with most coding problems.

I’m using two sliders on my page:

(function($) {
    $(window).load(function() {
	$('#slider-one').flexslider({
			animation: "fade",
			slideshowSpeed: 2500,//duration
			controlNav: false,
			directionNav: false
		});	  
	  $('#slider-two').flexslider({
			animation: "fade",
			controlNav: false,
			directionNav: false,
			slideshowSpeed: 5000,//duration
		});
    });
})(jQuery)

(function($) {

$(window).load(function() {

$('#slider-one').flexslider({

animation: "fade",

slideshowSpeed: 2500,//duration

controlNav: false,

directionNav: false

});

$('#slider-two').flexslider({

animation: "fade",

controlNav: false,

directionNav: false,

slideshowSpeed: 5000,//duration

});

})(jQuery)

If I wanted to put the flexslider on just a single page what files should I put the HTML in? Content-single.php? Page.php? Where in the file?

author

Hi Peter,

You would still place the code to attach the JS etc in the functions.php file but you’d wrap it in a conditional to stop it loading on other pages. A conditional looks like this:

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

if(is_home()) {

//code here

}

Where you put the HTML depends on your theme. If you are using a page template you would add it into the template file that controls that. Not all themes have the same naming structure for page templates so it is difficult to say what it would be called. I normally use template-{nameoftemplate}.php where {nameoftemplate} is the name that makes sense. Such as home, portfolio, music, or whatever is needed.

Without seeing the theme it is tricky to say, but keep looking and if all else fails add a small bit of text to each file as you go then refresh the page to see if you can see it. When you see it you have the right file. If you don’t understand WP templates it’s a great help. Some might say a little crude, but still helpful.

I had some trouble implementing the flexslider for a moment but finally found out. Such a stupid mistake. But maybe worth mentioning here:

in functions.php I redirected to:
– ‘js/jquery.flexslider-min.js’
– ‘css/flexslider.css’
but the images I featured post appeared under each other. Then, I opened the source code of my site in my browser and clicked on the links. They gave a 404 message. Thus the path wasn’t correct. I forgot about the /. So it worked with:
– ‘/js/jquery.flexslider-min.js’
– ‘/css/flexslider.css’

Thanks for your tutorial Paul!

hi paul. great tut man. i’ve tried to follow your step-by-step tut and i confused where to put this :
function my_add_styles() {
wp_enqueue_style(‘flexslider’, get_bloginfo(‘stylesheet_directory’).’js/flexslider.css’);
}
add_action(‘wp_enqueue_scripts’, ‘my_add_styles’);

thanks and help me pls

author

Hi Aris,

You would put that in your themes functions.php file. If you don’t have one in your theme, you just need to create it, do remember to open your PHP tags though or you’ll print it to the page instead.

amazing, fast response even it’s a long past article. thank you Paul.
i already seems to get all together, but still not showing up. its just white bar.
so whats wrong next ?

the function script already there with other function script. I looked up on view page source. the flexslider.css (with code .flex-container added) also in place. also i had the HTML in place.

author

Hi Aris,

I’m afraid I’m not sure without being able to see the page. The normal debug checks are to make sure the scripts/styles are attached and use a debugger such as Chrome dev tools or Firebug.

thx you very much 🙂 you helped me

Hi,

I implemented the slider without a problem. I decided that the images were a bit big so resized the slides. Now the slider is too far down my page, and I can’t see where I control it’s placement on the page – any ideas?!

Thanks in advance!!

Hi,
new version ? http://flexslider.woothemes.com/
thank you

Does this code intend to target the post featured images? That’s what it looks like in the code to be added to the home page template, but none of my images are being shown. =/ I’m pretty sure I’ve followed this to the letter, and I can see the slider area on my homepage, but no images are being pulled in. Any advice?

Hello, great tutorial – I have it working in all modern browsers but in ie8 I am just getting a blank space where the slider should appear. Is anyone else having ie8 issues?

thanks

author

Hi Dan,

Unfortunately you would have to report that issue to the team over at WooThemes. I just wrote this tutorial, to help people who prefer the custom touch, add FlexSlider to their theme. I don’t actually develop the plugin. However to answer your question, I haven’t had any issues with FlexSlider in IE8.

managed to get it fixed. Had to remove the comma after slide in flexslider-init.js

animation: ‘slide’,

Hello again,

How can I make my image slides link to their posts?

author

Hi,

Just wrap a hyperlink around your thumbnail & caption and use the permalink inside the hyperlink target. Like this:

<li>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    //Other code such as thumbnail & caption here
  </a>
</li>

<li>

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">

//Other code such as thumbnail & caption here

</a>

</li>

Hope that helps.

I have many post with images uploaded to the post.
Is it possible to add the flex slider to the content-post.php for being able to see the slide of the images uploaded to the post, under to the title?

author

Hi,

It should be possible. There are a fair few WooCommerce themes out there that use Flex slider to show the multiple product images.

You would need use code similar to the code in this tutorial, but instead of a normal WP loop you would use a get_children(); or get_posts() loop to grab all the images. I did a tutorial a while ago (which I’ve now updated to be more current) about how to do it.

Older Comments

Newer Comments

Installing FlexSlider

Hints & Tips

Follow Me

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.