Plugin Files

Check File Integrity

Installing Plugin

This plugin should be installed as a normal WordPress would using WordPress Plugin Uploader.

WordPress Uploader

User Guide

How to use the Slick Basic Mode


  The Basic Slick shortcode structure, This shortcode is formatted for easy viewing,
  when implemented please remove the newline and whitespace to make it a valid
  shortcode string recognized by WordPress.

  [slickwrapper
    slick___accessibility="true|false" 
    slick___autoplay="true|false" 
    slick___centermode="true|false" 
    slick___draggable="true|false" 
    slick___fade="true|false" 
    slick___pauseonhover="true|false" 
    slick___infinite="true|false" 
    slick___swipe="true|false" 
    slick___touchmove="true|false" 
    slick___vertical="true|false"  
    slick___cssease="ease|ease-in|ease-out|ease-in-out" 
    slick___easing="swing|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|..." 
    slick___autoplayspeed="Number in miliseconds" 
    slick___centerpadding="xxpx" 
    slick___slidestoshow="number" 
    slick___slidestoscroll="number" 
    slick___speed="number in miliseconds" 
    slick___touchthreshold="number" 
    slick___variablewidth="true|false" 
    slick___equalheight="true|false"
    slick___dots="true|false"
    slick___arrows="true|false"
    slick___grids___columns___mobile="X"
    slick___grids___columns___tablet="X"
    slick___grids___columns___small="X"
    slick___grids___columns___large="X"
    ]
 
     [slickinner]
       content with shortcodes, you can inject other shortcodes or text content here.
     [/slickinner]
 
  [/slickwrapper]
          

How to use the Slick Simple Mode


  The Simple Slick shortcode structure, This shortcode is formatted for easy viewing,
  when implemented please remove the newline and whitespace to make it a valid
  shortcode string recognized by WordPress.

  The shortcode will use advanced query args using decoded url format or json format
  it is NOT recommended to build this shortcode manually, please use visual composer
  plugin to build the shortcode.

  [slicksimple
    queryargs="{json of valid WP_Query arguments}"
    filter___taxonomy="taxonomy name for the filter elements"
    slick___accessibility="true|false" 
    slick___autoplay="true|false" 
    slick___centermode="true|false" 
    slick___draggable="true|false" 
    slick___fade="true|false" 
    slick___pauseonhover="true|false" 
    slick___infinite="true|false" 
    slick___swipe="true|false" 
    slick___touchmove="true|false" 
    slick___vertical="true|false"  
    slick___cssease="ease|ease-in|ease-out|ease-in-out" 
    slick___easing="swing|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|..." 
    slick___autoplayspeed="Number in miliseconds" 
    slick___centerpadding="xxpx" 
    slick___slidestoshow="number" 
    slick___slidestoscroll="number" 
    slick___speed="number in miliseconds" 
    slick___touchthreshold="number" 
    slick___variablewidth="true|false" 
    slick___equalheight="true|false"
    slick___dots="true|false"
    slick___arrows="true|false"
    slick___grids___columns___mobile="X"
    slick___grids___columns___tablet="X"
    slick___grids___columns___small="X"
    slick___grids___columns___large="X"
    template___item="the template name for the slick items"
    template___empty="the template name where no slick item found"
    ]
 
          

How to use the Slick Advanced Mode


  The Advanced Slick shortcode structure, This shortcode is formatted for easy viewing,
  when implemented please remove the newline and whitespace to make it a valid
  shortcode string recognized by WordPress.

  The shortcode will use advanced query args using decoded url format or json format
  it is NOT recommended to build this shortcode manually, please use visual composer
  plugin to build the shortcode.

  [slickcarousel
    queryargs="{json of valid WP_Query arguments}"
    filter___taxonomy="taxonomy name for the filter elements"
    slick___accessibility="true|false" 
    slick___autoplay="true|false" 
    slick___centermode="true|false" 
    slick___draggable="true|false" 
    slick___fade="true|false" 
    slick___pauseonhover="true|false" 
    slick___infinite="true|false" 
    slick___swipe="true|false" 
    slick___touchmove="true|false" 
    slick___vertical="true|false"  
    slick___cssease="ease|ease-in|ease-out|ease-in-out" 
    slick___easing="swing|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|..." 
    slick___autoplayspeed="Number in miliseconds" 
    slick___centerpadding="xxpx" 
    slick___slidestoshow="number" 
    slick___slidestoscroll="number" 
    slick___speed="number in miliseconds" 
    slick___touchthreshold="number" 
    slick___variablewidth="true|false" 
    slick___equalheight="true|false"
    slick___grids___columns___mobile="X"
    slick___grids___columns___tablet="X"
    slick___grids___columns___small="X"
    slick___grids___columns___large="X"
    ]
 
    [slickfilter
       all="text for all button"
       ajax___ajax-loading-text="some text for ajax notice"
    ]
 
    [slickprev]
 
    [slickquery
       template___item="the template name for the slick items"
       template___empty="the template name where no slick item found"
    ]
 
    [slickthumbnail
      template___item="the template name for the slick items"
      template___empty="the template name where no slick item found"
      slick___vertical="true|false"
      grids___columns___mobile="x"
      grids___columns___tablet="x"
      grids___columns___medium="x"
      grids___columns___large="x"]
 
    [/slickthumbnail]
 
    [slicknext]
 
    [slickpager]
 
  [/slickcarousel]

          

Themer Guide

Overriding Plugin Templates

You can override all templates found in victheme_slick/templates folder by creating an new folder with this structure templates/vtslick/ in the root of your theme.

Then copy the templates files that you want to override from victheme_slick/templates folder into the newly created folder in the {your_theme}/templates/slick/

Afterwards you will need to visit http://yoursite.com/wp-admin/admin.php?page=vtcore-configuration and click on the clear cache button to refresh the core template cached folder.

When overridden, the plugin will use the overridden file instead of the original file. This is the best practice to override a template because the file won't get overwritten when you update the plugin.

The templates are designed to be used inside the VTCore_Wordpress_Element_WPCarousel objects provided by victheme_core plugin, do not include them using a normal WPLoop as it will cause fatal error.

Overriding Plugin Assets

You can override any of the VicTheme Slick or Vicheme Core plugins default CSS and Javascript assets by registering a new assets to replace the old assets.

For example, to override the slick-front.css which is bundled inside the slick-front assets you can do the following steps :

Step One - Registering theme assets folder

Create a new folder called /assets/slick in your theme root folder. The plugin will autoregister the folder to victheme assets factory when it exists. @see victheme_slick.php for the registration function.

Step Two - Copy The Old Assets Folder Into New one

Copy the old assets folder (in this case is victheme_slick/assets/slick-front) into the newly created folder at {theme_path}/assets .

Notice that the folder name will be the assets name.

Step Three - Edit The assets

Edit the copied assets to match your customization.

Now whenever plugin / themes called the core assets factory to load the assets file, the factory will load your overridden assets instead of the original one.

Creating New Slick Item Style

What is slick item style?

The slick item file is a PHP template file where you can use to define the inner markup used when displaying the slick carousel.

The template is designed to be like a normal WordPress loop item template, where the global $post is available for you to to manipulate and it is used inside a normal WordPress loop.

The only differences that the template file is called inside the VTCore_Wordpress_Element_WpCarousel object so you can access the object via $this to retrieve the customization parameter set via the GUI.

What kind of template needed?

The slick style normally must have the main styling that will be used when slick displaying the items, an empty template that will be used when no items found and optionally thumb template which will be used when user choose to use thumbnail as the carousel pager.

How to register the template?

To register the template you must invoke hook filter vtcore_slick_register_template_items to register the main styling and / or vtcore_slick_register_template_empty to register the empty state template styling and / or vtcore_slick_register_template_thumb_items to register the thumbnail template for pager.

Example on creating a different main styling

In this example we are going to create a very basic styling that only display image and we are going to call this template slick-image,

First we will create a new slick-image.php file in the {theme}/templates/slick/slick-image.php. then we will fill in the newly created file with these codes :

<?php
/**
 * Simple example template to display only image
 *
 * Must be used inside VTCore_Wordpress_Elements_WPCarousel.
 *
 * @author jason.xie@victheme.com
 */

  // Add extra class to the main wrapper
  if (is_a($this, 'VTCore_Wordpress_Element_WPCarousel')) {
    $this->addClass('slick-simple-template-wrapper');
  }

  // Load additional css or javascript for this template
  // use only.
  VTCore_Wordpress_Utility::loadAsset('slick-simple-front');


  // Configure the correct classes
  $classes = array(
    'slick-post-teasers',
    'slick-simple-post-teasers',
    'slick-simple-template',
    'slick-simple-item-' . $post->post_delta,
    'text-center',
    ($post->post_delta % 2) ? 'odd' : 'even',
  );
?>


<div id="slick-simple-<?php echo esc_attr($post->ID); ?>" <?php post_class($classes); ?>>

  <?php if (has_post_thumbnail()) : ?>
    <a class="slick-post-thumbnail-link"
       href="<?php esc_url(the_permalink()); ?>"
       alt="<?php echo esc_attr(get_the_title()); ?>">
      <figure class="slick-post-thumbnail">
        <?php echo get_the_post_thumbnail((int) $post->ID, array('120', '120'), true); ?>
      </figure>
    </a>
  <?php endif; ?>

</div>

Then we will need to register the template to the plugin, we can do that by adding these codes to theme functions.php :

add_filter('vtcore_slick_register_template_items', 'vtcore_add_slick_template');
function vtcore_add_slick_template($templates) {
  $templates['slick-simple.php'] = __('My new custom slick', 'mytheme_slug_name');
  return $templates;
}

Now we register the custom assets as defined in our new template, we can do that by creating a new folder with these structure :

{my_themes}/assets/slick-simple

{my_themes}/assets/slick-simple/css/slick-simple.css - Put the css rules here

{my_themes}/assets/slick-simple/js/slick-simple.js - Put the js rules here (optional)

Then visit the victheme core plugin GUI and clear the core cache.

Credits

Credits

Thank you for the plugins authors that made this plugin possible

  • Javascript

    • Slick Carousel - Ken Wheeler