Adding Thumbnail images to shortcode

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

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

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;

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

Awesome! Glad it worked.

Would you mind leaving a review JP?

https://www.ads-software.com/support/view/plugin-reviews/thumbs-rating

Thank you,

Rick

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

Hey Nick,

The code above could go, for example, on a Page Template

https://codex.www.ads-software.com/Page_Templates

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.

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

It did! Works perfectly. Thanks so much.