Wordpress get post thumbnail url

Question

Its simple and answered quite often: I want to get the post thumbnail variable. Even if there is a lot of input, I could not make it work for me.

Here is my current code I use somewhere inside my front_page.php template:

<?php
 $args = array( 'numberposts' => '2' );
 $recent_posts = wp_get_recent_posts( $args );
 foreach( $recent_posts as $recent ){
      echo '<div class="post">';
      echo '<div class="post_thumb" style="background-image:url('.get_the_post_thumbnail( $recent['ID'], 'thumbnail').')"></div>';
      echo '<div class="content"';
      echo '<h2 class="post_title">';
      echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
      echo '</h2>';
      echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
      echo '</div>'; //content
      echo '</div>'; //.post
}
?>

This works quite good, except for the get_the_post_thumbnail() part.

I know, that I can get the thumbnail url using

$post_thumbnail_id = get_post_thumbnail_id($post->ID);
$post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );

But I am not able to implement this code inside of my own. I tried to add it inside foreach and although before, but both does not seem to work. I do not receive any errors I could look for, it only outputs "nothing", meaning there is no style="background-image: url()";.

I would love if there is someone that could not only show, but explain, why my code is not working. I guess, that if I have solved this problem, my next question would be *where do I have to add 'thumbnail' in order to output the correct image size?

Broken code

<?php
    $args = array( 'numberposts' => '2' );
    $recent_posts = wp_get_recent_posts( $args );
    foreach( $recent_posts as $recent ){
        $post_thumbnail_id = get_post_thumbnail_id($post->ID);
        $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );
        echo '<div class="post">';
        echo '<div class="post_thumb" style="background-image:url('.$post_thumbnail_url.')"></div>';
        echo '<div class="content"';
        echo '<h2 class="post_title">';
        echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
        echo '</h2>';
        echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
        echo '</div>'; //content
        echo '</div>'; //.post
    }
?>

Answer 1

Initially, I saw the double and single quotes all jumbled up. This did fix some of what I saw, but I finally had time to test the code you put up.

First step, I used var_dump on $recent_posts to make sure I was getting the usable values.

Next, I echoed each variable as it was called, to make sure I knew what was being generated. I discovered that this line, as @james-barrett said, was not calling correct information:

$post_thumbnail_id = get_post_thumbnail_id($post->ID);

So, I used @james-barrett's suggestion and changed it to:

$post_thumbnail_id = get_post_thumbnail_id($recent["ID"]);

Which then worked to get the correct ID.

After I was calling the correct information, the url() portion was filling correctly, but the next problem was getting the correct size called.

I did some research and discovered how the files were saved in the 'uploads' folder and then continued on to search for a way to access a function that would allow me to reach the one labled "thumbnail". The solution I found might not work with other sizes, or perhaps you could do more research after this, but I changed the $post_thumbnail_url variable to this:

$post_thumbnail_url = wp_get_attachment_thumb_url( $post_thumbnail_id );

Which resulted in the 150x150 image being called.

After all was said and done, I converted your broken code above to this working code:

<?php 
$args = array( 'numberposts' => '2' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
        $post_thumbnail_id = get_post_thumbnail_id($recent["ID"]);
        $post_thumbnail_url = wp_get_attachment_thumb_url( $post_thumbnail_id );
        echo '<div class="post">';
        echo '<div class="post_thumb" style="background-image:url(\''.$post_thumbnail_url.'\')"></div>';
        echo '<div class="content"';
        echo '<h2 class="post_title">';
        echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
        echo '</h2>';
        echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
        echo '</div>'; //content
        echo '</div>'; //.post
        }
?>

Note: I adjusted the url() to be url('') because some of my older browsers require the single quotes, but I suspect you can remove them.

Answer 2

I think the issue is with the following line of code:

$post_thumbnail_id = get_post_thumbnail_id($post->ID);

It should be the ID of your $recent variable not $post.

$post_thumbnail_id = get_post_thumbnail_id($recent->ID);

or

$post_thumbnail_id = get_post_thumbnail_id($recent['ID']);

and to get a specific size of thumbnail you could do something like this:

<?php
  foreach( $recent_posts as $recent ){
    $post_thumbnail_id = get_post_thumbnail_id($recent['ID']);
    $post_thumbnail_url = wp_get_attachment_image_src($post_thumbnail_id, 'thumbnail' );

    echo '<div class="post">';
    echo '<div class="post_thumb" style="background-image:url('.$post_thumbnail_url.')"></div>';
    echo '<div class="content"';
    echo '<h2 class="post_title">';
    echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
    echo '</h2>';
    echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
    echo '</div>'; //content
    echo '</div>'; //.post

  }
?>