Creating Skins for the WordPress slider plugin

The WordPress slider plugin skin system is very simple If you have little coding knowledge and WordPress experience it’ll be easy to create your own skins for the plugin if you follow this guide.

Creating a Simple Skin for WP slider plugin

1. Create a directory “ssp_skins” in the “wp-content” folder.

2. Create a new directory  “simple_skin” in newly created “ssp_skins”  directory

3. Create a new file  “slider.php” in the “simple_skin” directory

Now edit the “slider.php” and add the code below into it and save it.

<?php
/**
Plugin Name: Simple Skin for WP slider
**/
?>
//CODE AFTER ME

The above code is part of the WP standard plugin header and the skin engine use the header to get the name of skin and then show that skin name in the select box of slider skin option or the first option in the slider options metabox.

 Create a new slider, add few slides to it , change the slider skin to “Simple  Skin for WP slider”, copy the slider shortcode, save the slider or create it and in the end insert the slider shortcode into a post or page and visit that page. You’ll find nothing like a slider on that page, because our slider.php file is without any code.

 The skin engine look for the slider.php file in the registered skin directory which in our case is simple_skin and provide the direct access to following variables. 

These are only 4 variables which are actually needed to create fully fledged skins and contains all  the not needed and needed data about the slider. I’ve created all my own major skins using these variables. To get more detailed information about these variables you can use the PHP function var_dump.

 Now its time to create a working slider skin. Paste the code below, into your slider.php file

<div id="slider_<?php echo $slider_id ?>">

<ul>

<?php foreach( $slides as $slide ): ?>

<li>

<img src="<?php echo $slide['image']['url'] ?>" />

</li>

<?php endforeach; ?>

</ul>

</div>

<script>

jQuery(function ($) {

id = "<?php echo esc_js( $slider_id ) ?>";

    options = <?php echo json_encode( $slider_settings ) ?>;

    slider_cont = $( '#slider_' + id );

    slider_cont.flexslider();

});

</script>

Insert the above code and then save the changes you made to the  slider.php and now visit the page where you had inserted the slider shortcode in the start of this tutorial. If everything is done correctly you’ll see a working slider there.

 I tried to make this guide as easy as I can but  basic familiarity with the WordPress, PHP and jQuery is required to fully understand the code in this guide. I hope the code is self explanatory if you have any questions feel free to contact me.

Download Sample Code

The post Creating Skins for the WordPress slider plugin appeared first on Muneeb.