LemonSliderShortcode.php

<?php
/*
Plugin Name: 	Lemon Slider Shortcode
Plugin URI: 	http://www.lemonapps.co.uk/plugins
Description: 	Lemon Slider Shortcode brings you a slide via a shortcode, with several options.
Author: 		Lemon Apps
Version 		1.0
Author URI: 	http://www.lemonapps.co.uk/
License:		GPL2

Copyright 2016 Lemon Plugin

Lemon Plugin is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
any later version.
 
Lemon Plugin is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License
along with Lemon Plugin. If not, see {URI to Plugin License}.
*/
/*----------------------------------------------------------------------------------------------------

Updates:

1.0 - Initial plugin code and functions, currently functionality:
	
	- Custom Styles * Script Added to the header, will narrow down to only the pages that use the plugin.
	- Picture slider generated by the shortcode [lemonslider], will be adding more to this.
	- Added several slide options:
		-	title
        -	description
        -	images
        -	toshow
        -	autoplay
        -	arrows
        -	dots
	- All fully working :) 
	
	- Currently only supports one shortcode slider per page.

----------------------------------------------------------------------------------------------------*/

// ADD PLUGIN STYLES TO ONLY PAGES THAT ARE USING THE PLUGIN

function lemon_styles() {
    wp_enqueue_style('LemonStyles', plugins_url('/assets/lemon_styles.css', __FILE__));
}

function lemon_scripts() {
	wp_enqueue_script('LemonScripts', plugins_url('/assets/lemon_scripts.js', __FILE__), array('jquery'), false, true);
}

function safely_add_stylesheet_to_admin( $page ) {
    wp_enqueue_style( 'prefix-style', plugins_url('/assets/lemon_admin.css', __FILE__) );
}

add_action('wp_enqueue_scripts', 'lemon_styles');
add_action('wp_enqueue_scripts', 'lemon_scripts');
add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );


// ADD PLUGIN SETTINGS PAGE	
 
function lemon_custom_admin_menu() {
    add_options_page(
        'Lemon Shortcode Settings',
        'Lemon Shortcode Settings',
        'manage_options',
        'lemon-plugin',
        'lemon_options_page'
    );
    //call register settings function
	//add_action( 'admin_init', 'register_my_cool_plugin_settings' );
}

/*
function register_my_cool_plugin_settings() {
	//register our settings
	register_setting( 'lemon-plugin-settings-group', 'autoplay' );
	register_setting( 'lemon-plugin-settings-group', 'arrows' );
	register_setting( 'lemon-plugin-settings-group', 'toshow' );
}
*/

add_action( 'admin_menu', 'lemon_custom_admin_menu' );

function lemon_options_page() {
	?>
	    <div class="wrap lemon_settings">
	    <h1><i class="fa fa-lemon-o" style="color: #EEEE22;" aria-hidden="true"></i> Lemon Slider Shortcode Settings</h1>
	    <p>The Lemon Slider Shortcode is shortcode that you can place in a page or post that displays an image slider.</p>
	    <hr>
	    <h4><code>[lemonslider]</code> shortcode settings and options</h4>
	    
	    <table class="lemon_info">
		    <tr><th>Shortcode Options</th><th>Description</th><th>Default Values</th><th>Style Class</th></tr>
		    <tr>
			    <td width="150px;"><b><code>title</code></b></td><td>What you want your slider to be called.</td><td></td><td><code>.lslider-title</code></td>
		    </tr>
		    <tr>
			    <td><b><code>description</code></b></td><td>A short description about your slider.</td><td></td><td><code>.lslider-subtitle</code></td>
		    </tr>
		    <tr>
			    <td><b><code>images</code></b></td><td>The IDs of the images you want to put in the slider. see below for help.</td><td></td><td><code>.lsider-img</code></td>
		    </tr>
		     <tr>
			    <td><b><code>toshow</code></b></td><td>How many images you want to see at a time</td><td><code>true/false</code></td>
		    </tr>
		     <tr>
			    <td><b><code>autoplay</code></b></td><td>Auto play the slider ? </td><td><code>true/false</code></td>
		    </tr>
		    <tr>
			    <td><b><code>arrows</code></b></td><td>Navigation arrows ? (true/false)</td><td><code>true/false</code></td>
		    </tr>
		     <tr>
			    <td><b><code>dots</code></b></td><td>Navigation dots ? (true/false)</td><td><code>true/false</code></td>
		    </tr>
	    </table>
		
		<p>If your having trouble locating your image ID head to <a href="/wp-admin/upload.php">Media Library</a> --> Select any image, and at the top in the address bar it will say <code>upload.php?item=46</code> in this case <code>46</code> is the image ID but it will be different per image.
	    <p>The completed shortcode is as follows:</p>
	    <p><b>Indented:</b></p>
	    <pre>
		<code>
[lemonslider 
	title="My Slider Title" 
	description="My short slider description, see my latest products below." 
	images="46,43,37,38, 40, 39, 35, 36" 
	toshow="4" 
	autoplay="false" 
	arrows="true" 
	dots="false"
]</code>
	    </pre>
	    <p><b>Not Indented</b></p>
	    <p><code>[lemonslider title="My Slider Title" description="My short slider description, see my latest products below." images="46,43,37,38, 40, 39, 35, 36" toshow="4" autoplay="false" arrows="true" dots="false"]</code></p>
	    <p>Paste the code into your content area on a page or post after you've added your images and options</p>
	    <p>And the result is as follows:</p>
	    <img src="<?php echo plugins_url('lemonplugin/assets/working-example.png');?>" alt="working-example" style="width: 100%; max-width: 600px; border: solid #F1F1F1 2px;" />
	   
	   <!--
	    <p>Beta</p> 
	    <form method="post" action="options.php">
	        <?php settings_fields("lemon-plugin-settings-group"); ?>
	        <?php do_settings_sections("lemon-plugin-settings-group"); ?>  
	         <table class="form-table lemon_slider_settings">
		        <tr valign="top">
		        <th scope="row">Autoplay</th>
		        <td><input type="text" name="autoplay" value="<?php echo $autoplay; ?>" /></td>
		        </tr>
		         
		        <tr valign="top">
		        <th scope="row">Show / Hide Arrows</th>
		        <td><input type="text" name="arrows" value="<?php echo $arrows; ?>" /></td>
		        </tr>
		        
		        <tr valign="top">
		        <th scope="row">Images To Show</th>
		        <td><input type="text" name="toshow" value="<?php echo $toshow; ?>" /></td>
		        </tr>
		    </table>
	        <?php submit_button(); ?>          
	    </form>
	   </div>
	   /-->
	<?php
}

// LEMON SLIDER SHORTCODE

function lemon_slider( $atts ){
    $a = shortcode_atts( array(
        'title'	 => 'title',
        'description' => 'descirption',
        'images' => '44',
        'toshow' => '4',
        'autoplay' => 'true',
        'arrows' => 'true',
        'dots' => 'true'
    ), $atts );

    $SlImages = $a['images'];
    $arrlength = count($SlImages);
	
	
	$toshow = $a['toshow'];
	$autoplay = $a['autoplay'];
	$arrows = $a['arrows'];
	$dots = $a['dots'];
	
	
    // SPLIT IMAGE PARAMETERS BY A COMMA
    $SlImages = explode(",", $a['images']);

    // BUILD SLIDER TEMPLATE
    $ret = "";
	    $ret .= "<div class='slider-wrapper'>";
	    	$ret .= "<h4 class='lslider-title'>" . $a['title'] . "</h4>";
	    	$ret .= "<p class='lslider-subtitle'>" . $a['description'] . "</p>";
		    $ret .= "<div class='slider lemonslider-items'>";
		
		    foreach ($SlImages as $image) {
		         $image_attributes = wp_get_attachment_image_src( $attachment_id = $image);
		         // add each image tag to the return string
		         $ret .= ('<img class="lsider-img" src=' . $image_attributes[0] . ' width=' . $image_attributes[1] . ' height=' . $image_attributes[2] . ' />');
		    }
		
		    // return the result
		    $ret .= "</div>";
	    $ret .= "</div>";
	   
		$ret .= '<script type="text/javascript">
        jQuery(function ($){
	        $(document).ready(function(){
		        $(".lemonslider-items").lemon({
				  slidesToShow: ' . $toshow . ',slidesToScroll: 1,autoplay: ' . $autoplay . ',arrows: ' . $arrows . ',dots: ' . $dots . ',autoplaySpeed: 2000,
			   });
		   });
	   });
        </script>';
		
	    
    return $ret;
    
}
add_shortcode( 'lemonslider', 'lemon_slider' );
?>