Implementation of random display of thumbnails in WordPress articles

In our development and production of wordpress theme, most of us will do the home page and list page to automatically call the first picture in the article as a thumbnail. If there is no thumbnail in the article, the default thumbnail will be displayed, but this will repeat a large number of default thumbnails, which is very impressive to the user experience. The following code just solves the problem of random display of thumbnails in WordPress articles, which can Let the article thumbnail random display, if there is a thumbnail will call the thumbnail, no thumbnail will randomly select a thumbnail.

If you don’t want the thumbnail to be displayed randomly, you can also automatically get the first picture in the article as the thumbnail. For specific tutorial, please check out this article “WordPress automatically gets the first picture in the article as a thumbnail”

There are many similar tutorials on the Internet, but several tested codes are invalid, and even syntax errors. The following is a version of wptootutorial website available for pro testing:

//Support external link thumbnail
if ( function_exists('add_theme_support') )
function catch_first_image() 
	global $post, $posts;$first_img = '';
	$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	//Judge whether the picture is too small
		$image_size = getimagesize($first_img);
		$image_width = $image_size[0];
	//If the first image does not exist or is too small,The random picture is returned
	if(empty($first_img) || $image_width<50){
		$first_img = '';
		//from2Random selection in a picture,It can be set according to the number of pictures
		$random = mt_rand(1, 2);
		echo get_bloginfo ( 'stylesheet_directory' );
		echo '/images/random/'.$random.'.JPG';
  return $first_img;

usage method

1. Copy the code above and paste it into the theme functions.php Medium

2. Create a new / images / random / directory in the theme and upload some pictures you like. Rename them to 1, 2, 3, 4, 5.jpg.

3. Add the following code where you want to show the thumbnail

<?php echo catch_first_image(); ?>
Related Article
How to add user defined upload avatar function in WordPress

Friends who use WordPress to build a website should know that WordPress itself does not have the function of uploading Read more

How to get the number of articles and comments of the current logined user in WordPress

When developing WordPress Theme user center, I want to get the number of articles and comments of current logged in Read more

WordPress tips: get statistics of the number of pictures in the article

As far as I know, WordPress has no function to count the number of pictures in the article, so to Read more

WordPress details optimization to automatically add ALT and title information to the article image

Friends who know a little bit about SEO optimization should understand that image ALT and image title optimization are very Read more

Leave a Reply

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

To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image