Title: slider in widget
Last modified: August 24, 2016

---

# slider in widget

 *  Resolved [Frykky](https://wordpress.org/support/users/frykky/)
 * (@frykky)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/)
 * Hi,
    i made a custom template and i have made a custom widget for display URIS
   slider.
 * In widgets.php i write a function that read a custom field where i saved a shortcode
   like [URIS id=719] and then he display it with this code:
 *     ```
       $post = get_queried_object();
           $fst_post_ngg = get_post_meta($post->ID, 'fst_post_gallery', true);
           echo '<div>';
           echo do_shortcode($fst_post_ngg);
           echo '</div>';
       ```
   
 * but it doesn’t display anything.
 * Result code is:
 *     ```
       <div>
       <script type="text/javascript">
       	jQuery( document ).ready(function( jQuery ) {
       		jQuery( '#example3_719' ).sliderPro({
       			width: 1000,
       			height: 500,
       			autoplay: false,
       			arrows: true,
       			buttons: true,
       			smallSize: 500,
       			mediumSize: 1000,
       			largeSize: 3000,
       			//fade: true,
       			thumbnailArrows: true,
       		});
       	});
       </script>
       <style>
       /* Example 3 */
       #example3_719 .sp-selected-thumbnail {
       	border: 4px solid #000;
       }
   
       /*
       #example3_ .title-in {
       	font-weight: bolder;
       	opacity: 0.7 !important;
       	font-size: 1.2em;
       }
   
       #example3_ .desc-in {
       	opacity: 0.7 !important;
       	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
       	font-size: 1em;
       }
       */
   
       #example3_719 .title-in {
       	color: <br />
       <b>Notice</b>:  Undefined variable: RISP_Slide_In_Title_Color in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>59</b><br />
        !important;
       	font-weight: bolder;
       	text-align: center;
       }
   
       #example3_719 .title-in-bg {
       	background: rgba(255, 255, 255, 0.7); !important;
       	white-space: unset !important;
       	max-width: 90%;
       	min-width: 40%;
       	transform: initial !important;
       	font-size: 14px !important;
       }
   
       #example3_719 .desc-in {
       	color: <br />
       <b>Notice</b>:  Undefined variable: RISP_Slide_In_Desc_Color in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>74</b><br />
        !important;
       	text-align: center;
       }
       #example3_719 .desc-in-bg {
       	background: rgba(<br />
       <b>Notice</b>:  Undefined variable: RISP_Slide_In_Desc_BG_Color in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>78</b><br />
       , <br />
       <b>Notice</b>:  Undefined variable: RISP_BG_Color_Opacity in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>78</b><br />
       ) !important;
       	white-space: unset !important;
       	width: 80% !important;
       	min-width: 30%;
       	transform: initial !important;
       	font-size: 13px !important;
       }
   
       @media (max-width: 640px) {
       	#example3_719 .hide-small-screen {
       		display: none;
       	}
       }
   
       @media (max-width: 860px) {
       	#example3_719 .sp-layer {
       		font-size: 18px;
       	}
   
       	#example3_719 .hide-medium-screen {
       		display: none;
       	}
       }
       </style>
       <h3 class="uris-slider-title"> </h3>
       <div class="slider-pro sp-horizontal sp-has-buttons" id="example3_719">
       	<!---- slides div start ---->
       	<div class="sp-slides">
       				<div class="sp-slide">
       			<img data-retina="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-large="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-medium="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-small="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-src="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" src="" class="sp-image">
   
       					</div>
       				<div class="sp-slide">
       			<img data-retina="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-large="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-medium="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-small="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-src="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" src="" class="sp-image">
   
       					</div>
       				<div class="sp-slide">
       			<img data-retina="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-large="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-medium="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-small="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-src="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" src="" class="sp-image">
   
       					</div>
   
       	</div>
   
       	<!---- slides div end ---->
       		<!-- slides thumbnails div end -->
   
       </div>
       	<div style="display:none">Ultimate Responsive Image Slider Plugin Powered By Weblizar</div>
       	</div>
       ```
   
 * but it doesn’t display any image
 * what i have to do?
    ty
 * [https://wordpress.org/plugins/ultimate-responsive-image-slider/](https://wordpress.org/plugins/ultimate-responsive-image-slider/)

Viewing 12 replies - 1 through 12 (of 12 total)

 *  [Weblizar – WordPress Themes & Plugin](https://wordpress.org/support/users/weblizar/)
 * (@weblizar)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6033798)
 * Hi Frykky,
 * Great you made it.
 * I think required libraries files are not loading with the widget file.
 * Refer that [thread](https://wordpress.org/support/topic/adding-slider-to-php-template?replies=4#post-6836742)
   and comment out the Shortcode Detect function, after that this will for perfectly.
 * Let me know if any assistance required.
 * Thanks
    Weblizar
 *  Thread Starter [Frykky](https://wordpress.org/support/users/frykky/)
 * (@frykky)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6033807)
 * doesn’t work 🙁
 *  [Weblizar – WordPress Themes & Plugin](https://wordpress.org/support/users/weblizar/)
 * (@weblizar)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6033811)
 * I will implement your code as widget and fix the problem.
 * And will send you the code. Will send it by tomorrow.
 * Thanks
    Weblizar
 *  [Weblizar – WordPress Themes & Plugin](https://wordpress.org/support/users/weblizar/)
 * (@weblizar)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034012)
 * Hi Frykky,
 * Could you provide us your widget file?
 * Thanks
 *  Thread Starter [Frykky](https://wordpress.org/support/users/frykky/)
 * (@frykky)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034014)
 *     ```
       class widget_fst_news_ngg extends WP_Widget {
       function __construct() {
           parent::__construct(
           'widget_fst_news_ngg', 
   
           // Widget name will appear in UI
           __('Galleria Immagini', 'widget_fst_news_ngg_domain'), 
   
           // Widget description
           array( 'description' => __( 'Galleria immagini allegata alla news', 'widget_fst_news_ngg_domain' ), )
           );
       }
   
       // Creating widget front-end
       // This is where the action happens
       public function widget( $args, $instance ) {
           $title = apply_filters( 'widget_title', $instance['title'] );
           // before and after widget arguments are defined by themes
           echo $args['before_widget'];
           if ( ! empty( $title ) )
           echo $args['before_title'] . $title . $args['after_title'];
   
           // This is where you run the code and display the output
           $post = get_queried_object();
           $fst_post_ngg = get_post_meta($post->ID, 'fst_post_gallery', true);
           echo '<div>';
           echo do_shortcode($fst_post_ngg);
           echo '</div>';
           echo $args['after_widget'];
       }
   
       // Widget Backend
       public function form( $instance ) {
           if ( isset( $instance[ 'title' ] ) ) {
               $title = $instance[ 'title' ];
           }
           else {
           $title = __( 'Galleria Immagini', 'widget_fst_news_ngg_domain' );
           }
           // Widget admin form
       ?>
       <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
       }
   
       // Updating widget replacing old instances with new
       public function update( $new_instance, $old_instance ) {
           $instance = array();
           $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
           return $instance;
           }
       } // Class widget_fst_news_ngg ends here
   
       // Register and load the widget
       function wpb_load_widget() {
       	register_widget( 'widget_fst_news_ngg' );
       /*
       more widget
       */
       }
       add_action( 'widgets_init', 'wpb_load_widget' );
       ```
   
 * this is the output code
 *     ```
       <section class="widget widget_fst_news_ngg-3 widget_widget_fst_news_ngg"><h4>Galleria Immagini</h4><div>
       <script type="text/javascript">
       	jQuery( document ).ready(function( jQuery ) {
       		jQuery( '#example3_719' ).sliderPro({
       			width: 1000,
       			height: 500,
       			autoplay: false,
       			arrows: true,
       			buttons: true,
       			smallSize: 500,
       			mediumSize: 1000,
       			largeSize: 3000,
       			//fade: true,
       			thumbnailArrows: true,
       		});
       	});
       </script>
       <style>
       /* Example 3 */
       #example3_719 .sp-selected-thumbnail {
       	border: 4px solid #000;
       }
   
       /*
       #example3_ .title-in {
       	font-weight: bolder;
       	opacity: 0.7 !important;
       	font-size: 1.2em;
       }
   
       #example3_ .desc-in {
       	opacity: 0.7 !important;
       	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
       	font-size: 1em;
       }
       */
   
       #example3_719 .title-in {
       	color: <br />
       <b>Notice</b>:  Undefined variable: RISP_Slide_In_Title_Color in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>59</b><br />
        !important;
       	font-weight: bolder;
       	text-align: center;
       }
   
       #example3_719 .title-in-bg {
       	background: rgba(255, 255, 255, 0.7); !important;
       	white-space: unset !important;
       	max-width: 90%;
       	min-width: 40%;
       	transform: initial !important;
       	font-size: 14px !important;
       }
   
       #example3_719 .desc-in {
       	color: <br />
       <b>Notice</b>:  Undefined variable: RISP_Slide_In_Desc_Color in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>74</b><br />
        !important;
       	text-align: center;
       }
       #example3_719 .desc-in-bg {
       	background: rgba(<br />
       <b>Notice</b>:  Undefined variable: RISP_Slide_In_Desc_BG_Color in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>78</b><br />
       , <br />
       <b>Notice</b>:  Undefined variable: RISP_BG_Color_Opacity in <b>/var/hosting/www.fondazionesistematoscana.it/www/wp-content/plugins/ultimate-responsive-image-slider/uris-layout.php</b> on line <b>78</b><br />
       ) !important;
       	white-space: unset !important;
       	width: 80% !important;
       	min-width: 30%;
       	transform: initial !important;
       	font-size: 13px !important;
       }
   
       @media (max-width: 640px) {
       	#example3_719 .hide-small-screen {
       		display: none;
       	}
       }
   
       @media (max-width: 860px) {
       	#example3_719 .sp-layer {
       		font-size: 18px;
       	}
   
       	#example3_719 .hide-medium-screen {
       		display: none;
       	}
       }
       </style>
       <h3 class="uris-slider-title"> </h3>
       <div class="slider-pro" id="example3_719">
       	<!---- slides div start ---->
       	<div class="sp-slides">
       				<div class="sp-slide">
       			<img data-retina="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-large="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-medium="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-small="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" data-src="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/16.jpg" src="" class="sp-image">
   
       					</div>
       				<div class="sp-slide">
       			<img data-retina="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-large="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-medium="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-small="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" data-src="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/4.jpg" src="" class="sp-image">
   
       					</div>
       				<div class="sp-slide">
       			<img data-retina="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-large="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-medium="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-small="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" data-src="http://www.fondazionesistematoscana.it/wp-content/uploads/2012/10/9.jpg" src="" class="sp-image">
   
       					</div>
   
       	</div>
   
       	<!---- slides div end ---->
       		<!-- slides thumbnails div end -->
   
       </div>
       	<div style="display:none">Ultimate Responsive Image Slider Plugin Powered By Weblizar</div>
       	</div></section>
       ```
   
 *  [Weblizar – WordPress Themes & Plugin](https://wordpress.org/support/users/weblizar/)
 * (@weblizar)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034020)
 * Hello,
 * if you want to use slider in widget then follow my instruction here:-
 * First you have need to delete old package of plugin which edited by you.
 * Now install and activate fresh plugin file from WordPress.org
 * Follow these steps to add slider in widget –
 * **Step-1 :** Open your plugin directory then open plugin folder **ultimate-responsive-
   image-slider**
 * **Step-2 :** Now open this file **ultimate-responsive-image-slider.php ** on 
   any editor.
 * **Step-3 :** Go to near line no. 37 find below function code there
 *     ```
       /**
        * Weblizar [URIS] Shortcode Detect Function
        */
       function WeblizarWRISShortCodeDetect() {
           global $wp_query;
           $Posts = $wp_query->posts;
           $Pattern = get_shortcode_regex();
           foreach ($Posts as $Post) {
       		if ( strpos($Post->post_content, 'URIS' ) ) {
       			/**
                    * js scripts
                    */
       			wp_enqueue_script('ris-jquery-sliderPro-js', WRIS_PLUGIN_URL.'js/jquery.sliderPro.js', array('jquery'), '', true);
   
       			/**
                    * css scripts
                    */
       			wp_enqueue_style('ris-slider-css', WRIS_PLUGIN_URL.'css/slider-pro.css');
                   break;
               } //end of if
           } //end of foreach
       }
       add_action( 'wp', 'WeblizarWRISShortCodeDetect' );
       ```
   
 * **Step-4 :** Now replace above code with below code
 *     ```
       /**
        * Weblizar [URIS] Shortcode Detect Function
        */
       function WeblizarWRISShortCodeDetect() {
           global $wp_query;
           $Posts = $wp_query->posts;
           $Pattern = get_shortcode_regex();
          /*  foreach ($Posts as $Post) {
       		if ( strpos($Post->post_content, 'URIS' ) ) { */
       			/**
                    * js scripts
                    */
       			wp_enqueue_script('ris-jquery-sliderPro-js', WRIS_PLUGIN_URL.'js/jquery.sliderPro.js', array('jquery'), '', true);
   
       			/**
                    * css scripts
                    */
       			wp_enqueue_style('ris-slider-css', WRIS_PLUGIN_URL.'css/slider-pro.css');
                  /*  break;
               } //end of if
           } //end of foreach */
       }
       add_action( 'wp', 'WeblizarWRISShortCodeDetect' );
       add_filter( 'widget_text', 'do_shortcode' );
       ```
   
 * **Step-5 :** Finally save your file.
 * **Step-6 :** Final step is copy your shortcode and then paste it on **text widget**.
 * Let me know if you get any problem regrading this process.
 * Thanks
 *  Thread Starter [Frykky](https://wordpress.org/support/users/frykky/)
 * (@frykky)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034103)
 * Hi,
    it works!
 * I bought Pro version and i made same changes.
 * Can you include these modification in your future updates to avoid overwriting?
 * Ty
 *  [Weblizar – WordPress Themes & Plugin](https://wordpress.org/support/users/weblizar/)
 * (@weblizar)
 * [11 years ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034106)
 * Hi Frykky,
 * Sure! we will add this near future in updates.
 * Thanks
    Weblizar
 *  [agrehl](https://wordpress.org/support/users/agrehl/)
 * (@agrehl)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034149)
 * this worked for me as well, with a similar [shortcode not displaying in pagebuilder]
   issue. Thanks! 🙂
 *  [olicogp](https://wordpress.org/support/users/olicogp/)
 * (@olicogp)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034160)
 * Hi there,
 * This works for me for the free version but not the pro version.
 * Could you please advise?
 * Thanks
 * Andrew
 *  [Weblizar – WordPress Themes & Plugin](https://wordpress.org/support/users/weblizar/)
 * (@weblizar)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034161)
 * Hello Andrew,
 * For pro version support you have need to contact us at **lizarweb[at]gmail[dot]
   com**.
 * Thanks
 *  [syoung68](https://wordpress.org/support/users/syoung68/)
 * (@syoung68)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034177)
 * you could always enable shortcodes in your widgets…. easier than messing with
   the plugin files…
 * Simply put the following in your functions.php file
 * `add_filter('widget_text', 'do_shortcode');`
 * That said, a real widget would be nice.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘slider in widget’ is closed to new replies.

 * ![](https://ps.w.org/ultimate-responsive-image-slider/assets/icon-128x128.gif?
   rev=2305926)
 * [Ultimate Responsive Image Slider](https://wordpress.org/plugins/ultimate-responsive-image-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ultimate-responsive-image-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ultimate-responsive-image-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/ultimate-responsive-image-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ultimate-responsive-image-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ultimate-responsive-image-slider/reviews/)

 * 12 replies
 * 5 participants
 * Last reply from: [syoung68](https://wordpress.org/support/users/syoung68/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/slider-in-widget/#post-6034177)
 * Status: resolved