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. Download 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.
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.
For the custom post type I use the set public to false to keep the slider posts out of the results from any search engine. I do the same for the custom taxonomy named slide-loc. For the post type, I have enabled only the fields I really need. That includes the custom field, which I use for the target URL behind each slide.
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:
|1||[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 in Php Laravel and if you like to have more options you can add them to the function with the name print_my_spript(). This page 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.