How to display post thumbnail in WordPress – 3rd alternative

Logo WordPress

This time I will try to give you a small WordPress trick on thumbnail creation for your blog post. There are several ways of doing this, but because I like to code so we will do it in the coder way. Thats why I put “3rd alternative” at the end of this post title because I will try to show you two more ways of displaying post thumbnail in my next posts.

I start with the 3rd alternative because maybe its rarely used these days because WordPress has already a better way to insert post thumbnail/image in post. And then we will go through “2nd alternative” by using WordPress Custom field and the last is the “1st alternative” by using WordPress Featured image.

Whats the advantage of this code instead of using WordPress featured image feature or enter the thumbnail image path in the custom field?.

This small function is to take advantage of WordPress image uploader, as we now that each time we upload new image via post image uploader or media uploader, WordPress will automatically create thumbnail image for it and the size is depends on your media settings.

So, the first thing we should do is to set the thumbnail size for our site. We could do it via Media Setting, and just like in the screenshot below I set it to 150 x 150 pixels.

media-setting

 

After we set the thumbnail size of 150×150 pixels, the next time we upload an image then WordPress will create the thumbnail image for us.

Now its time to create the code, we will put this vew lines of code on our WordPress theme functions file, if you haven’t yet, just create functions.php in your theme folder. And here are the code, we will write a small function lets name it my_thumbnail function:

<?php
//This code is in our functions.php
function my_thumbnail($post_id){
global $wpdb;
$query = "SELECT ID FROM $wpdb->posts WHERE post_parent = $post_id AND post_mime_type LIKE 'image%'";
$result = $wpdb->get_row($query);
$thumb_id = $result->ID;

 if($thumb_id){
 $thumb = wp_get_attachment_thumb_url($thumb_id);

 if($thumb != false){
 return $thumb;
 }
 }
}
?>

What is the above function actually does?  when the function is called, it will search a record of an image in WordPress posts table, the key of this technique is doing search into posts table based on post_parent and post_mime_type fields. When we found a record of image based on post_parent ID, than just pull off its record ID.

After we have the record ID, then by using wp_get_attachment_thumb_url() WordPress functions we will get our thumbnail image path on the server.

Thats it, simple enough huh? now we just need to call this function from the WordPress loop to display our thumbnail. One thing you should remember is, this function will return nothing if you haven’t puts any image on your post.

Here is the example on how do we use this function, this code should be in one of your themes file :

<?php
if (have_posts()) :
while (have_posts()) :
the_post();
$thumb = my_thumbnail($post->ID);  // to check if this post have at least one image on it
if($thumb){  // If yes, we got the thumbnail path
echo '<img src="'.$thumb.'" alt="Thumbnail" />'; //display the thumbnail
}
the_content(); // this is post content
endwhile;
endif;
?>

Ok now you could just simply display thumbnail image in your blog posts without uploading extra image for your post thumbnail or even you can do some more development and build it as a small useful plugin for your next WordPress development projects.

One Reply to “How to display post thumbnail in WordPress – 3rd alternative”

Leave a Reply

Your email address will not be published. Required fields are marked *