classic-theme-media-images

Classic Theme Media and Images

Use this when adding or reviewing featured images, attachment images, custom image sizes, responsive image attributes, image accessibility, or theme asset images in a classic PHP theme.

When to Use This Skill

• Adding featured image support.
• Rendering thumbnails in archives, cards, heroes, or singular templates.
• Registering custom image sizes.
• Replacing hand-built <img> tags with WordPress image functions.
• Fixing layout shift, oversized images, missing alt text, or broken responsive image output.

Enable Featured Images

Enable post thumbnails during theme setup.

add_action( 'after_setup_theme', 'mytheme_setup' );

function mytheme_setup() {
	add_theme_support( 'post-thumbnails' );
}

Rules:

• Register theme support on after_setup_theme.
• Use add_theme_support( 'post-thumbnails', array( 'post', 'page' ) ) only when intentionally limiting post types.
• Do not assume featured image UI exists until support is declared.

Register Image Sizes

Register reusable sizes in theme setup.

add_action( 'after_setup_theme', 'mytheme_image_sizes' );

function mytheme_image_sizes() {
	set_post_thumbnail_size( 1200, 675, true );
	add_image_size( 'mytheme-hero', 1600, 900, true );
	add_image_size( 'mytheme-card', 640, 360, true );
	add_image_size( 'mytheme-portrait', 480, 640, array( 'center', 'top' ) );
}

Rules:

• Use named sizes for repeated layouts.
• Use hard crop only when the design truly needs fixed framing.
• Named sizes affect newly generated image metadata. Existing uploads need thumbnail regeneration.
• Do not register dozens of one-off sizes; each size increases storage and processing work.
• Prefix custom size names with the theme slug.

Render Featured Images

Use core thumbnail functions.

if ( has_post_thumbnail() ) {
	the_post_thumbnail(
		'mytheme-card',
		array(
			'class' => 'entry-card-image',
		)
	);
}

Rules:

• Use has_post_thumbnail() before rendering optional image areas.
• Use the_post_thumbnail() for direct output.
• Use get_the_post_thumbnail() when composing a larger string.
• Use appropriate sizes: cards should not use full.
• Keep width/height attributes unless there is a strong reason; they help prevent layout shift.
• Do not hand-build upload URLs from _thumbnail_id meta.