Advanced usage - wp slick slider

templating

Templating allows complete control over the output of each slide. But it is an advanced subject, so if you aren't comfortable editing some code, please leave this to a professional.

To activate templating, simply create a folder called wpss in your theme folder.

There are 4 types of slides available, these can be fully controlled using templates, you can even edit the output for a slide type of a specific slide.

The easiest way to get your head around the templating would be to simply copy the files in the templates directory from the plugin directly to the wpss directory in your theme so you can edit them at will without losing the updates when the plugin is updated.

examples

Adding some text to the full width image template

YOURTHEME/wpss/full-width-text.php

<div class="wpss_content_full">
    <h4><?php the_title(); ?></h4>
    <?php wpss_the_content(); ?>
    <p>
        This is some text that will show up after the content on every slide.
    </p>
</div>

Changing the image size and remove timthumb on the full width image template

YOURTHEME/wpss/full-width-image.php

<?php
//Get The ID of the post thumbnail
$img_id = get_post_thumbnail_id( $post->ID );

//Then pull the source of the fullsize image
$imgsrc = wp_get_attachment_image_src( $img_id , 'my-new-size' ); //Note the new image size!
$imgsrc = $imgsrc[0];

$img = '<img src="' . esc_attr( $imgsrc[0] ) . '" alt="" />';
?>
<div class="wpss_img full">
    <?php echo $img; ?>
</div>

Modifying the full width text template for a specific slider.

This will modidy the template ONLY for the slider with a slug of slider_slug. replace that in your version with the slug of the slider you wish to modify.

YOURTHEME/wpss/slider_slug_full-width-text.php

<div class="wpss_content_full">
    <?php
    //Lets load in the post thumbnail
    if( has_post_thumbnail() ){
        echo '<div class="thumbnail">';
            the_post_thumbnail();
        echo '</div>';
    }
    ?>
    <h4><?php the_title(); ?></h4>
    <?php wpss_the_content(); ?>
</div>