WordPress: Custom Thumbnails

| Ngoc Nguyen

When developing a WordPress theme, I want to use my own custom thumbnails and to remove WordPress’ default thumbnails. The following snippets can be added to the functions.php file to:

  • Add Custom Thumbnail Support to the Theme
  • Remove WordPress Default Thumbnails
  • Add Custom Thumbnail Support to the Media Library

Add Custom Thumbnail Support to the Theme

We are adding two custom thumbnail sizes to this theme – 360×270 and 640×360 and we are going to crop it to size. If you are unfamiliar with the add_image_size function, you can read up on it at http://codex.wordpress.org/Function_Reference/add_image_size.


	if ( ! function_exists( 'themename_setup' ) ):
		function themename_setup() {
			// Adds support for custom thumbnails
		        add_theme_support( 'post-thumbnails' );
			add_image_size( '4x3-thumb', 360, 270, true ); // cropped
			add_image_size( '16x9-thumb', 640, 360, true ); // cropped
		}
	endif; // end setup
	
	add_action( 'after_setup_theme', 'themename_setup' );

Remove WordPress Default Thumbnails

We want to remove the default thumbnails because we are not using them so as to prevent the creation of redundant images.


	function remove_default_wordpress_image_sizes($sizes) {
		   unset( $sizes['thumbnail']);
		   unset( $sizes['medium']);
		   unset( $sizes['large']);

		   return $sizes;
	}
	
	add_filter( 'intermediate_image_sizes_advanced', 'remove_default_wordpress_image_sizes' );

Add Custom Thumbnail Support to the Media Library

The final step is to add our custom thumbnail sizes to the media library so that we can use it in posts/pages.


	function update_wordpress_image_sizes($sizes) {
		   $result = array(
				"4x3-thumb" => __( "4x3 Thumbnail" ),
				"16x9-thumb" => __( "16x9 Thumbnail" ),
				"full" => __( "Original size" )
		   );
			
		   return $result;
	}
	
	add_filter( 'image_size_names_choose', 'update_wordpress_image_sizes' );

Notice the before and after:

Wordpress Custom Thumbnails

You May Also Like: