Title: Adding Thumbnail images to shortcode
Last modified: August 21, 2016

---

# Adding Thumbnail images to shortcode

 *  Resolved [JPOG](https://wordpress.org/support/users/jpog/)
 * (@jpog)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/)
 * Hallo Ricard,
    thank you for the great plugin. It is real fun.
 * I display with “do_shortcode” your plugin-shortcode in a PHP Widget. I added 
   the WP Thumbnail to the displayed list. See below.
 *     ```
       ... // Build the post list
   
               if($thumbs_ratings_top_query->have_posts()) :
   
                   $return .= '<ol class="thumbs-rating-top-list">';
   
                   while($thumbs_ratings_top_query->have_posts()){
   
                       $thumbs_ratings_top_query->the_post();
   
                       $return .= '<li>';
                       $return .= '<span>' . the_post_thumbnail( 'thumbnail' ) . '</span>';
   
                       $return .= '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
   
                       if( $show_votes == "yes" ){ ...
       ```
   
 * It gets displayed, but not as part of the list. See here:
 *     ```
       <div class="execphpwidget">
   
            <img class="attachment-thumbnail wp-post-image" width="150" height="150" alt="" src="http://... /cloud-150x150.jpg"></img>
   
           <img class="attachment-thumbnail wp-post-image" width="150" height="150" alt="" src="http://... /sun-150x150.jpg"></img>
           <ol class="thumbs-rating-top-list">
               <li>
       <a href="http://.../">Title</a>
       </li>
               <li><a href="http://.../">Title</a></li>
           </ol>
   
       </div>
       ```
   
 * Do you have an idea how i can get the thumbnail displayed in the list.
 * Regards
 * Jan-Philipp
 * [http://wordpress.org/plugins/thumbs-rating/](http://wordpress.org/plugins/thumbs-rating/)

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

 *  Plugin Author [Ricard Torres](https://wordpress.org/support/users/quicoto/)
 * (@quicoto)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4537858)
 * Hi there,
 * If you check the plugins code you’ll find this function: **thumbs_rating_top_func()**
 * As you can see it creates a ordered list (`<ol>`) of posts.
 * In your case my recommendation would be to **copy the whole function and paste
   it inside your custom code**. It will give you the flexibility to add a thumbnail
   or any other field you might need.
 * Let me know if this helps.
 * Rick
 *  Thread Starter [JPOG](https://wordpress.org/support/users/jpog/)
 * (@jpog)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4537883)
 * Hi,
 * you mean i should copy the whole function like this into the PHP Widget? I am
   sorry i am not a PHP Freak, i am quite sure i miss something, since nothing is
   displayed now….
 *     ```
       <?php if  ( ! function_exists( 'thumbs_rating_top_func' ) ):
           function thumbs_rating_top_func( $atts ) {
   
               $return = '';
   
               // Parameters accepted
   
               extract( shortcode_atts( array(
                   'type' => 'positive',
                   'posts_per_page' => 5,
                   'category' => '',
                   'show_votes' => 'yes',
                   'post_type' => 'any',
                   'show_both' => 'no'
               ), $atts ) );
   
               // Check wich meta_key the user wants
   
               if( $type == 'positive' ){
   
                       $meta_key = '_thumbs_rating_up';
                       $other_meta_key = '_thumbs_rating_down';
                       $sign = "+";
                       $other_sign = "-";
               }
               else{
                       $meta_key = '_thumbs_rating_down';
                       $other_meta_key = '_thumbs_rating_up';
                       $sign = "-";
                       $other_sign = "+";
               }
   
               // Build up the args array
   
               $args = array (
                   'post_type'              => $post_type,
                   'post_status'            => 'publish',
                   'cat'                    => $category,
                   'pagination'             => false,
                   'posts_per_page'         => $posts_per_page,
                   'cache_results'          => true,
                   'meta_key'    => $meta_key,
                   'orderby'    => 'meta_value_num'
               );
   
               // Get the posts
   
               $thumbs_ratings_top_query = new WP_Query($args);
   
               // Build the post list
   
               if($thumbs_ratings_top_query->have_posts()) :
   
                   $return .= '<ol class="thumbs-rating-top-list">';
   
                   while($thumbs_ratings_top_query->have_posts()){
   
                       $thumbs_ratings_top_query->the_post();
   
                       $return .= '<li>';
                       $return .= '<span>' . the_post_thumbnail( 'thumbnail' ) . '</span>';
   
                       $return .= '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
   
                       if( $show_votes == "yes" ){
   
                           // Get the votes
   
                           $meta_values = get_post_meta(get_the_ID(), $meta_key);
   
                           // Add the votes to the HTML
   
                               $return .= ' (' . $sign;
   
                               if( sizeof($meta_values) > 0){
   
                                   $return .= $meta_values[0];
   
                               }else{
   
                                   $return .= "0";
                               }
   
                               // Show the other votes if needed
   
                               if( $show_both == 'yes' ){
   
                                   $other_meta_values = get_post_meta(get_the_ID(), $other_meta_key);
   
                                   $return .= " " . $other_sign;
   
                                   if( sizeof($other_meta_values) > 0){
   
                                       $return .= $other_meta_values[0];
   
                                   }else{
   
                                       $return .= "0";
                                   }
                               }
   
                               $return .= ')';
   
                           }
                       }
   
                       $return .= '</li>';
   
                   $return .= '</ol>';
   
                   // Reset the post data or the sky will fall
   
                   wp_reset_postdata();
   
               endif;
   
               return $return;
   
           add_shortcode( 'thumbs_rating_top', 'thumbs_rating_top_func' );
       endif; 
   
           };?>
       ```
   
 * Thanks for your help.
 * Regards JP
 *  Plugin Author [Ricard Torres](https://wordpress.org/support/users/quicoto/)
 * (@quicoto)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4537884)
 * Hi JP,
 * Well not the function definition, the content of the function.
 * Try doing it step by step:
 * 1) Copy the plugin’s function content to the PHP Widget.
 * 2) if it works (display the post lists), add your bits of code to show the thumbnails
 * Here’s the function content with some modifications (parameters and echo the 
   $return at the end):
 *     ```
       $return = '';
   
       		// Parameters accepted
   
       $type = 'positive';
       $posts_per_page = 5;
       $category = '';
       $show_votes = 'yes';
       $post_type = 'any';
       $show_both = 'no';
   
       		// Check wich meta_key the user wants
   
       		if( $type == 'positive' ){ 
   
       				$meta_key = '_thumbs_rating_up';
       				$other_meta_key = '_thumbs_rating_down';
       				$sign = "+";
       				$other_sign = "-";
       		}
       		else{
       				$meta_key = '_thumbs_rating_down';
       				$other_meta_key = '_thumbs_rating_up';
       				$sign = "-";
       				$other_sign = "+";
       		}
   
       		// Build up the args array
   
       	    $args = array (
       	    	'post_type' 			 => $post_type,
       			'post_status'            => 'publish',
       			'cat'                    => $category,
       			'pagination'             => false,
       			'posts_per_page'         => $posts_per_page,
       			'cache_results'          => true,
       			'meta_key'	=> $meta_key,
       			'orderby'	=> 'meta_value_num'
       		);
   
       		// Get the posts
   
       		$thumbs_ratings_top_query = new WP_Query($args);
   
       		// Build the post list
   
       		if($thumbs_ratings_top_query->have_posts()) : 		
   
       			$return .= '<ol class="thumbs-rating-top-list">';
   
       			while($thumbs_ratings_top_query->have_posts()){
   
       				$thumbs_ratings_top_query->the_post(); 
   
       				$return .= '<li>';
   
       				$return .= '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';				
   
       				if( $show_votes == "yes" ){
   
       					// Get the votes
   
       					$meta_values = get_post_meta(get_the_ID(), $meta_key);
   
       					// Add the votes to the HTML				
   
       						$return .= ' (' . $sign;
   
       						if( sizeof($meta_values) > 0){
   
       							$return .= $meta_values[0];	
   
       						}else{
   
       							$return .= "0";
       						}						
   
       						// Show the other votes if needed
   
       						if( $show_both == 'yes' ){
   
       							$other_meta_values = get_post_meta(get_the_ID(), $other_meta_key);
   
       							$return .= " " . $other_sign;
   
       							if( sizeof($other_meta_values) > 0){
   
       								$return .= $other_meta_values[0];
   
       							}else{
   
       								$return .= "0";
       							}
       						}
   
       						$return .= ')';
   
       					}
       				}
   
       				$return .= '</li>';					
   
       			$return .= '</ol>';
   
       			// Reset the post data or the sky will fall
   
       			wp_reset_postdata();
   
       		endif; 
   
       		echo $return;
       ```
   
 *  Thread Starter [JPOG](https://wordpress.org/support/users/jpog/)
 * (@jpog)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4537897)
 * OK, thank you Ricard.
 * I appreciate your quick response. And i finally got what you mean.
 * And the best is i found the solution. The WP thumbnail didn’t like to be in the
   $return variable, so i echoed each value.
 * Like this:
 *     ```
       <?php
       $type = 'positive';
       $posts_per_page = 5;
       $show_votes = 'yes';
       $post_type = 'literature';
       $show_both = 'no';
   
       		// Check wich meta_key the user wants
   
       		if( $type == 'positive' ){ 
   
       				$meta_key = '_thumbs_rating_up';
       				$other_meta_key = '_thumbs_rating_down';
       				$sign = "+";
       				$other_sign = "-";
       		}
       		else{
       				$meta_key = '_thumbs_rating_down';
       				$other_meta_key = '_thumbs_rating_up';
       				$sign = "-";
       				$other_sign = "+";
       		}
   
       		// Build up the args array
   
       	    $args = array (
       	    	'post_type' 			 => $post_type,
       			'post_status'            => 'publish',
       			'pagination'             => false,
       			'posts_per_page'         => $posts_per_page,
       			'cache_results'          => true,
       			'meta_key'	=> $meta_key,
       			'orderby'	=> 'meta_value_num'
       		);
   
       		// Get the posts
   
       		$thumbs_ratings_top_query = new WP_Query($args);
   
       		// Build the post list
   
       		if($thumbs_ratings_top_query->have_posts()) : 		
   
       			echo'<ol class="thumbs-rating-top-list">';
   
       			while($thumbs_ratings_top_query->have_posts()){
   
       				$thumbs_ratings_top_query->the_post(); 
   
       				echo '<li>';
               echo '<span>' . the_post_thumbnail( 'thumbnail' ) . '</span>';
       				echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';				        
   
       				if( $show_votes == "yes" ){
   
       					// Get the votes
   
       					$meta_values = get_post_meta(get_the_ID(), $meta_key);
   
       					// Add the votes to the HTML				
   
       						echo ' (' . $sign;
   
       						if( sizeof($meta_values) > 0){
   
       							echo $meta_values[0];	
   
       						}else{
   
       							echo "0";
       						}						
   
       						// Show the other votes if needed
   
       						if( $show_both == 'yes' ){
   
       							$other_meta_values = get_post_meta(get_the_ID(), $other_meta_key);
   
       							echo " " . $other_sign;
   
       							if( sizeof($other_meta_values) > 0){
   
       								echo $other_meta_values[0];
   
       							}else{
   
       								echo "0";
       							}
       						}
   
       						echo ')';
   
       					}
       				}
   
       				echo'</li>';					
   
       			echo '</ol>';
   
       			// Reset the post data or the sky will fall
   
       			wp_reset_postdata();
   
       		endif; ?>
       ```
   
 * Works nice and smooth now. Thank you again for your help.
 * Best jp
 *  Plugin Author [Ricard Torres](https://wordpress.org/support/users/quicoto/)
 * (@quicoto)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4537898)
 * Awesome! Glad it worked.
 * Would you mind leaving a review JP?
 * [http://wordpress.org/support/view/plugin-reviews/thumbs-rating](http://wordpress.org/support/view/plugin-reviews/thumbs-rating)
 * Thank you,
 * Rick
 *  [nickpalm](https://wordpress.org/support/users/nickpalm/)
 * (@nickpalm)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4538202)
 * Hey there, great plug-in. I would also like to show the thumbnails of the top
   posts instead of just links. The code above looks like what I need to accomplish
   this, but I’m not exactly sure where to place it. I tried putting it into a PHP
   Widget with no luck. What am I doing wrong?
 * Thanks!
 * -Nick
 *  Plugin Author [Ricard Torres](https://wordpress.org/support/users/quicoto/)
 * (@quicoto)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4538204)
 * Hey Nick,
 * The code above could go, for example, on a Page Template
 * [http://codex.wordpress.org/Page_Templates](http://codex.wordpress.org/Page_Templates)
 *  [nickpalm](https://wordpress.org/support/users/nickpalm/)
 * (@nickpalm)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4538216)
 * Thank you!
 * This is great, finally got it working. The thumbnails look so cool with the vote
   count underneath.
 * Is there anyway to modify this code so that it will display most recent posts
   with the vote count under them? I tried a bunch of different things but I just
   keep breaking it.
 * I’d also like to do the same with a single category, which I’m sure isn’t all
   that different.
 * Again, many thanks.
 *  Plugin Author [Ricard Torres](https://wordpress.org/support/users/quicoto/)
 * (@quicoto)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4538217)
 * To retrieve the votes count use this method:
 *     ```
       <?php $meta_values = get_post_meta(get_the_ID(), '_thumbs_rating_down'); print_r($meta_values[0]); ?>
       ```
   
 *     ```
       <?php $meta_values = get_post_meta(get_the_ID(), '_thumbs_rating_up'); print_r($meta_values[0]); ?>
       ```
   
 * If you place the code inside the Loop it should work. If it’s a custom code replace**
   get_the_ID()** with the post ID.
 * Let me know if this helps.
 * Rick
 *  [nickpalm](https://wordpress.org/support/users/nickpalm/)
 * (@nickpalm)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4538218)
 * It did! Works perfectly. Thanks so much.

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

The topic ‘Adding Thumbnail images to shortcode’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/thumbs-rating_d1a77d.svg)
 * [Thumbs Rating](https://wordpress.org/plugins/thumbs-rating/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/thumbs-rating/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/thumbs-rating/)
 * [Active Topics](https://wordpress.org/support/plugin/thumbs-rating/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/thumbs-rating/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/thumbs-rating/reviews/)

## Tags

 * [shortcode](https://wordpress.org/support/topic-tag/shortcode/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)
 * [thumbnail image](https://wordpress.org/support/topic-tag/thumbnail-image/)

 * 10 replies
 * 3 participants
 * Last reply from: [nickpalm](https://wordpress.org/support/users/nickpalm/)
 * Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/adding-thumbnail-images-to-shortcode/#post-4538218)
 * Status: resolved