How to Divas Slider Jquery Plugin Convert into WP Plugin

In this tune I am going to describe “How to Divas Slider  Jquery Plugin Convert into WP Plugin”. First of all wanna want to show Divas Slider Demo and my converted wordpress plugin Jeba Divas Slider. Now let’s start to describe how converted the plugin into wordpress plugin.

In instruction page given, to use the divas slider must need “divas_free_skin.css” and “jquery.divas-1.0.min.js” file and some Basic CSS (mandatory) which there are taken in “jeba-css.css” file. The three file taken into a folder name “js” in my plugin and called three file by a function name “plugin_function_jeba_slider” . like:

function plugin_function_jeba_slider() {
    wp_enqueue_script( 'jeba-js-d', plugins_url( '/js/jquery.divas-1.1.min.js', __FILE__ ), true);
    wp_enqueue_style( 'jeba-css-d', plugins_url( '/js/divas_free_skin.css', __FILE__ ));
    wp_enqueue_style( 'jebacss-d', plugins_url( '/js/jeba-css.css', __FILE__ ));
}

add_action('init','plugin_function_jeba_slider');

Now the HTML code which given in the divas slider instruction are dynamic in wordpress by using a shortcode name “[jeba_pslider]”

function jeba_slider_shortcode_d($atts){
	extract( shortcode_atts( array(
		'category' => '',
		'post_type' => 'jeba-eitems',
		'count' => '5',
	), $atts) );

    $q = new WP_Query(
        array('posts_per_page' => $count, 'post_type' => $post_type, 'category_name' => $category)
        );		

		$plugins_url = plugins_url();

	$list = '  		<section id="slider_wrapper">
			<div id="slider" class="divas-slider">
				<ul class="divas-slide-container">';
	while($q->have_posts()) : $q->the_post();
		$idd = get_the_ID();
		$jeba_img_large = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large-portfolio' );

		$list .= '

			 <li class="divas-slide"><img src="'.plugins_url().'/js/images/placeholder.gif" alt="" data-src="'.$jeba_img_large[0].'" data-title="<h2>'.get_the_title().'</h2><p>'.get_the_excerpt().'</p>" /></li>

		';
	endwhile;
	$list.= '</ul>
			    <div class="divas-navigation">
			        <span class="divas-prev">&nbsp;</span>
			        <span class="divas-next">&nbsp;</span>
			    </div>
                <div class="divas-controls">
                	<span class="divas-start"><i class="fa fa-play"></i></span>
			        <span class="divas-stop"><i class="fa fa-pause"></i></span>
                </div>
			</div>
		</section>';
	wp_reset_query();
	return $list;
}
add_shortcode('jeba_pslider', 'jeba_slider_shortcode_d');

In the “[jeba_pslider]” are also taken category, post_type and slide number support like “[jeba_pslider category=”” post_type=”” count=””]” Example: “[jeba_pslider category=”specific category name ” post_type=”specific post type name” count=”how many post want for sliding”]”

Now here is rest to use active jquery from instruction. The jquery also taken in a function, show below:

function jeba_script_slider_function () {?>
	<script type="text/javascript">
		jQuery(document).ready(function()
			{
				jQuery("#slider").divas({
					slideTransitionClass: "divas-slide-transition-left",
					titleTransitionClass: "divas-title-transition-left",
					titleTransitionParameter: "left",
					titleTransitionStartValue: "-999px",
					titleTransitionStopValue: "0px",
					wingsOverlayColor: "rgba(0,0,0,0.6)",
					start: "manual",
					slideInterval: 4000
				});
			});
	</script>

<?php
}
add_action('wp_head','jeba_script_slider_function');

Now everything is ok in this plugin ready for use.
In additionally use some plugin information like name, author, tag etc. and a function for wp_enqueue_script(‘jquery’); this all describe in our wordpress plugin quick start pack so not describe here. Here also register a custom post for the slider.