Tag: thumbnails

  • WordPress: Custom Thumbnails

    WordPress: Custom Thumbnails

    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