Create WordPress Custom Slider Plugin

I THINK THIS WILL  HELP U

slider-plugin.php FILE

<?php

/*
Plugin Name: My Slider Plugin
Description: Simple implementation of a swiper slideshow into WordPress
Author: Mayank
Version: 1.0
*/
?>
<?php

function sp_init() {
$args = array(
‘public’ => true,
‘label’ => ‘Swiper Images’,
‘supports’ => array(
‘title’,
‘thumbnail’
)
);
register_post_type(‘sp_images’, $args);
}
add_action(‘init’, ‘sp_init’);

add_action(‘wp_print_scripts’, ‘sp_register_scripts’);
add_action(‘wp_print_styles’, ‘sp_register_styles’);

function sp_register_scripts() {
if (!is_admin()) {
// register
wp_register_script(‘sp_swiper-script’, plugins_url(‘js/idangerous.swiper-2.0.min.js’, __FILE__));
wp_register_script(‘sp_script’, plugins_url(‘js/jquery1.6.js’, __FILE__), array( ‘jquery’ ));
wp_register_script(‘sp_script’, plugins_url(‘script.js’, __FILE__));
// enqueue
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘sp_swiper-script’);
wp_enqueue_script(‘sp_script’);
}
}

function sp_widgets_init() {
register_widget(‘sp_Widget’);
}
function sp_register_styles() {
// register
wp_register_style(‘sp_styles’, plugins_url(‘js/swiper.css’, __FILE__));
//wp_register_style(‘np_styles_theme’, plugins_url(‘nivo-slider/themes/default/default.css’, __FILE__));

// enqueue
wp_enqueue_style(‘sp_styles’);
/* wp_enqueue_style(‘np_styles_theme’);*/
}

add_image_size(‘sp_widget’, 180, 100, true);
add_image_size(‘sp_function’, 600, 280, true);

add_theme_support( ‘post-thumbnails’ );

function sp_function($type=’sp_function’) {
$args = array(
‘post_type’ => ‘sp_images’,
‘posts_per_page’ => 5
);
$result = ‘<div class=”swiper-container clearfix”>’;
$result .= ‘<div class=”swiper-wrapper clearfix”>’;

//the loop
$loop = new WP_Query($args);
while ($loop->have_posts()) {
$result .= ‘<div class=”swiper-slide simple-bg-white”>’;
$loop->the_post();
$the_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $type);

$result .='<img title=”‘.get_the_title().'” src=”‘ . $the_url[0] . ‘” data-thumb=”‘ . $the_url[0] . ‘” alt=””/>’;
$result .= ‘</div>’;
}

$result .= ‘</div>’;

$result .='</div>’;
return $result;
}

add_shortcode(‘sp-shortcode’, ‘sp_function’);

add_action(‘widgets_init’, ‘sp_widgets_init’);

class sp_Widget extends WP_Widget {

public function __construct() {
parent::__construct(‘sp_Widget’, ‘Swiper Slideshow’, array(‘description’ => __(‘A Swiper Slideshow Widget’, ‘text_domain’)));
}

public function form($instance) {
if (isset($instance[‘title’])) {
$title = $instance[‘title’];
} else {
$title = __(‘Widget Slideshow’, ‘text_domain’);
}
?>
<p>
<label for=”<?php echo $this->get_field_id(‘title’); ?>”><?php _e(‘Title:’); ?></label>
<input class=”widefat” id=”<?php echo $this->get_field_id(‘title’); ?>” name=”<?php echo $this->get_field_name(‘title’); ?>” type=”text” value=”<?php echo esc_attr($title); ?>” />
</p>
<?php
}

public function update($new_instance, $old_instance) {
$instance = array();
$instance[‘title’] = strip_tags($new_instance[‘title’]);

return $instance;
}
public function widget($args, $instance) {
extract($args);
//the title
$title = apply_filters(‘widget_title’, $instance[‘title’]);
echo $before_widget;
if (!empty($title))
echo $before_title . $title . $after_title;
echo sp_function(‘sp_widget’);
echo $after_widget;
}

}

?>

THEN DOWNLOAD FROM GITHUB idangerous.swiper-2.0.min.js FILE AND swiper.css FILE AND

LINK TO slider-plugin.php FILE AS GIVEN ABOVE.DONT FORGET TO LINK LATEST

 jquery.js FILE.

THEN WRITE THIS SCRIPT IN UR PAGE TEMPLATE WHICH U R GOING TO USE

<script>

var mySwiper = new Swiper(‘.swiper-container’,{
mode:’horizontal’,
pagination: false,
slidesPerView:4,
loop: true,
calculateHeight: true
});

</script>

I THINK THIS LL HELP YOU 🙂

Advertisements

3 thoughts on “Create WordPress Custom Slider Plugin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s