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!

  • http://onethatknows.com Omer Rosenbaum

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

  • Alex Denning

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

  • http://onethatknows.com Omer Rosenbaum

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

  • http://www.nearfieldcommunicationsworld.com Mike

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

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

  • http://www.nearfieldcommunicationsworld.com Mike

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

  • http://www.pedeee.com sulumits retsambew

    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.

  • Youngistaan

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

  • Alex Denning

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

  • George Serradinho

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

    Thanks for sharing this info.

  • Pingback: Il meglio della settimana #27 | BigThink

  • Pingback: tj mapes » Blog Archive » What I’m Reading (weekly)

  • http://www.amrita-rao.in Rahul Sonar

    very nice post.. thanks for the help..

  • donswedberg

    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?

  • etomyam

    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

  • http://onethatknows.com Omer Rosenbaum

    etomyam, did you use that exact code?

  • http://www.graphicdiversion.be Lio

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

  • http://www.graphicdiversion.be Lio

    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 :)

  • http://onethatknows.com Omer Rosenbaum

    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.

  • http://www.graphicdiversion.be Lio

    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…

  • Pingback: How to: Use Thumbnails Generated by WordPress | CSS Luxury

  • take

    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..

  • take

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

  • http://totallylike.me Elaine-

    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!!

  • http://pixopoint.com/ Ryan

    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.

  • Pingback: TECHFLAPS - Waves of Technology | 10 Extremely Useful Wordpress Hacks