How to get the first image from a WordPress post and display it on your website

If you work with WordPress a lot you may come to a point in time where you need to retrieve the first bullet in a list or the first image from your post and display it somewhere on your site. Luckily, there’s a simple way to do this… check it out!

Add this Function to Functions.php

Display the Image

Get First Bullet in an Unordered List

Regular expressions make it possible to retrieve the first bullet item in an unordered list very easy. See the following example:

You can see that there’s a couple of lines of code commented out above. If you are having problems figuring out the function uncomment the lines to get more information.

Display the List Item:

Using the functions above have come in handy for retrieving data from post in WordPress. I orginally got the code from LiveXP.net, thanks guys!

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow
Devin

Is your WordPress Running Slow?

Milliseconds are money. Website speed is extremely important. We highly recommend WP Engine. Why? Because they make a sluggish WP site fast, support is great and they have excellent uptime.

WP Engine Logo
  • BenNadler

    I’m curious – how would one make the search apply to just a specific post type? I have a custom post type, and it would be great if there was a way for WordPress to just display the first image from those on the home page.

  • Anonymous

    I’m curious – how would one make the search apply to just a specific post type? I have a custom post type, and it would be great if there was a way for WordPress to just display the first image from those on the home page.

  • Timur

    Nice tutorial, but how can I crop the first image as well, so that it doesn’t look distorted, but rather uses the dimensions and crop the first image? Is that even possible?

    Thanks
    T.

  • Timur

    Nice tutorial, but how can I crop the first image as well, so that it doesn’t look distorted, but rather uses the dimensions and crop the first image? Is that even possible?

    Thanks
    T.

    • http://wordimpress.com Devin Walker

      Are you familiar with timthumb? This is an image cropping script that’s easy to implement and could be worth your while to check out. I’ve used it on many websites before and recommend it.

  • Cotorobai Adrian

    better display image with this:

    <img src="" />

    otherways it won`t work

  • Cotorobai Adrian

    better display image with this:

    <img src="" />

    otherways it won`t work

  • Hi08uh

    but when i use img class=”alignleft”, it show not the first imat, but the last image.
    here the example for the archieve page:

    http://tokolawas.com/category/gemstone-perhiasan/
    and the single post is here:

    http://tokolawas.com/batu-akik-3-warna/

     

  • Hi08uh

    but when i use img class=”alignleft”, it show not the first imat, but the last image.
    here the example for the archieve page:

    http://tokolawas.com/category/gemstone-perhiasan/
    and the single post is here:

    http://tokolawas.com/batu-akik-3-warna/

     

  • Maya

    I have this code to get last posts connected to tags.

    $num, ‘tag__in’ => $tag_id_array, ‘order’ => $order ) );

    foreach($tag_posts as $post) {

    setup_postdata($post);

    $output .= ”;

    $output .= ‘‘ .
    $post->post_title . ‘
    ‘;

    $output .= get_the_excerpt();

    $output .= ‘Прочети до края‘;

    $output .= ”;

    }

    return $output;

    }

    }

    if (!function_exists(“get_tag_ID”)) {

    function get_tag_ID($tag_name) {

    $tag = get_term_by(‘name’, $tag_name, ‘post_tag’);

    if ($tag) {

    return $tag->term_id;

    } else {

    return 0;

    }

    }

    }

    print get_posts_by_tag(“Tag name”,”3″);

    ?>

    How to get first image and post date with this code?
    Thanks in advance