First thumbnail bigger with post excerpt

No problem Hector, take your time.

King regards.

Alright, as promised here it is:

function custom_popular( $mostpopular, $instance ){
	$counter = 0;

    $output = '<ul class="wpp-list">';	

	foreach( $mostpopular as $popular ) {

		$permalink = get_permalink($popular->id);
		$excerpt = "";

		// Different output for the first post: show different thumbnail and post excerpt (summary)
		if ( 0 == $counter ) {
			$thumbnail = get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );
			$excerpt = " <span class=\"wpp-excerpt\">" . get_excerpt_by_id( $popular->id ) . "</span>";
		} else { // Regular output
			$thumbnail = get_the_post_thumbnail( $popular->id, array(90, 70), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );
		}

		$output .= "<li>{$thumbnail} <a href=\"{$permalink}\" title=\"" . esc_attr($popular->title) . "\">{$popular->title}</a>{$excerpt}</li>";

		$counter++;
	}

	$output .= '</ul>';

	return $output;
}
add_filter( 'wpp_custom_html', 'custom_popular', 10, 2 );

Observations:

1. I assumed you want to use the very same HTML markup you have now on your site, so I just modified the code a bit.
2. This also asumes that you’re using the excerpt function I linked above.
3. This script uses WordPress’ native thumbnail feature instead of WPP’s thumbnail generator. This means that upon uninstall WPP won’t be able to remove the images generated by this script.

This modification is compatible with WPP 3.0.0 and above, so upgrading to newer versions of the plugin should be fine from now on.

Hector, something is wrong. Maybe in the end on “return $output”?

I tested that code on the Twentythirteen theme and everything seemed to work OK. What happened on your side?

When I change the code in functions.php, and when I add the widget anywere on the website, the whole website is dismantled.

When I put back the previous code from you, everything is ok, but I lost the first big thumbnail.

I am watching the code now, and I see that there is no output for the first post.

function custom_popular( $mostpopular, $instance ){
	$counter = 0;

    $output = '<ul class="wpp-list">';	

	foreach( $mostpopular as $popular ) {

		$permalink = get_permalink($popular->id);
		$excerpt = "";

		// Different output for the first post: show different thumbnail and post excerpt (summary)
		if ( 0 == $counter ) {
			$thumbnail = get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );
			$excerpt = " <span class=\"wpp-excerpt\">" . get_excerpt_by_id( $popular->id ) . "</span>";
		} else { // Regular output
			$thumbnail = get_the_post_thumbnail( $popular->id, array(90, 70), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );
		}

		$output .= "<li>{$thumbnail} <a href=\"{$permalink}\" title=\"" . esc_attr($popular->title) . "\">{$popular->title}</a>{$excerpt}</li>";

		$counter++;
	}

	$output .= '</ul>';

	return $output;
}
add_filter( 'wpp_custom_html', 'custom_popular', 10, 2 );

When I remove this

$excerpt = " <span class=\"wpp-excerpt\">" . get_excerpt_by_id( $popular->id ) . "</span>";
		} else { // Regular output

the widget works. But there is no excerpt, and the thumbnails are 70×70.

And I want to ask you for help, how can I make the first post title font size bigger?

You can see the widget on https://pletenje.mk

Thanks a lot Hector.

Sounds like you don’t have the get_excerpt_by_id() function on your themes’ functions.php. Add it right before the custom_popular() function and you should be fine.

… how can I make the first post title font size bigger?

Ah, this would require a little modification to the function:

function custom_popular( $mostpopular, $instance ){
	$counter = 0;

    $output = '<ul class="wpp-list">';	

	foreach( $mostpopular as $popular ) {

		$permalink = get_permalink($popular->id);
		$excerpt = "";

		// Different output for the first post: show different thumbnail and post excerpt (summary)
		if ( 0 == $counter ) {
			$thumbnail = get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );
			$excerpt = " <span class=\"wpp-excerpt\">" . get_excerpt_by_id( $popular->id ) . "</span>";
			$output .= "<li>{$thumbnail} <a href=\"{$permalink}\" title=\"" . esc_attr($popular->title) . "\" style=\"font-size: 18px;\">{$popular->title}</a>{$excerpt}</li>";
		} else { // Regular output
			$thumbnail = get_the_post_thumbnail( $popular->id, array(90, 70), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );
			$output .= "<li>{$thumbnail} <a href=\"{$permalink}\" title=\"" . esc_attr($popular->title) . "\">{$popular->title}</a>{$excerpt}</li>";
		}

		$counter++;
	}

	$output .= '</ul>';

	return $output;
}
add_filter( 'wpp_custom_html', 'custom_popular', 10, 2 );

See the font-size: 18px; part? Change it to the desired size and you should be good to go.

Hector, you are awesome dude.

Plugin works great.

Thank you very much.
Branko

Hector, I am trying to add a permalink on the thumbnails, but I can find solution.

Can you help me please?

That’s an easy one.

Replace:

$thumbnail = get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );

… with:

$thumbnail = "<a href=\"{$permalink}\" title=\"" . esc_attr($popular->title) . "\">" . get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') ) . "</a>";

… and replace:

$thumbnail = get_the_post_thumbnail( $popular->id, array(70, 70), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') );

… with:

$thumbnail = "<a href=\"{$permalink}\" title=\"" . esc_attr($popular->title) . "\">" . get_the_post_thumbnail( $popular->id, array(70, 70), array('alt' => esc_attr($popular->title), 'title' => esc_attr($popular->title), 'class' => 'wpp-thumbnail') ) . "</a>";

Hello,

I was hoping to find a solution about having only the first thumbnail with a size of around 300×200.

I added the provided code to my functions.php, but the website doesn’t work in certain places. I’m using Hueman theme, can you help me out sort this problem out?

Hi Neofalinas,

What do you mean with “the website doesn’t work in certain places”?

Hey,

It doesn’t show the widgets I published, and the footer is gone.

So basically I have a site: https://diktumfaktum.kaunokolegija.lt/

I want to have your widget to show first post Thumbnail of a bigger size.

Also, is there a way to edit the text “views” “under” etc.?