Bits of .NET

🖼️ Make Every Post Stand Out with a Thumbnail

Text-only posts are boring. Featured Images display post thumbnails. Essential for blog archives, social sharing, SEO.

📝 Enable Featured Images

// functions.php
add_theme_support('post-thumbnails');

// For specific post types
add_theme_support('post-thumbnails', array('post', 'page', 'portfolio'));

// Set custom image sizes
add_image_size('featured-large', 1200, 600, true);
add_image_size('featured-small', 300, 200, true);

// Set default image size
set_post_thumbnail_size(1200, 600, true);

🎯 Display Featured Images

// In archive template
if (has_post_thumbnail()) {
    the_post_thumbnail('featured-large');
} else {
    echo '<img src="' . get_stylesheet_directory_uri() . '/images/default.jpg" alt="Default">';
}

// Get URL of featured image
$image_url = get_the_post_thumbnail_url($post_id, 'full');

// With custom attributes
the_post_thumbnail('medium', array(
    'class' => 'img-responsive',
    'alt' => get_the_title()
));

// For Open Graph (social sharing)
if (has_post_thumbnail()) {
    $image = get_the_post_thumbnail_url(get_the_ID(), 'full');
    echo '<meta property="og:image" content="' . $image . '" />';
}

💡 Best Practices

• Always add alt text for accessibility and SEO
• Use descriptive filenames (not IMG_1234.jpg)
• Optimize image size (not too large)
• Set a default fallback image for posts without featured images
• Use for social sharing (Open Graph)