Back to CodeFleet.net

Creating Your Own Template

Every website is unique. To address this issue Cyclone Slider 2 has a template system that allow developers to easily customize the slider appearance and behavior.

Since version 2.11.0, you can now create a template by creating a WordPress plugin.

Creating a custom template via WordPress plugin

  1. Start by choosing a name for your plugin. For this example, we'll name it "tcycle". It will be using tCycle, a minimalist image only slideshow.
  2. Create a directory inside /wp-content/plugins inside WP. The name should follow this standard: cyclone-slider-template-{name}. For our example its cyclone-slider-template-tcycle. This is our plugin directory.
  3. Inside cyclone-slider-template-tcycle create the main plugin file. Name it plugin.php.
  4. Open plugin.php in an editor or an IDE. Paste this code:
    <?php
    /*
    Plugin Name: Cyclone Slider Template: tCycle
    Version: 1.0
    Description: Creates a super light minimalist slideshow. Note: The only options supported are Transition Effects (Fade, Scroll Horizontally), Slide Delay, and Transition Speed. Other options will not function.
    Author: Nico Amarilla
    Author URI: http://www.codefleet.net/
    License: GPLv3
    License URI: https://www.gnu.org/licenses/gpl-3.0.html
    */
    
    add_filter( 'cycloneslider_template_list', 'cycloneslider_template_tcycle' );
    function cycloneslider_template_tcycle( $template_list ) {
    
        $template_list[ 'tcycle' ] = array(
            'name'          => 'tCycle',
            'path'          => realpath( plugin_dir_path( __FILE__ ) ),
            'url'           => plugin_dir_url( __FILE__ ),
            'supports'      => array(
                'image'
            ),
            'location_name' => 'plugin',
            'scripts'       => array(
                'tcycle.js'
            ),
            'styles'        => array()
        );
    
        return $template_list;
    }

    It is a WordPress plugin main file. On the top is the header information. Below the header info we add our template info by using the cycloneslider_template_list filter.

  5. Next create a file named slider.php and paste this code:
    <div class="tcycle"
         data-fx="<?php echo esc_attr( ($slider_settings['fx']=='scrollHorz') ? 'scroll' : 'fade' ); ?>"
         data-speed="<?php echo esc_attr( $slider_settings['speed'] ); ?>"
         data-timeout="<?php echo esc_attr( $slider_settings['timeout'] ); ?>"
    >
        <?php foreach($slides as $slide): ?>
        <img src="<?php echo $slide['image_url']; ?>" alt="<?php echo $slide['img_alt'];?>" title="<?php echo $slide['img_title'];?>" />
        <?php endforeach; ?>
    </div>
    This is the slider view file.
  6. Next add the tcycle.js

You can download the tCycle template here.