Alright, first the code and then I’ll explain what’s going on:
/*
* Builds custom HTML
*
* With this function, I can alter WPP's HTML output from my theme's functions.php.
* This way, the modification is permanent even if the plugin gets updated.
*
* @param array $mostpopular
* @param array $instance
* @return string
*/
function my_custom_popular_posts_html_list( $mostpopular, $instance ){
$output = '';
// loop the array of popular posts objects
foreach( $mostpopular as $popular ) {
$url = get_the_permalink( $popular->id );
// main thumbnail from custom field
$main_thumbnail = get_post_meta($popular->id, 'YOUR-PRIMARY-CUSTOM-FIELD-HERE', true); // <<<<<<<<<<< change this
// secondary thumbnail, 'standfirst', from custom field
$standfirst_thumbnail = get_post_meta($popular->id, 'standfirst', true);
$output .= "<li>" . "\n";
$output .= "<div class=\"news-feed-image\"><a href=\"{$url}\" title=\"" . esc_attr( $popular->title ) . "\"><img src=\"{$main_thumbnail}\" class=\"wpp-thumbnail wpp_cf\" alt=\"" . esc_attr( $popular->title ) . "\"></div>" . "\n";
$output .= "<div class=\"news-feed-item-wrap\">" . "\n";
$output .= "<a href=\"{$url}\" style=\"margin-bottom:15px;\" title=\"" . esc_attr( $popular->title ) . "\">{$popular->title}</a>" . "\n";
$output .= "<div class=\"standfirst\"><a href=\"{$url}\" title=\"" . esc_attr( $popular->title ) . "\"><img src=\"{$standfirst_thumbnail}\" class=\"wpp-thumbnail wpp_cf\" alt=\"" . esc_attr( $popular->title ) . "\"></div>" . "\n";
$output .= "<span class=\"homepage-trending-icon\"></span>" . "\n";
$output .= "<span class=\"homepage-time\">Trending story</span>" . "\n";
$output .= "</div>" . "\n";
$output .= "</li>" . "\n";
}
return $output;
}
add_filter( 'wpp_custom_html', 'my_custom_popular_posts_html_list', 10, 2 );
The code above makes use of WPP’s filter hooks to override its default HTML output with your own. To use it, place it in your theme’s functions.php file.
The my_custom_popular_posts_html_list() function receives two parameters: $mostpopular, the raw popular data – no HTML; and $instance, the options passed to the plugin via widget / [wpp] shortcode / wpp_get_mostpopular() template tag. Then, it loops the object array $mostpopular to build each popular post.
You need to set the correct custom field value for $main_thumbnail, and maybe also tweak the $output variable to adjust the HTML to your needs.
By the way, the code above does not resize the images. They’re used raw since I don’t know if you’re uploading the images already sized or not.
Let me know if you need further help with it, alright?
