Themer Documentation

The information provided here is intended for user with minimal PHP knowledge and general knowledge on how to create a WordPress template.

You can override all templates found in victheme_slick/templates folder by creating an new folder with this structure templates/slick/ 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.

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.

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.