One of ten brilliant tips that I shared yesterday on my blog – display images on your blog’s homepage without any custom fields or any additional functions.php script, something I first saw on WebDeveloperPlus.

How do you do it? First log in, on the sidebar select ‘Media’ (which is under ‘Settings’). You’ll then be taken to a page with an option to change the thumbnail size of images. Change that to whatever size you want your images to appear as. Next, insert the code below onto your homepage, archive page, whatever.

<?php
//Get images attached to the post
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break; }
//Display image
} ?>

Then, to display your image you can just echo out the $img tag we just created:

<img src="<?php echo $img; ?>" alt=" " />

And there we have it. I told you it was easy! This is one of the tips from a post I wrote yesterday on WPShout – ‘10 Tips to Improve Your WordPress Theme‘.

Hi, I'm Alex Denning. I run a site called WPShout.com where I publish WordPress Tutorials. You should follow me on Twitter @AlexDenning!

  1. For some reason it doesn’t work for me. Where do I suppose to paste the code in the index file?

  2. Alex Denning says:

    @Omer you put the code where you want the image to appear.

  3. I tried to put it anywhere in the script and nothing happened.

  4. Mike says:

    You need to echo $img out into an tag to actually display the image:

    <img src="” alt=”” />

  5. Mike says:

    Nope, it’s not going to let me… Perhaps Alex would be good enough to add an update to the post?

  6. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way
    I’ll be subscribing to your feed and I hope you post again soon.

  7. Youngistaan says:

    Nice tips and thanks for sharing ‘10 Tips to Improve Your WordPress Theme‘ with us

  8. Alex Denning says:

    Aah! Sorry guys! I did sort of miss out the most important part! Just about to update.

  9. George Serradinho says:

    This seems like a nice little hack. I have not tried it out as of yet, but maybe later.

    Thanks for sharing this info.

  10. Rahul Sonar says:

    very nice post.. thanks for the help..

  11. donswedberg says:

    nice post!

    don´t get it tough – my thumbnails won’t show. Can someone explain the “need to echo $img out into an tag to actually display the image” part for me?

  12. etomyam says:

    I’ve tried this code in my new subdomain and it works, but somehow the image won’t resize accordingly when applied to my existing blog…hmmm..so curious

  13. etomyam, did you use that exact code?

  14. Lio says:

    Would be nice to have a code that put a “replacement” thumbnail, if no thumbnail is found in attachments…
    How can I do that?

  15. Lio says:

    BTW, thanks for this nice hack, it’s working fine on my site; thing is, when there’s no image in the post… it needs improvements then :)

  16. Lio, you mean like a default image?
    I don’t know how to do it, but the easiest way will be to use the favicon image (jpg format) as a default. But then it is required that you upload an image to a specific location and put a reference in the code to that location.

  17. Lio says:

    yes, that’s exactly what I meant; something like the default gravatar; a default image situated on the server replaces the thumbnail when it’s not available.
    I’m sure some code masters could help on that…

  18. take says:

    I’m using a similar function to pull the images automatically to feed my gallery using:
    function postimage($size=’medium’,$num=-1,$lighbox=1) {
    if ( $images = get_children(array(
    ‘post_parent’ => get_the_ID(),
    ‘post_type’ => ‘attachment’,
    ‘numberposts’ => $num,
    ‘order’ => ‘ASC’,
    ‘orderby’ => ‘ID’,
    ‘post_mime_type’ => ‘image’,)))
    {
    foreach( $images as $image ) {
    $attachmenturl=wp_get_attachment_url($image->ID);
    $attachmentimage=wp_get_attachment_image($image->ID, $size );
    $img_title = $image->post_title;
    $img_desc = $image->post_excerpt;
    if ($size != “full”){
    echo ”.$attachmentimage.”;
    } else {
    echo ”;
    }
    }
    } else {
    echo “No Image”;
    }
    }

    This is working fine but I’d rather use the medium size wordpress image instead of the full size as this could improve speed. Could anyone give me a hint how to go about? Basically $attachmenturl should print the URL to the medium size attachment..

  19. take says:

    sorry, I see my code doesn’t come through properly, I posted it here http://snipt.org/llgp

  20. Elaine- says:

    Hi, I was wondering what the numberposts was for, when i only get 10 thumbnails because i have ten posts per page on my blog, i put this code in my blog hoping to be able to change the number of thumbnails on my archives page, but it doesn’t!! any suggestions? thanks man!!

  21. Ryan says:

    Damn that looks useful!

    It hadn’t even occurred to me to do that before, but it makes total sense.

    Thanks for the awesome tip :)

    I could see this begin very useful when implemented alongside the new thumbnail system which will probably be coming in Wp 2.9. If no thumbnail is set by the user, then it could be set up to default back to grabbing one off the page like this, and if none is found on the page, then it could default back to something else.

Trackbacks/Pingbacks »

  1. tj mapes » Blog Archive » What I’m Reading (weekly) says:
  2. TECHFLAPS - Waves of Technology | 10 Extremely Useful Wordpress Hacks says: