Full plugin for slider

class-ie-slider.php

<?php
/**
 * Instantiate the IE_Slider instance
 *
 * @since IE_Slider 1.0
 */
class IE_Slider {

	/**
	 * Term ID.
	 *
	 * @static
	 * @since 1.2
	 * @var string
	 */
	private $term = null;

	/**
	 * Instance handle.
	 *
	 * @static
	 * @since 1.2
	 * @var string
	 */
	private static $instance = null;

	/**
	 * Constructor, actually contains nothing.
	 *
	 * @access public
	 * @return void
	 */
	public function __construct() {
	}

	/**
	 * Instance initiator, runs setup etc.
	 *
	 * @static
	 * @access public
	 * @return self
	 */
	public static function instance() {
		if ( ! is_a( self::$instance, __CLASS__ ) ) {
			self::$instance = new self();
			self::$instance->setup();
		}

		return self::$instance;
	}

	/**
	 * Runs things that would normally be in __construct
	 *
	 * @access private
	 * @return void
	 */
	public function setup() {

		add_filter( 'rwmb_meta_boxes', array( $this, 'ie_slideshow_fields' ) );
		add_action( 'wp_enqueue_scripts', array( $this, 'ie_slider_css_js' ) );
		add_action( 'admin_enqueue_scripts', array( $this, 'ie_slider_admin_css' ) );
		add_filter( 'rwmb_meta_boxes', array( $this, 'ie_slideshow_settings_fields' ), 1, 1 );
		add_filter( 'mb_settings_pages', array( $this, 'ie_slideshow_settings' ), 1, 1 );
		add_shortcode( 'ie-slider', array( $this, 'ie_slider_shortcode' ) );
	}

	public function ie_slideshow_settings_fields( $meta_boxes ) {
		$prefix = 'ie-slider-';

		$meta_boxes[] = array(
			'title'          => __( 'Slider Settings Fields', 'ie-slider' ),
			'id'             => 'slider-settings-fields',
			'settings_pages' => array( 'ie-slider-settings' ),
			'fields'         => array(
				array(
					'name' => __( 'Text Box Color', 'ie-slider' ),
					'id'   => $prefix . 'text_box_color',
					'type' => 'color',
				),
				array(
					'name'   => __( 'Header Size (px)', 'ie-slider' ),
					'id'     => $prefix . 'header_size',
					'type'   => 'number',
					'size'   => 4,
					'append' => 'px',
				),
				array(
					'name'   => __( 'Caption Size (px)', 'ie-slider' ),
					'id'     => $prefix . 'caption_size',
					'type'   => 'number',
					'size'   => 4,
					'append' => 'px',
				),
				array(
					'name'              => __( 'Caption Italics', 'ie-slider' ),
					'id'                => $prefix . 'caption_italics',
					'type'              => 'checkbox',
					'label_description' => __( 'Yes', 'ie-slider' ),
				),
				array(
					'name'   => __( 'Content Size (px)', 'ie-slider' ),
					'id'     => $prefix . 'content_size',
					'type'   => 'number',
					'append' => 'px',
				),
				array(
					'name'          => __( 'Arrow Background Color', 'ie-slider' ),
					'id'            => $prefix . 'arrow_background_color',
					'type'          => 'color',
					'alpha_channel' => true,
				),
				array(
					'name' => __( 'Arrow Circle Color', 'ie-slider' ),
					'id'   => $prefix . 'arrow_circle_color',
					'type' => 'color',
				),
			),
		);

		return $meta_boxes;
	}

	public function ie_slideshow_fields( $meta_boxes ) {
		$prefix = 'ie-slider-';

		$meta_boxes[] = array(
			'title'  => __( 'IE Slideshow', 'ie-slider' ),
			'id'     => 'ie-slideshow',
			'closed' => true,
			'fields' => array(
				array(
					'name'        => __( 'Sliders', 'ie-slider' ),
					'id'          => $prefix . 'sliders',
					'type'        => 'group',
					'collapsible' => true,
					'group_title' => 'Shortcode: [ie-slider id=\'{#}\']',
					'clone'       => true,
					'add_button'  => __( 'Add More Sliders', 'ie-slider' ),
					'fields'      => array(
						array(
							'name'              => __( 'Slider', 'ie-slider' ),
							'id'                => $prefix . 'slider',
							'type'              => 'group',
							'label_description' => __( 'Copy the shortcode above and paste it where you want to see the slider in your content above.', 'ie-slider' ),
							'collapsible'       => true,
							'save_state'        => true,
							'group_title'       => 'Slide {#}',
							'clone'             => true,
							'sort_clone'        => true,
							'add_button'        => __( 'Add Another Slide', 'ie-slider' ),
							'fields'            => array(
								array(
									'name' => __( 'Title', 'ie-slider' ),
									'id'   => $prefix . 'title',
									'type' => 'text',
								),
								array(
									'name'             => __( 'Image', 'ie-slider' ),
									'id'               => $prefix . 'image',
									'type'             => 'image_advanced',
									'max_file_uploads' => 1,
									'max_status'       => false,
								),
								array(
									'name'    => __( 'Description', 'ie-slider' ),
									'id'      => $prefix . 'description',
									'type'    => 'wysiwyg',
									'options' => array(
										'media_buttons' => false,
										'textarea_rows' => 6,
									),
								),
							),
						),
					),
				),
			),
		);

		return $meta_boxes;
	}

	public function ie_slideshow_settings( $settings_pages ) {
		$settings_pages[] = array(
			'menu_title'      => __( 'IE Slider Settings', 'ie-slider' ),
			'id'              => 'ie-slider-settings',
			'position'        => 25,
			'style'           => 'no-boxes',
			'columns'         => 1,
			'customizer'      => true,
			'customizer_only' => true,
			'icon_url'        => 'dashicons-format-gallery',
		);

		return $settings_pages;
	}

	public function ie_slider_css_js() {
		$css_version = date( 'ymd-Gis', filemtime( plugin_dir_path( __FILE__ ) . '../css/ie-slider.css' ) );
		$js_version  = date( 'ymd-Gis', filemtime( plugin_dir_path( __FILE__ ) . '../js/ie-slider.js' ) );

		wp_enqueue_style( 'slick', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css', array(), '1.8.1', false );
		wp_enqueue_style( 'slick-theme', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css', array(), '1.8.1', false );
		wp_enqueue_style( 'ie-slider', esc_url( plugin_dir_url( __DIR__ ) . 'css/ie-slider.css' ), array(), $css_version, false );
		wp_enqueue_script( 'ie-slider', esc_url( plugin_dir_url( __DIR__ ) . 'js/ie-slider.js' ), array(), $js_version, array( 'in_footer' => true ) );
		wp_enqueue_script( 'slick', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array( 'jquery' ), '1.8.1', array( 'in_footer' => false ) );
	}

	/**
	 * Enqueue admin css
	 *
	 * @access public
	 * @return void
	 */
	public function ie_slider_admin_css() {

		global $pagenow;

		if ( $pagenow === 'post.php' || $pagenow === 'post-new.php' ) {
			$css_version = date( 'ymd-Gis', filemtime( plugin_dir_path( __FILE__ ) . '../css/ie-slider-admin.css' ) );
			wp_enqueue_style( 'ie-slider-admin', esc_url( plugin_dir_url( __DIR__ ) . 'css/ie-slider-admin.css' ), array(), $css_version, false );
		}
	}

	/**
	 * Render CSS from the customizer
	 *
	 * @access public
	 * @return string
	 */
	public function ie_slider_css( $slider_number ) {

		if ( 1 !== $slider_number ) {
			return;
		}

		$box_background   = rwmb_meta( 'ie-slider-text_box_color', array( 'object_type' => 'setting' ), 'ie-slider-settings' );
		$header           = rwmb_meta( 'ie-slider-header_size', array( 'object_type' => 'setting' ), 'ie-slider-settings' );
		$cite             = rwmb_meta( 'ie-slider-caption_size', array( 'object_type' => 'setting' ), 'ie-slider-settings' );
		$cite_italics     = rwmb_meta( 'ie-slider-caption_italics', array( 'object_type' => 'setting' ), 'ie-slider-settings' );
		$content          = rwmb_meta( 'ie-slider-content_size', array( 'object_type' => 'setting' ), 'ie-slider-settings' );
		$arrow_background = rwmb_meta( 'ie-slider-arrow_background_color', array( 'object_type' => 'setting' ), 'ie-slider-settings' );
		$arrow_circle     = rwmb_meta( 'ie-slider-arrow_circle_color', array( 'object_type' => 'setting' ), 'ie-slider-settings' );

		ob_start()
		?>
			<style type="text/css">
			.slick-prev::before, .slick-next::before {
			<?php
			if ( ! empty( $arrow_circle ) ) {
				?>
				color: <?php esc_html_e( $arrow_circle ); ?>;
				<?php
			}
			?>
			}

			.ie-slide {
			<?php
			if ( ! empty( $box_background ) ) {
				?>
				background: <?php esc_html_e( $box_background ); ?>;
				<?php
			}
			?>
			}

			.ie-slider-body h2 {
			<?php
			if ( ! empty( $header ) ) {
				?>
				font-size: <?php echo intval( $header ); ?>px;
				<?php
			}
			?>
			}

			.ie-slide cite {
			<?php
			if ( ! empty( $cite ) ) {
				?>
				font-size: <?php echo intval( $cite ); ?>px;
				<?php
			}
			?>
			<?php
			if ( ! empty( $cite_italics ) ) {
				?>
				font-style: italic;
				<?php
			}
			?>
			}

			.ie-slider-description {
			<?php
			if ( ! empty( $content ) ) {
				?>
				font-size: <?php echo intval( $content ); ?>px;
				<?php
			}
			?>
			}

			.slick-prev, .slick-next {
			<?php
			if ( ! empty( $arrow_background ) ) {
				?>
				background: <?php esc_html_e( $arrow_background ); ?>;
				<?php
			}
			?>
			}
			.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
			<?php
			if ( ! empty( $arrow_background ) ) {
				?>
				background: <?php esc_html_e( $arrow_background ); ?>;
				<?php
			}
			?>
			}
			</style>
			<?php

			$styles = ob_get_contents();

			ob_end_clean();

			return $styles;
	}

	/**
	 * Render the shortcode.
	 *
	 * @access public
	 * @return string $output
	 */
	public function ie_slider_shortcode( $atts ) {

		$output = '';

		if ( ! is_admin() && is_numeric( $atts['id'] ) ) {
			$sliders = rwmb_meta( 'ie-slider-sliders' );
		}

		if ( ! empty( $sliders ) ) {

			$key = $atts['id'] - 1;

			$output .= $this->ie_slider_css( intval( $atts['id'] ) );

			$var_prefix = 'ie-slider-';

			$output .= '<div id="ie-slider" class="slickshow">' . "\n";

			foreach ( $sliders[ $key ] as $slider ) {

				foreach ( $slider as $slide ) {

					$image_id = $slide['ie-slider-image'][0];

					$output     .= '<div class="ie-slide">' . "\n";
					$output     .= wp_get_attachment_image( $image_id, 'large' ) . "\n";
						$output .= '<div class="' . $var_prefix . 'body">' . "\n";
						$output .= '<h2>' . esc_html( $slide['ie-slider-title'] ) . '</h2>' . "\n";
						$output .= '<cite>' . esc_html( wp_get_attachment_caption( $image_id ) ) . '</cite>' . "\n";
						$output .= '<div class="' . $var_prefix . 'description">' . wpautop( $slide['ie-slider-description'] ) . '</div>' . "\n";
						$output .= '</div>' . "\n";
					$output     .= '</div>' . "\n";
				}
			}

			$output .= '</div>' . "\n";

			return $output;
		}
	}

}