Get the First Image from a Post and Display It

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

function get_first_image() {
     global $post, $posts;
     $first_img = '';
     ob_start();
     ob_end_clean();
     $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;
}

Display the Image

"<?php"/>

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:

function get_first_item() {
	global $post, $posts;
	$first_list = '';
	ob_start();
	ob_end_clean();
	//echo $post->post_content;
	$matches=array();
	$output = preg_match_all('/
  • ([^`]*?)

/’, $post->post_content, $matches); //var_dump($matches); $first_list = $matches [1] [0]; if(empty($first_list)){ //Defines a default image $first_list = “Sorry try again…”; } return $first_list; }

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!

11 thoughts on “Get the First Image from a Post and Display It

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

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

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

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

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

  5. 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 . ‘](‘ . get_permalink($post) . ‘)’; $output .= get_the_excerpt(); $output .= ‘[Прочети до края](‘ . get_permalink($post) . ‘)’; $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

Leave a Reply

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