Change thumbnail size in wordpress

We must understand theme thumbnails sizes before I tell you about changing thumbnail sizes without using a plugin.Featured image and thumbnail are just the same in WordPress.

The Thumbnails sizes are defined in WordPress Settings->Media . The smallest thumbnail out there is used as thumbnail in the archive pages,search and category post listings.This may be 150×100 or you may choose a larger size.

In case your theme also defines thumbnail sizes,you may look for a function adding sizes to thumbnails in your themes functions.php file.The code may look not exactly but something like the following :-

function theme_add_image_sizes() {

	// Add Custom Header Image Size.
	add_image_size( 'theme-header-image', 1920, 480, true );

	// Add different thumbnail sizes for widgets and post layouts.
	add_image_size( 'theme-thumbnail-small', 120, 80, true );
	add_image_size( 'theme-thumbnail-medium', 360, 240, true );
	add_image_size( 'theme-thumbnail-large', 600, 400, true );
	add_image_size( 'theme-thumbnail-single', 840, 420, true );
}
add_action( 'after_setup_theme', 'theme_add_image_sizes' );

Your theme may be displaying thumbnails using one of the small or medium sizes,or not having such a function.If that is the case then you may settle with defining thumbnail sizes in Settings->Media.

If your theme defines the sizes then you must first find out what sizes thumbnails are displayed with.You can do this by searching for the text ,for example , for the example code above as a sample code ,you can search for theme-thumbnail-medium or theme-thumbnail-small.

You can change the thumbnail sizes by overriding the Parent function in original themes’s functions.php file,as described above.

You will need to add a new custom function and add thumbnail sizes to that function in your Child Theme’s functions.php file.If the code in your original theme’s functions.php looks like the code block as shown earlier in this article,then to override that function you will need to edit existing code defining thumbnail sizes as follows and add it to your child theme’s functions.php file.

function my_theme_add_image_sizes() {
    remove_action( 'after_setup_theme', 'theme_add_image_sizes' );
	
	// Add Custom Header Image Size.
	add_image_size( 'theme-header-image', 1920, 480, true );

	// Add different thumbnail sizes for widgets and post layouts.
	add_image_size( 'theme-thumbnail-small', 150, 100, true );//modified 120/80
	add_image_size( 'theme-thumbnail-medium', 150, 100, true );//modified 360/240
	add_image_size( 'theme-thumbnail-large', 600, 400, true );
	add_image_size( 'theme-thumbnail-single', 840, 420, true );
}
add_action( 'wp_loaded', 'my_theme_add_image_sizes' );

The above code has modified the image sizes as you can see in the comments marked as //modified.Save and upload the functions.php file to your child themes folder.Reload a page on your website.The changed thumbnails sizes wont be immediately visible as the existing thumbnails will be shown.

The existing thumbnails need to be regenerated to correct sizes as specified now in the Theme and Media->Settings page (Keep sizes same for the theme specified size for thumbnail and the smallest thumbnail setting in Media->Settings).Now install the plugin Regenerate Thumbnails. This plugin will regenerate the thumbnails to the sizes specified in in theme and Media-Settings page in WordPress Admin



That is all.

If you liked this article please do leave a reply and share it with friends.

Thanks.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.