Tutorial Details
- Version (if applicable): 2.9+
- Program: WordPress
- Difficulty: Moderate
- Estimated Completion Time: 30 minutes
Sliders seem to be all the rage these days, and for good reason! You can add photos, content, videos, and more to an eye-catching, animated area of your website. While there is a wealth of slider plugins out there (my current favorite is the one for Nivo Slider), there is not one for FlexSlider, a slider that has keyboard shortcuts and works with swipe on touch screens. In this tutorial, we’ll create that plugin!
Step 1 Plugin Setup
The first thing we need to do is set up the plugin. Create the folder /envato-flex-slider/, and in it, a file called ‘envato-flex-slider.php’. Here we will add all of the necessary information and code for our plugin, starting with the plugin definition block:
<?php /* Plugin Name: Envato FlexSlider Plugin URI: Description: A simple plugin that integrates FlexSlider (http://flex.madebymufffin.com/) with WordPress using custom post types! Author: Your Name Version: 1.0 Author URI: Your URL */ ?>
I also like to set up some constants for information I’ll be using a lot throughout the plugin. Under the definition block, but before the closing php tag, I add this info:
define('EFS_PATH', WP_PLUGIN_URL . '/' . plugin_basename( dirname(__FILE__) ) . '/' );
define('EFS_NAME', "Envato FlexSlider");
define ("EFS_VERSION", "1.0");
I create three constants: the plugin’s path, the plugin’s name, and the plugin’s version, which is used for upgrades, and to notify the WordPress Plugin Directory of changes, if needed. Notice I start all of my constants with “EFS.” I’ll do the same thing for function names so that we don’t create a conflict with other plugins or the WordPress core.
Now that we have the setup done, let’s add in the FlexSlider files & code.
Step 2 Adding FlexSlider
It’s time to add the important part: the javascript & CSS for FlexSlider. We’ll do this using WordPress’ wp_enqueue_script and wp_enqueue_style to avoid conflicts. You can download FlexSlider here. We will need 2 files: jquery.flexslider-min.js, and flexslider.css, and the /theme/ folder.
wp_enqueue_script('flexslider', EFS_PATH.'jquery.flexslider-min.js', array('jquery'));
wp_enqueue_style('flexslider_css', EFS_PATH.'flexslider.css');
In both lines, we assign a name to each script, then link to the .js and .css files. Notice we are using our constant ESF_PATH. We need to use the whole path or the files won’t be linked to properly. You’ll also notice that we have a 3rd parameter in wp_enqueue_script. This is an array of other scripts our script depends on. In this case, it’s only one, and it’s JQuery. Here is a full list of scripts included with WordPress. You can use any handle in the dependencies array.
The next thing we want to do is include the actual JavaScript that will make the slider work. We do this with our own function and a WordPress Action.
function efs_script(){
print '<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery(\'.flexslider\').flexslider();
});
</script>';
}
add_action('wp_head', 'efs_script');
The important line here is add_action('wp_head', 'efs_script');, which will run our function, efs_script() when wp_head is called. Our function simply prints the required JavaScript to make FlexSlider do its thing!
You’ll notice that I’m using ‘JQuery’ instead of the traditional ‘$’ usually used in JQuery scripts. This is so our script does not conflict with other JavaScript libraries, like Scriptaculous.
Finally, just copy the /theme/ folder into your /envato-flex-slider/ folder.
Step 3 The Shortcode and Template Tag
Next up, we’re going to set up our shortcode and template tag. The shortcode will allow users to insert the slider into any page or post. We have a really nice introduction tutorial on shortcodes here. The template tag will allow theme developers to insert the slider right into their themes. As a theme developer myself, I think it’s incredibly important to include both, and to make them easy to find in documentation. You never know who’ll be using your plugin.
function efs_get_slider(){
//We'll fill this in later.
}
/**add the shortcode for the slider- for use in editor**/
function efs_insert_slider($atts, $content=null){
$slider= efs_get_slider();
return $slider;
}
add_shortcode('ef_slider', 'efs_insert_slider');
/**add template tag- for use in themes**/
function efs_slider(){
print efs_get_slider();
}
Right now this code look pretty simple. For the shortcode, we call our general function, efs_get_slider() and return the results. For the template tag, we print the results. We also use WordPress’ add_shortcode() function to register our shortcode. I’ve purposely left out the implementation of efs_get_slider() because we haven’t set up how we’re going to do the images yet. To make it easy for users to add any number of images to their slider, we’re going to create a custom post type.
Step 4 The Slider Image Custom Post Type
The first thing we’ll do is create a new file called ‘slider-img-type.php’, where all of our code for the custom post type will go. First, we’ll do some set up like we did for the plugin.
<php
define('CPT_NAME', "Slider Images");
define('CPT_SINGLE', "Slider Image");
define('CPT_TYPE', "slider-image");
add_theme_support('post-thumbnails', array('slider-image'));
?>
As you can see, all I’ve done so far is create some constants (which would come in handy for more advanced custom post types), and added thumbnail support for our new type. The only other thing we’ll do in this file is register the new custom post type. For more on custom post types, you can see my tutorial on making a killer portfolio. Right before the closing php tag, we’ll add this code:
function efs_register() {
$args = array(
'label' => __(CPT_NAME),
'singular_label' => __(CPT_SINGLE),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'supports' => array('title', 'editor', 'thumbnail')
);
register_post_type(CPT_TYPE , $args );
}
add_action('init', 'efs_register');
We’ve created a function to register a custom post type that uses the title, editor, and thumbnail boxes. Then we add a WordPress action to call that function as soon as WordPress is initialized. That’s it! The last thing to do is include our new file by adding require_once('slider-img-type.php'); to envato-flex-slider.php. I added it right above where we enqueue our scripts.
Now that we know the how we’re implementing the slider images, let’s go back and fill in our general function for the slider.
Step 5 Generating the Slider
Head back to where we defined efs_get_slider() and replace the comment //We'll fill this in later with the following:
$slider= '<div class="flexslider"> <ul class="slides">'; $efs_query= "post_type=slider-image"; query_posts($efs_query); if (have_posts()) : while (have_posts()) : the_post(); $img= get_the_post_thumbnail( $post->ID, 'large' ); $slider.='<li>'.$img.'</li>'; endwhile; endif; wp_reset_query(); $slider.= '</ul> </div>'; return $slider;
The first two lines are needed because of how FlexSlider works. It will look for an unordered list called ‘slides’ within a div called ‘flexslider’ and apply the javascript/animations to that. Our CSS is also set up to define .flexslider and ul.slides. After that, we create a WordPress loop grabbing all of the posts of type slider-image (our custom post type) and we get it to print the large version of the featured image. We then return all of the generated HTML as a variable, which can be printed, as with our template tag, or returned, as with our shortcode.
A Couple of Notes
- With our custom post type, we can add a title, and featured image, and we’ve included the post editor box. While right now we only use the featured image (and title for the alt text), we’ve included the editor if, for instance, in the future we want to support captions on the slider.
- When adding a new Slider Image, we must upload a featured image for the slider to work. It will not just grab the post attachment.
Step 6 Testing it Out
Now it’s time to test! Once you add a couple of images to your new custom post type, create a new page (I just called mine Slider) and add our newly created shortcode, [ef_slider]. Save the page and view it. You should see something like this:
Conclusion
That’s about it for now. There are definitely a few things we can do to improve upon the plugin, like add options support for the advanced customizations FlexSlider has to offer or adding caption support. That being said, this plugin gives you everything you need to make a fairly simple, easy to manage, easy to insert version of FlexSlider for WordPress! If you’re unsure about placement or the files to include, you can download the source files using the link at the top of the tutorial. Enjoy!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Joseph Casabona
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Is there a demo page available to see the ending result?
http://flex.madebymufffin.com/
This is the link to the orginal plugin.
Correct – in lots of cases, it’s nearly impossible to set up demos for each of these tutorials because it’d require a unique installation of WP to create a test environment, but we always try to at least provide an HTML or screenshot example
Would it be worth looking at doing a WordPress Multi-Site installation to do the majority of WordPress demos?
Hi
Thanks for this great tutorial, was wondering if it’s possible to add thumbnails at the bottom of the slider, I mean can we create a cache folder within the slider plugin directory and automatically create thumbnails for each featured image that we add?!
If so, then what about when a particular slide has been deleted along with its associated image, then we no longer need to have a thumbnail of that specific featured image, so need to get rid of it, so how could we add a such additional features to this thing?
Cheers
Hi Farzad, that’s not a feature that’s included in the FlexSlider at the moment (I’m not sure if there’s a plan to integrate thumbs yet), which is why it’s not included here. Can you add thumbs? Probably, but it’s require customizing the actual plugin, which goes beyond the basic WP integration
Easier plugin url:
define( ‘EFS_PATH’, plugin_dir_url( __FILE__ ) );
Thanks Chris! I’ve been using my same simple framework for a while- I guess it’s time to update!
Great tutorial!
May be its will be more user friendly if we use metabox for image upload and another box to link that url
Thanks Maidul, I’ll actually be releasing a customized followup to this one using OptionTree to handle the slide management, so that kind of stuff is coming soon
Really loving this new site and all the great tutorials that have appeared here so far, this one included. I’m wondering if anyone might suggest a way I can use this plugin to display single posts as though they were chapters in a book. I’m working on a book style theme at the moment and would love for users to be able to click through each post/chapter in a without a page refresh. Anybody have any ideas?
FlexSlider may actually be a reasonable implementation, depending on what you do. I would, however, recommend making each page in the chapter a slide and each chapter it’s own page, so users can like to specific chapters.
This could also be a good way to go since it works well on touch screens.
Great Tutorial! Thanks!
I am surprised and glad to see this tutorial only because I created a similar plugin using FlexSlider for a client website about 2 weeks after FlexSlider was published, and was asked by the author not to make the plugin public… but he would appreciate if I just sent the plugin files…
Really? That’s strange… being that the FlexSlider is an open source plugin
Yeah, I thought it was strange too, I read the license over and over, but since Tyler did create it, I decided to respect his wishes, I still have his email response asking me to refrain from making the plugin available to the community, either way, it’s a sweet slider.
Awesome tutorial!
Just one question, please.
Is it possible to call the flex slider to header.php?
Any help?
Thanks in advance!
Yup! We’ve actually created a template tag too, called efs_slider(). So in the header you’d just put:
if(function_exists(‘efs_slider’)){ efs_slider(); }
Thank You So Much Joseph!
For me it ouputs nothing….
Hello,
Thanks for the information. I’m new to plugins at the moment.. Everything was very clear except at the very end on step 6 where you say to add our newly created shortcode, [ef_slider].. Where does that part go?
To me it would seem easier to just add the slider script directly with out adding it as a plugin.. I’m not really see the point of plug-ins.. (from a developer point of view..) Adding it as a plugin does not seem very simple I mean your adding lots of code. I’m new to WordPress at the moment so please bare with me. I’ve developed CMS mostly from scratch.
Ok now that I have gone over short codes i see whats going now. Sorry about that.
Hi thanks for this tut, looks promising. I’ve seen elsewhere that when Flexslider is implemented in WP, it doesn’t seem to be responsive.
Can someone confirm that this indeed is a responsive solution? Otherwise, I’ll stick with Nivo, which is currently working fine, but non-responsive.
Thanks!
I am also having some issues with this as well – I believe it’s because WordPress puts pixel dimensions of images automatically, but do not know how to change/fix this. Any help would be greatly appreciated
Well it looks like I should have kept reading….adding this to your CSS works. Thanks James
img.wp-post-image {
height: auto;
width: auto;
}
Or you can remove your image dimensions:
function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
$html = preg_replace( ‘/(width|height)=\”\d*\”\s/’, “”, $html );
return $html;
}
add_filter( ‘post_thumbnail_html’, ‘remove_thumbnail_dimensions’, 10, 3 );
This worked for me. But this will remove the image dimensions on all post thumbnails. You can control this with a Conditional Tags.
Great tutorial, I just wondered whether it was possible to make the slider generate the images specific (attached images) to the post/page the slider loaded on. Making it a multi-page, intuitive slider.
Many thanks for the tutorial, great work.
Hi Ben!
Did you or anybody else find out how to use the slider in different posts/sites with different images? I am trying to build a responsive portfolio website an need multiple slideshows with individual images.
Thanks for suggestions!
You can try this:
http://wordpress.org/extend/plugins/gallery-to-slideshow/
I had a problem with the height of the image not re-sizing due to WP adding height and width values to the img tags.
If anyone else has this problem you can resolve it by adding this to your css:
img.wp-post-image {
height: auto;
width: auto;
}
Cheers for the tutorial!
Great Tutorial, you guys(The whole Plus Group) are really the best …Having one issue with this one…I’ve been tweaking for like five hours and I can’t get the images to responsively resize once its being output as a wp plugin…Is it anyone else having this issue? I think it might be related to defining image sizes for wp thumbs/imgs, but I could really use some input. Thanks
I would like to ask the same question as Shane Barnes did: is there the possibility to slide posts instead of image?
Greetings from Italy
Gabriele
amazing ,, but what could i do if i want to show more than 1 img ,, together then when you click on slid buttons it`s show another img ,.. like 3 img in one line with padding about 5 px ,, in each slid ?
Hi Joseph,
First of all, thanks for your tutorial. I’m trying to insert as a header in my webpage but I have a problem because it shows the sliders but with no images / posts. You can take a look about the behaviour in: http://www.falconsdevilafranca.cat.
Some weeks ago, I had a similar problem with vslider plugin and I solved it changing the rights of the cache files.
Could you please help me with this issue?
Regards,
Foix
How do I make a slide link through to it’s posts?
I wanted the slides to link as well, but to link to a unique URL for each slide — that is, sometimes might want to link to a page, sometimes to a post, sometimes elsewhere.
Here’s how I did it:
First, to allow the slide images post type to have custom fields, modified efs_register() in slide-img-type.php:
function efs_register() {
$args = array(
‘label’ => __(CPT_NAME),
‘singular_label’ => __(CPT_SINGLE),
‘public’ => true,
‘show_ui’ => true,
‘capability_type’ => ‘post’,
‘hierarchical’ => false,
‘rewrite’ => true,
‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’)
);
Next, had to make a change to the way the Loop is being called in the slider — using query_posts() wasn’t allowing the custom fields to get set up properly. So I used get_posts() instead (which is actually the recommended way to create a secondary loop like this). Here’s the revised function:
function efs_get_slider(){
$slider= ‘
‘;
$efs_query= “post_type=slider-image”;
$myposts = get_posts( $efs_query );
foreach( $myposts as $post ) : setup_postdata($post);
$img= get_the_post_thumbnail( $post->ID, ‘full’ );
$slide_link= get_post_meta( $post->ID, ‘link_slide_to’, true);
$slider.=’‘ . $img . ‘‘;
endforeach;
$slider.= ‘
‘;
return $slider;
}
And finally, in each slider image post, create a custom field with the key ‘link_slide_to’ that contains the full or relative URL for what you want that slide to link to. If you don’t include a ‘link_slide_to’ value for a slide, then that slide doesn’t link anywhere.
To have each slide link to itself, use this version of the function instead:
function efs_get_slider(){
$slider= ‘
‘;
$efs_query= “post_type=slider-image”;
$myposts = get_posts( $efs_query );
foreach( $myposts as $post ) : setup_postdata($post);
$img= get_the_post_thumbnail( $post->ID, ‘full’ );
$slide_link= the_permalink();
$slider.=’‘ . $img . ‘‘;
endforeach;
$slider.= ‘
‘;
return $slider;
}
Big thanks for this tutorial! I’ve needed a responsive slider and having this to follow saved me oodles of time.
Hi Cynthia,
Tried to get your code working but had no joy. The Custom Fields was appearing but after I add a value and update no link appears to have been added to the slide. Could you post all of your code?
Thanks,
James
Should you have added:
$slider.=’‘.$img.’‘;
to get the link working?
Ah the comments are stripping the code out… did you have something like this in there?
$slider.=’‘.$img.’‘;
Ah the comments are stripping the code out… did you have something like this in there?
$slider.=’<li><a href=’.$slide_link.’>’.$img.’</a></li>’;
Hey James, Did you ever get the comments to work in your FlexSlider?
Great tuto, but i think loading CSS and JS in the admin panel is not a good idea.
I found a solution wrapping both wp_enqueue_xxx in a function and hooking by add_action(‘wp_enqueue_scripts’, ‘my_fn_name’)
This hoook only load resources in the front end.
Hi, Please forgive me if this is obvious, but would you elaborate on this line:
Finally, just copy the /theme/ folder into your /envato-flex-slider/ folder. Thanks!
Hi,
I am pretty sure I’ve set things up properly but am new to custom post types and don’t see where in the admin panel these settings are? Or in the post page?
Thanks for your help.
Hi,
thanks for this great tutorial..
works well with shoortcode! how can I put it in the head with only php ?!!
if(function_exists(‘efs_slider’)){ efs_slider(); }
I call the function with this?
echo efs_get_slider();
okay?
it works, but is that safety?
Hey there!
Hi,
Thanks for your great tutorial, it’s just what I was looking for!
I tried to insert slide in my home page but I found this error:
Notice: Undefined variable: post in public_html/wp-content/plugins/envato-flex-slider/envato-flex-slider.php on line 50
Notice: Trying to get property of non-object in public_html//wp-content/plugins/envato-flex-slider/envato-flex-slider.php on line 50
Could you help me, please?
Thanks!
Hi, I made some changes and modifications based on your lovely tutorial here, would you mind if I publish it in the wordpress plugin repository for others to enjoy it as well?
Hi, it’s really helpful for me, please check my blog, I am using this…..thank you.
I am just starting out with WordPress and it is a lot to take in if I am honest. Tutorials like this though give me a confidence that I do actually know more than I thought. This tutorial will be of great use to me in the future when I really get my teeth into WordPress and give me an advantage when looking at sliders and other visual aspects.
Thanks for this! It works very well.
I noticed that the number of slides was being limited by the setting for the number of posts on the page. To fix this, I changed the query to set the number of slides explicitly:
$efs_query= “post_type=slider-image&posts_per_page=10″;
Having trouble calling the function from my template page. Below is the code I’m using.
Having trouble calling the function from my template page. I’m using…
Sorry about the above… didn’t keep the source in there. I got that issue sorted out though.
Now I’m wondering how to attach a link to the image like the original does? I’ve set up a Custom Field for the link and I’d like that link to appear below where it says “Custom Field Link Here”.
Thanks!
$slider.=’<li><a href=”Custom Field Link Here”>’.$img.’</a><h1 class=”flex-title”>’.$ttl.’</h1><p class=”flex-caption”>’.$cpt.’</p></li>’;
Hey Jeremy,
Don’t suppose you’d post the code you wrote to get those custom posts working?
I’m trying to get add a link to start but having no luck with the following code:
add_action(“admin_init”, “efs_meta_box”);
function efs_meta_box(){
add_meta_box(“projInfo-meta”, “Project Options”, “portfolio_meta_options”, “portfolio”, “side”, “low”);
}
function efs_meta_options(){
global $post;
if ( defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE ) return $post_id;
$custom = get_post_custom($post->ID);
$link = $custom["projLink"][0];
?>
Link:<input name="projLink" value="” />
ID, “projLink”, $_POST["projLink"]);
}
}
Would appreciate any help,
James
^*Custom Fields not Custom Posts
Hello, I followed your tutorial to create the slider and it’s not working quite right… When I used my own code the images showed up with no styling and the jQuery wasn’t working. Then I downloaded your source files and installed the plugin, and now nothing shows up? The actual images are there (I saw them using firebug) but they don’t have their css applied or the jQuery?
I’m using the plugin on a local install of WordPress 3.2 on my LAMP server.
Any tips?
Awesome tutorial— I’ve been a fan of Flexslider since the beginning!
Anyways, I have a question regarding its integration with WordPress: would this plugin stay functional when a new version of WP is installed? What would be the best way to maintain the plugin?
Thanks again,
- j
Thanx for the tutorial, it works great, only swype doesn’t work? Controls work, but no swype. Anyone got it working?
How can I remove navigation? It doesn’t scale properly, and messes up the looks.
Hi there,
first thank’s for the tutorial. In my case, I’ve downloaded the pack and uopload in extensions…I’ve added the following code to be responsive:
img.wp-post-image {
height: 100%;
width: 100%;
}
But when i display more than one thumb, the display one above the other, and not like a slider with the hided image…Any ideas?
Thank’s a lot in advance!
It seems the javascript doesn’t load…
Wow thanks for such a great tutorial. Is there a way to make this work with a single post gallery instead of creating a post type for each individual image? Thanks in advance!
Very cool. Thanks Joe. Good work on adapting Flexslider for WordPress.
Can anyone tell me the best way to include captions?
Thanks!
Thanks for the tutorial, is there any way of implementing flex slider but not as a plugin?? Tanks for any help.
nice tutorial, what puts me off this slider are those horrid arrow buttons
Ok, so this is how I was able to integrate both links and captions into FlexSlider. Hope this helps anyone who has been struggling as mightily as I have. In envato-flexslider.php here is what you need for function efs_get_slider(). Just make sure you name your custom fields in your slides image_caption and image_link respectively.
function efs_get_slider(){
$slider= ‘<div class=”flexslider” >;
<ul class=”slides” >’;
$efs_query= “post_type=slider-image”;
$myposts = get_posts($efs_query);
foreach($myposts as $post) : setup_postdata($post);
$img= get_the_post_thumbnail( $post->ID, ‘full’ );
$slide_link= get_post_meta( $post->ID, ‘image_link’, true);
$slide_caption= get_post_meta( $post->ID, ‘image_caption’, true);
$slider.=’<li ><a href=’.$slide_link.’ >’.$img.’</a ><p class="flex-caption" >'.$slide_caption.'</p ></li >';
endforeach;
$slider.= '</ul >
</div >';
return $slider;
}
lawrence, you can disable the arrows easily in envato-flexslider.php. Just put directionNav: false and you’re all set. This is what i mean.
function efs_script(){
print ‘<script type=”text/javascript” charset=”utf-8″ >
jQuery(window).load(function() {
jQuery(\’.flexslider\’).flexslider({
animation: “slide”,
slideshowSpeed: 6000,
animationDuration: 300,
directionNav: false,
controlNav: false
});
});
</script >';
}
Hi, congratulations for this GREAT tutorial, you can’t even imagine how useful was this for me.
I have a question though that maybe someone can help me to solve. Is there any change to change this code a little bit to allow multiple sliders with different content?
Best! and thank you very much again.
Hello! Nice work here.
I want include many sliders in my website so i want this: [ef_slider categoryname="envato" /]
i try to modify the “query_posts” but it show all category post thumbnail.
Someone can help me please?
I’m trying the same thing now. Make sure you add this line to the shortcode function:
$categoryname = $content
where content will give you the content of [ef_slider]categoryname[/efslider]
and add “&categoryname=”.$categoryname to the query line.
I haven’t tested it yet but I don’t foresee a problem.
Thanks for responding me, i tried your solution but it seems that doesn’t work for me.
Look at my fonction, is it right way?
function e_get_slider(){
$slider= ‘
‘;
// assign the variable as current category
// run the query
query_posts(‘&categoryname=’.$categoryname);
if (have_posts()) : while (have_posts()) : the_post();
$img= get_the_post_thumbnail( $post->ID, ‘large’ );
$slider.=”.$img.”;
endwhile; endif; wp_reset_query();
$slider.= ‘
‘;
return $slider;
}
function e_insert_slider($atts, $content=null){
$slider= e_get_slider();
$categoryname = $content;
return $slider;
}
add_shortcode(‘e_slider’, ‘e_insert_slider’);
/**add template tag- for use in themes**/
function e_slider(){
print e_get_slider();
}