You are here:  Home  >  Blogging  >  Hacks  >  Current Article

First Image of the Post – How to get it


    Print       Email

You might be wondering why I am writing this post when lot of sites already posted about how to get first image of the post. You will get to know that once you completed reading the post. Everyone wants to display thumbnails of their post image on Home page. Most of the WordPress themes they use, uses custom image attached to the post or use custom fields to get thumbs.

first image of the post But for example, you are using an external URL to display an image in your post. Or you had an autoblog which extract the content from other sites to post for you. Then how will your theme handles it, or how would you display thumbnails on your Home page for those posts?

Still you can, by adding a simple php function to your function.php to handle this. This function will grab the first image from the post.

But first, let us check the code available on lot of sites

function get_first_image() {
global $post, $posts;
$first_img = ”;
$output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
return $first_img;

When I used this code it used to count the image from bottom of the post. This will not help most of us because sometimes we may have our own custom image displayed at bottom of each post. Or we may be having lot of images in a post supposed if it is a gallery site

After some research on net and visiting lot of sites I figured out actual code which will help to us. It looks mostly of above code but with small additional variables and lines of code.

function get_first_image() {
global $post, $posts;

// Variables for first image
$szPostContent = $post->post_content;
$szSearchPattern = ‘~]*\ />~’;

// Run preg_match_all to grab all the images and save the results in $aPics
preg_match_all( $szSearchPattern, $szPostContent, $aPics );

$imgfirst = $aPics[0][0];
$output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $imgfirst, $matches);
$img_first = $matches [1] [0];
if(empty($first_img)){ //Displays a default image if no image found on post
$first_img = “/images/default.jpg”;
return $first_img;

Now add above code to your function.php file and add below code where you want to display first image of the post.

<?php echo get_first_image() ?>

Now go and give it a try.

In this post we learnt how to get first image of the post. In our net post we will learn how to use this code to first image of post effectively.

Hope you liked this post, Keep on reading:)

    Print       Email

About the author

I am a Software Tester by Profession and Blogger by Hobby. I like reading and exploring new technologies related to my Profession and technology. As I am very much interested in Database testing learning SQL / PL SQL, currently at basic stage and to improve a lot. I blog using Wordpress, so learnign basic PHP which will help me a lot.

Leave a Reply

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

Connect with Facebook

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>