1

I have a regular WordPress Widget that display few posts using WP_Query I'm trying to find a way to display the thumbnail of the first post as a background image for the entire widget div. Here's the visual representation of what I need:

visual representation

The code that I use right now displays a thumbnail for every post:

<div class="widget-wrap-sidebar">
<div class="my-widget">

<?php
// THE QUERY
?>

<?php
global $wp_query;
$metakey = 'post_views_count';
$recent_posts = new WP_Query( array( 'cat' => $categories, 'orderby' => $orderby, 'meta_key' => $metakey, 'posts_per_page' => $posts ) );
$temp_query = $wp_query;
$wp_query = null;
$wp_query = $recent_posts;
?>

<?php while( $recent_posts->have_posts() ): $recent_posts->the_post(); ?>

<div class="big-image">
<?php if ( '' != get_the_post_thumbnail() ) : ?>
<?php $thumbnail_url = get_the_post_thumbnail( get_the_ID(), 'big-image' ); ?>
<?php  echo wp_kses_post( $thumbnail_url ); ?>
<?php endif;?>
</div>


<div class="the-title">
<h3>
<a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>">
<?php echo get_the_title(); ?>
</a>
</h3>
</div>

<?php endwhile; ?>
<?php wp_reset_query(); ?>

</div><?php // end of my-widget ?>
</div><?php // end of widget-wrap-sidebar ?>

Basically, I need a way to call for the thumbnail URL on the first widget-wrap-sidebar div. Something like this:

<div class="widget-wrap-sidebar" style="background-image:url('<?php echo $thumbnail_url ?>')">

However, I've been unable to make the above code work.
* Please do not consider the CSS part that I can accomplish with ease.

0

Few notes:

  • Just use the_title(); instead of echo get_the_title();
  • Use the_title_attribute() for title attributes.
  • No need to override the global $wp_query when you use a secondary query.
  • Then use wp_reset_postdata() after your secondary query loop.
  • Use the_permalink() that escapes the permalink, instead of the unescaped echo get_permalink();
  • There's the has_post_thumbnail() to check if the post thumbnail is set.
  • Note that get_the_post_thumbnail() returns the post thumbnail image tag, not the url.
  • Check out the_post_thumbnail_url() to get the thumbnail url.
  • To check for the first item in your secondary recent posts loop, you can use if( 0 === $recent_posts->current_post ){ within that loop.

Example:

Here's an example (PHP 5.4+):

$recent_posts = new WP_Query( $args );
if( $recent_posts )
{
    $thumbnail_url = 'https://example.tld/default.png'; // fallback post thumbnail url
    $data          = [];

    // Loop    
    while( $recent_posts->have_posts() )
    {
        $recent_posts->the_post();

        // Post thumbnail from the first post
        if( 0 === $recent_posts->current_post )
            $thumbnail_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );

        // Collect post titles
        $data[] = the_title(
            sprintf(
                '<div class="title"><h3><a href="%s">',
                esc_url( get_permalink() )
            ),                 // before
            '</a></h2></div>', // after
            false              // echo
        );
    }
    wp_reset_postdata();

    // Output
    if( $data )
        printf(
            '<div class="widget-wrap-sidebar" style="background-image: url(%s)">
                 <div class="my-widget">%s</div>
             </div>',
            esc_url( $thumbnail_url ),
            join( '', $data )
        );
}

Hope it helps.

4
  • thanks for your valuable tips. Your sugestion works great but what I need, to have more CSS flexibility, is to set a background image like that: <div class="widget-wrap-sidebar" style="background-image:url('<?php echo $thumbnail_url ?>')"> Any tips? Thanks! – Alexandru Andrei Costache Nov 18 '16 at 10:03
  • One approach for your inline styling could be: <style>.widget-wrap-sidebar{ background-image: url( <?php echo esc_url( $thumbnail_url ); ?>);}</style>after your successful loop, where you could use a fallback image if the first post (or any of the other posts) doesn't have a featured image? @AlexandruAndreiCostache – birgire Nov 18 '16 at 10:31
  • I'm a bit confusing about "after your successful loop" Can you post your comment as a sample code so I can accept the answer please? Thank you @birgire – Alexandru Andrei Costache Nov 18 '16 at 11:45
  • I updated with an example @AlexandruAndreiCostache – birgire Nov 18 '16 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.