Use first Post image as featured image in WordPress

The WordPress have a featured image option for posts. If we have an introduction image for our post, we can make it as a featured image & can display it in our pages.

Beginning with an image is a good idea. If the image can speak well, we can catch the readers. But we know that getting a good featured image is little hard for normal users.

In almost blog, we will use few images with in posts. If we are not too bothered about dedicated featured image, we can use the first post image as featured image for posts and pages.

We use a simple function to achieve this hack. The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.

• First we want to open the functions.php file in our theme.

• Paste this code in it. Don’t forget to specify a default image on line 10 & add an image in image sub folder (in case a post of ours does not have an image).

  function catch_that_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;
  }
  

• Save the functions.php file.

• On your blog home page (index.php etc), call this function to get the URL of the first image from the post.

  <?php echo catch_that_image() ?>
  

I think this trick is helpful for personnel bloggers & beginners. Try this one & start our post with an image.

Recent Posts

1. Automating Code Linting with GitHub Actions for WordPress Plugins
2. Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer
3. The Ultimate Guide to Indexing in Database Design
4. Understanding 'update_meta_cache' in WordPress - When to Use It, When Not to, and Its Impact on Database Queries
5. A Guide to Configuring JavaScript and SCSS Paths in WordPress Plugins with @wordpress/scripts

This article was published on April 17, 2014

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.