Make A Slider With FlexSlider – Part 1
Building a responsive slider with FlexSlider is a very straight forward process, they even provide clear examples on their website for different configurations and styles.
ACF Pro is a premium plugin, for one site usage the cost would be $25 AUD or $100 AUD for a developer license with unlimited site activations (these prices were accurate at the time of writing). ACF is a very powerful solution for building WordPress websites, and I would highly recommend its use generally and not only for this tutorial.
It should be also noted, that this method could be slightly more limiting in terms of different visual styles when compared to Revolution Slider’s “drag and drop” approach, but can be expanded by adding new classes and animations if required. In my opinion, it’s actually better to limit the styles of the slides to at least being similar as to keep the users focus in one common place – general opinion on this might differ I’m sure.
Firstly, install and activate ACF Pro. You can find out more on their website. Once installed, we can move on to adding the fields required for the slider.
In WP Admin, click Custom Fields on the left and the Add New at the top. Give the new field a name, FlexSlider will be fine if you can not think of anything.
Next, click Add Field to create a new section, then enter a name, again FlexSlider will be fine, the field label should auto-populate in lowercase, just leave this as it is.
You can now select the Field Type, in this case we are going to use Repeater.
Now the fields can be added. Under Sub Fields, click Add Field and add the following (the Field Name will auto populate from the Field Label, just leave as default);
Field Label: Image Field Type: Image Return Value: Image ID Field Label: Title Field Type: Textarea New Lines: Automatically add <br> Field Label: Subtitle Field Type: Textarea New Lines: Automatically add <br> Field Label: Button Field Type: Text Field Label: URL Field Type: Url
With the fields created, we can now set some basic visual configuration. Below the fields, set the following (these are my preferences, you can of course set this how you like);
Layout: Block Button Label: Add Slide
Next we need to set where this custom field should appear. I’m going to set this to the front page only (this is assuming you have a template called Home Page, you may need to set this differently in your theme).
Click Publish in the top right hand corner once all these steps are complete.
You will now have a repeater on the desired page where you can add your FlexSlider information, I will skip filling this in as it is self explanatory (please do let me know if you have any issues).
Part 2 of this tutorial will be available soon.