All slides are grouped by the slide location taxonomy (here: tutorial). WordPress image slider tutorial Most image slider plugins are based on a third party slideshow plugin, written in jQuery or JavaScript. This is not surprising, because building a responsive and flexible slideshow is a different task than writing a few blocks of PHP code in WordPress. I’m going to show you how to use the same code most slider plugins use to integrate and control a slider function right in your WordPress blog post. I’m using Flexslider 2, a jQuery plugin maintained by WooThemes. WooThemes has built Flexslider 2 as the basis for their own premium and plugin.

Reason enough to use their jQuery plugin for this WordPress tutorial. Prepare your WordPress theme All the tutorial code needs to be placed in your theme’s functions.php file, but before we can do that, we need to copy some files from the Flexslider jQuery plugin into the theme’s directory as well. Create a directory called flexslider in your themes directory. The Flexslider 2 plugin and upload the files flexslider.css and jquery.flexslider-min.js including the directories named fonts and images into the flexslider directory you just created.

The following two functions are used to include the necessary JavaScript and CSS code into your theme footer. I’m using a “special method” I’ve found on to include these files inside the footer to keep my theme files fast. Many plugin developers include JS/CSS files on every page, post or even archive pages. The function print_my_script() below will include the JS/CSS files only on those pages where the slider shortcode is actually used. } The first function registers the JavaScript file and the second function will output (print) all the other code, including the code for Flexslider 2, into the footer of your theme. Note the variable $add_my_scripts is used as a kind of filter. I will explain later how this filter works.

Custom post type and taxonomy I created a custom post type for all the different sliders I will later create for my website. The custom taxonomy is used to bundle these slides (posts) into one or more slideshows. } This shortcode accepts 3 attributes: a slider location, the animation type and the slideshow speed. These values are passed to the database query or the JavaScript snippet. Do you remember the variable $add_my_script I’ve mentioned before?

You can download and install Arconix FlexSlider using the built in WordPress plugin installer. If you download the plugin manually, make sure the files. Install WooThemes excellent responsive slider FlexSlider into your existing WordPress Theme with just a few simple steps.

This “global” variable is set right in the shortcode function and takes care about that all Flexslider files are only included on pages or posts where the slideshow shortcode is used! All HTML code for the slideshow is created by this function. Using the slideshow shortcode and final words This tutorial is not written for the WordPress beginner, but I’m also sure it’s not too complicated. Just insert a few slides via the new custom post type you have created. Add also a location (custom taxonomy) if needed.

Now you can use the three attributes to configure your slideshow a bit, for example the shortcode would be. [simpleslider location='homepage' animation='slide' slideshowspeed='5'] This shortcode will show all slides with custom taxonomy “homepage” (the slug) and show them in animation mode “slide” (you can also use “fade”) and the speed is set to 5 seconds. The attributes are not required and if you like to have more options you can add them to the function with the name print_my_spript(). This shows all available Flexslider 2 properties. The tutorial code doesn’t have some special style for the slideshow. If you like to use the same style as I used for my demo, copy/paste this CSS code into your theme’s stylesheet.

HI there, this is great. I am using this for a custom theme build.

I just have a couple of questions. First i would like to be able to add a separate slider for the home page, which i will then call on front-page.php. What do you think is the best way to go about this? 1) creating a new custom post type that is just for the home page slider (obviously changing function names)? Would this be best?

2) creating slider categories instead of custom taxonomy? Diptrace Full Version Serial Keys. 3) any other ways that would be best? I have previously created custom post categories and am familiar with how to call things and close loops properly with WPQuery (i.e. Best practices) thanks so much for your code.

Installation Installing TC flexslider is easy like a regular WordPress plugin. Here goes the step by step Guide to Install TC flexslider plugin: Install Plugin using WordPress Admin Panel Search Option • In your Admin, go to menu Plugins >Add New • Search TC flexslider • Click to install • Activate the plugin • TC flexslider post type will show below POSTS.