Simple WordPress Post Thumbnails with Regular Expressions

TimThumb is no longer supported or maintained.
More information →

These days everyone with a blog understands the importance of thumbnail images. Three years ago it was common place to have exclusively text, but now a nice image is a requirement. As such the process of implementing the image needs to be made easier.

With my WordPress themes, Elemental in particular, I have simplified things as much as possible. You can set your own thumbnail using the WordPress featured image functionality, or you can use custom fields (which is generally considered ‘old fashioned’ despite being the height of technology just 2 years gone). However my favorite methods is the automatic thumbnails – which is the system I use most often on my websites.

The automatic thumbnails method involves the theme working out what images are used in the post, and then resizing one of these. The benefit of this being that all I have to do is embed an image into a post, and my thumbnail will display.

Obviously, being the developer behind TimThumb, I use TimThumb for all of my thumbnail requirements. This means the hard part is working out what image to resize, and this is where I use Regular Expressions (often shortened to Regex).

A regular expression is a complicated looking string of text and punctuation that creates rules used by a computer to find information.

Before I show how I do this I feel I should point out that I am not an expert at Regex. I know the fundamentals, but working out proper regular expressions is an art form in itself, and it’s not one I am interested in learning. If you ever need to write a regular expression, then just Google it. 9 times out of 10 someone will have done what you want!

Find The Image

In pseudo code, what we need to do is:

  1. get the post content
  2. Use regex to find all images
  3. loop through all images and check if they are valid

Which in PHP looks something like:


	// get post content
	global $post;
	$content = $post->post_content;

	// set default image value
	$theImageSrc = '';

	// regex to find all images
	preg_match_all ('|<img .*?src=[\'"](.*?)[\'"].*?/>|i', $content, $matches);

	$imageCount = count ($matches);

	// needs to be a loop
	// Notice the += 2 in the for iterator
	// 0 = full image html tag
	// 1 = image path selected
	if ($imageCount >= 1) {
		for ($i = 1; $i <= $imageCount; $i += 2) {
			if (isset ($matches[$i][0])) {
				$theImageSrc = $matches[$i][0];
				break;
			}
		}
	}

Default Image

If you wanted to supply a default image when using this code then you could easily add the following code after the image detection above.


	if (empty ($theImageSrc)) {
		$theImageSrc = 'path/to/default/image.jpg';
	}

What Next?

So what can you do with this? What I did in Elemental is wrap that code into a function, and then combine it with the code I created in my post about how to use TimThumb with WordPress MultiSite. The resulting url can then be used as the image src with TimThumb, and that image can be used as a post thumbnail.

I actually combined this with a variety of other methods for grabbing the post image which means that however you attach an image to a post, it will be found. You can read about the different methods I use on this post on Elemental Hub.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

27 Sep 2016

Schedule content with Automatic Post Scheduler

Posting regular content is essential when you’re trying to build a successful blog or website – but it’s something I struggle with. I think I’ve found a solution that works for me though. Regular content is great for Google (and...
01 Jul 2014

I No Longer Use TimThumb – Here’s What I do Instead

Last week there was a second exploit found in TimThumb. Thankfully it was no-where near as bad as the first one – but it raised an interesting question of whether TimThumb is even needed anymore.TimThumb was made to be useful...
18 Oct 2009

WordPress 2.9 – the_post_image

It was recently announced that WordPress 2.9 includes a new function to get post images called the_post_image. There is some information about the command over on WPEngineer.Having post thumbnails is fantastic, they really liven up a post, but until recently...
27 May 2013

WordPress: 10 Years Young, What Does The Future Hold?

WordPress is now 10 years old. I started using wordpress 9 years ago – which means I joined the WordPress community early on. The reason I chose WordPress is simply because of the fabled 5 minute install process – I...
14 May 2013

Redesigning the WordPress Post Editor

Ghost is a project born from frustration with WordPress. Ironically it seems to be mostly WordPress power users who want to use it. The Ghost team – led by John O’Nolan – put Ghost on KickStarter last week and it...