Skip to main content

Course Progress

Loading...

🎨 Theme Support & Features

Enable WordPress core features in your theme

Master add_theme_support() and all available theme features

Learning Objectives

  • Understand add_theme_support() function
  • Enable post thumbnails and custom image sizes
  • Add custom logo and header support
  • Implement post formats
  • Enable HTML5 markup support
  • Add title tag and feed links
  • Configure custom background and colors
  • Implement responsive embeds and wide alignment

Understanding Theme Support

Theme support allows your theme to opt-in to WordPress features. Instead of WordPress assuming your theme can handle every feature, you explicitly declare what your theme supports.

💡
Key Concept
Theme support is added in the after_setup_theme action hook, ensuring WordPress is ready but before any output is generated.

Basic Theme Support Setup

<?php
function mytheme_setup() {
    // Add various theme supports here
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-logo' );
    // More supports...
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Essential Theme Features

🖼️ Post Thumbnails

Enable featured images for posts and pages.

// Enable for all post types
add_theme_support( 'post-thumbnails' );

// Enable only for specific post types
add_theme_support( 'post-thumbnails', array( 'post', 'page', 'product' ) );

// Set default thumbnail size
set_post_thumbnail_size( 800, 600, true );

// Add custom image sizes
add_image_size( 'hero-image', 1920, 600, true );
add_image_size( 'blog-thumbnail', 400, 300, true );
add_image_size( 'square-thumb', 500, 500, true );

📝 Title Tag

Let WordPress manage the document title.

// Enable title tag support
add_theme_support( 'title-tag' );

// Customize title separator (optional)
add_filter( 'document_title_separator', function() {
    return '|';
});

// Modify title parts (optional)
add_filter( 'document_title_parts', function( $title ) {
    if ( is_home() ) {
        $title['tagline'] = 'Custom Tagline';
    }
    return $title;
});

🎯 Custom Logo

Add logo upload capability in Customizer.

add_theme_support( 'custom-logo', array(
    'height'               => 100,
    'width'                => 400,
    'flex-height'          => true,
    'flex-width'           => true,
    'header-text'          => array( 'site-title', 'site-description' ),
    'unlink-homepage-logo' => true,
) );

// Display in theme
if ( function_exists( 'the_custom_logo' ) ) {
    the_custom_logo();
}

🌐 HTML5 Support

Enable HTML5 markup for core elements.

add_theme_support( 'html5', array(
    'search-form',
    'comment-form',
    'comment-list',
    'gallery',
    'caption',
    'style',
    'script',
    'navigation-widgets',
) );

📰 Automatic Feed Links

Add RSS feed links to head section.

// Add default posts and comments RSS feed links
add_theme_support( 'automatic-feed-links' );

🎨 Custom Background

Allow users to set custom backgrounds.

add_theme_support( 'custom-background', array(
    'default-color'          => 'ffffff',
    'default-image'          => '',
    'default-repeat'         => 'no-repeat',
    'default-position-x'     => 'center',
    'default-position-y'     => 'center',
    'default-size'           => 'cover',
    'default-attachment'     => 'fixed',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
) );

Post Formats

Post formats allow users to customize the presentation of posts based on their content type.

📝
Standard
📄
Aside
🖼️
Image
🎥
Video
💬
Quote
🔗
Link
🖼️
Gallery
📌
Status
🎵
Audio
💭
Chat

Implementing Post Formats

<?php
// Add post format support
add_theme_support( 'post-formats', array(
    'aside',
    'gallery',
    'link',
    'image',
    'quote',
    'status',
    'video',
    'audio',
    'chat',
) );

// Using post formats in templates
if ( has_post_format( 'quote' ) ) {
    get_template_part( 'template-parts/content', 'quote' );
} elseif ( has_post_format( 'gallery' ) ) {
    get_template_part( 'template-parts/content', 'gallery' );
} else {
    get_template_part( 'template-parts/content', get_post_format() );
}

// Style post formats
function mytheme_post_classes( $classes ) {
    if ( has_post_format( 'quote' ) ) {
        $classes[] = 'quote-format';
    }
    return $classes;
}
add_filter( 'post_class', 'mytheme_post_classes' );

Custom Header Support

Enable Custom Headers

Allow users to upload custom header images or videos.

Complete Custom Header Setup

<?php
// Add custom header support
add_theme_support( 'custom-header', array(
    'default-image'          => get_template_directory_uri() . '/images/header.jpg',
    'default-text-color'     => '000000',
    'width'                  => 1920,
    'height'                 => 400,
    'flex-width'             => true,
    'flex-height'            => true,
    'uploads'                => true,
    'random-default'         => false,
    'header-text'            => true,
    'wp-head-callback'       => 'mytheme_header_style',
    'admin-head-callback'    => 'mytheme_admin_header_style',
    'admin-preview-callback' => 'mytheme_admin_header_image',
    'video'                  => true,
    'video-active-callback'  => 'is_front_page',
) );

// Callback for front-end styling
function mytheme_header_style() {
    $header_text_color = get_header_textcolor();
    
    // If no custom color, return
    if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
        return;
    }
    
    // Custom CSS
    ?>
    <style type="text/css">
    <?php if ( ! display_header_text() ) : ?>
        .site-title,
        .site-description {
            position: absolute;
            clip: rect(1px, 1px, 1px, 1px);
        }
    <?php else : ?>
        .site-title a,
        .site-description {
            color: #<?php echo esc_attr( $header_text_color ); ?>;
        }
    <?php endif; ?>
    </style>
    <?php
}

// Display custom header in theme
if ( get_header_image() ) : ?>
    <div class="custom-header">
        <img src="<?php header_image(); ?>" 
             width="<?php echo get_custom_header()->width; ?>" 
             height="<?php echo get_custom_header()->height; ?>" 
             alt="">
    </div>
<?php endif; ?>

Block Editor (Gutenberg) Support

Modern Editor Features

Block Editor Theme Support

<?php
// Wide alignment support
add_theme_support( 'align-wide' );

// Block styles support
add_theme_support( 'wp-block-styles' );

// Responsive embeds
add_theme_support( 'responsive-embeds' );

// Custom editor styles
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );

// Editor color palette
add_theme_support( 'editor-color-palette', array(
    array(
        'name'  => esc_attr__( 'Primary', 'textdomain' ),
        'slug'  => 'primary',
        'color' => '#667eea',
    ),
    array(
        'name'  => esc_attr__( 'Secondary', 'textdomain' ),
        'slug'  => 'secondary',
        'color' => '#764ba2',
    ),
    array(
        'name'  => esc_attr__( 'Dark Gray', 'textdomain' ),
        'slug'  => 'dark-gray',
        'color' => '#1e293b',
    ),
    array(
        'name'  => esc_attr__( 'Light Gray', 'textdomain' ),
        'slug'  => 'light-gray',
        'color' => '#f3f4f6',
    ),
) );

// Editor font sizes
add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => esc_attr__( 'Small', 'textdomain' ),
        'slug' => 'small',
        'size' => 12,
    ),
    array(
        'name' => esc_attr__( 'Regular', 'textdomain' ),
        'slug' => 'regular',
        'size' => 16,
    ),
    array(
        'name' => esc_attr__( 'Large', 'textdomain' ),
        'slug' => 'large',
        'size' => 24,
    ),
    array(
        'name' => esc_attr__( 'Huge', 'textdomain' ),
        'slug' => 'huge',
        'size' => 36,
    ),
) );

// Disable custom colors
add_theme_support( 'disable-custom-colors' );

// Disable custom font sizes
add_theme_support( 'disable-custom-font-sizes' );

// Custom line height
add_theme_support( 'custom-line-height' );

// Custom units
add_theme_support( 'custom-units', array( 'px', 'rem', 'em', '%' ) );

// Custom spacing
add_theme_support( 'custom-spacing' );

Working with Image Sizes

Custom Image Sizes

Thumbnail
150x150
Hard crop
Medium
300x300
Soft crop
Large
1024x1024
Soft crop
Custom Hero
1920x600
Hard crop

Managing Image Sizes

<?php
// Add custom image sizes
add_image_size( 'hero-banner', 1920, 600, true ); // Hard crop
add_image_size( 'blog-featured', 800, 400, array( 'center', 'center' ) ); // Crop position
add_image_size( 'gallery-thumb', 300, 300, true );
add_image_size( 'product-single', 600, 600, false ); // Soft crop

// Make custom sizes available in media library
add_filter( 'image_size_names_choose', 'mytheme_custom_sizes' );
function mytheme_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'hero-banner'    => __( 'Hero Banner' ),
        'blog-featured'  => __( 'Blog Featured' ),
        'gallery-thumb'  => __( 'Gallery Thumbnail' ),
        'product-single' => __( 'Product Image' ),
    ) );
}

// Using custom sizes in theme
the_post_thumbnail( 'hero-banner' );
echo wp_get_attachment_image( $attachment_id, 'blog-featured' );

// Get image URL only
$image_url = get_the_post_thumbnail_url( get_the_ID(), 'gallery-thumb' );

Complete Theme Support Reference

Feature Function Call WordPress Version
Post Thumbnails add_theme_support( 'post-thumbnails' ) 2.9+
Custom Background add_theme_support( 'custom-background' ) 3.4+
Custom Header add_theme_support( 'custom-header' ) 3.4+
Custom Logo add_theme_support( 'custom-logo' ) 4.5+
Automatic Feed Links add_theme_support( 'automatic-feed-links' ) 3.0+
HTML5 add_theme_support( 'html5' ) 3.6+
Title Tag add_theme_support( 'title-tag' ) 4.1+
Post Formats add_theme_support( 'post-formats' ) 3.1+
Wide Alignment add_theme_support( 'align-wide' ) 5.0+
Block Styles add_theme_support( 'wp-block-styles' ) 5.0+
Responsive Embeds add_theme_support( 'responsive-embeds' ) 5.0+
Editor Styles add_theme_support( 'editor-styles' ) 5.0+
Dark Editor Style add_theme_support( 'dark-editor-style' ) 5.0+
Customize Selective Refresh add_theme_support( 'customize-selective-refresh-widgets' ) 4.5+
Starter Content add_theme_support( 'starter-content' ) 4.7+

Complete Theme Setup Example

Basic Theme Support Setup

<?php
/**
 * Basic theme setup
 */
function mytheme_basic_setup() {
    // Textdomain
    load_theme_textdomain( 'mytheme', get_template_directory() . '/languages' );
    
    // Essential supports
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    
    // HTML5 support
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ) );
    
    // Custom logo
    add_theme_support( 'custom-logo', array(
        'height'      => 60,
        'width'       => 200,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    
    // Image sizes
    add_image_size( 'featured', 1200, 600, true );
    add_image_size( 'thumbnail-large', 600, 400, true );
}
add_action( 'after_setup_theme', 'mytheme_basic_setup' );

Advanced Theme Support Setup

<?php
/**
 * Advanced theme setup with all features
 */
function mytheme_advanced_setup() {
    // All basic features
    mytheme_basic_setup();
    
    // Post formats
    add_theme_support( 'post-formats', array(
        'aside', 'gallery', 'link', 'image', 'quote',
        'status', 'video', 'audio', 'chat'
    ) );
    
    // Custom background
    add_theme_support( 'custom-background', array(
        'default-color' => 'f5f5f5',
        'default-image' => '',
    ) );
    
    // Custom header
    add_theme_support( 'custom-header', array(
        'default-image'      => get_template_directory_uri() . '/img/header.jpg',
        'default-text-color' => '000',
        'width'              => 1920,
        'height'             => 400,
        'flex-width'         => true,
        'flex-height'        => true,
    ) );
    
    // Selective refresh for widgets
    add_theme_support( 'customize-selective-refresh-widgets' );
    
    // Custom image sizes with positions
    add_image_size( 'hero', 1920, 800, array( 'center', 'center' ) );
    add_image_size( 'square', 600, 600, true );
    add_image_size( 'portrait', 400, 600, true );
    add_image_size( 'landscape', 800, 450, true );
}
add_action( 'after_setup_theme', 'mytheme_advanced_setup' );

Block Editor Support Setup

<?php
/**
 * Block Editor (Gutenberg) support
 */
function mytheme_block_editor_setup() {
    // Wide and full alignment
    add_theme_support( 'align-wide' );
    
    // Block styles
    add_theme_support( 'wp-block-styles' );
    
    // Responsive embeds
    add_theme_support( 'responsive-embeds' );
    
    // Editor styles
    add_theme_support( 'editor-styles' );
    add_editor_style( 'style-editor.css' );
    
    // Color palette
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Primary', 'mytheme' ),
            'slug'  => 'primary',
            'color' => '#667eea',
        ),
        array(
            'name'  => __( 'Secondary', 'mytheme' ),
            'slug'  => 'secondary',
            'color' => '#764ba2',
        ),
        array(
            'name'  => __( 'Dark', 'mytheme' ),
            'slug'  => 'dark',
            'color' => '#1e293b',
        ),
        array(
            'name'  => __( 'Light', 'mytheme' ),
            'slug'  => 'light',
            'color' => '#f8f9fa',
        ),
    ) );
    
    // Gradient presets
    add_theme_support( 'editor-gradient-presets', array(
        array(
            'name'     => __( 'Primary to Secondary', 'mytheme' ),
            'gradient' => 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            'slug'     => 'primary-to-secondary',
        ),
    ) );
    
    // Font sizes
    add_theme_support( 'editor-font-sizes', array(
        array(
            'name' => __( 'Small', 'mytheme' ),
            'slug' => 'small',
            'size' => 14,
        ),
        array(
            'name' => __( 'Normal', 'mytheme' ),
            'slug' => 'normal',
            'size' => 18,
        ),
        array(
            'name' => __( 'Large', 'mytheme' ),
            'slug' => 'large',
            'size' => 24,
        ),
        array(
            'name' => __( 'Huge', 'mytheme' ),
            'slug' => 'huge',
            'size' => 32,
        ),
    ) );
    
    // Custom spacing
    add_theme_support( 'custom-spacing' );
    add_theme_support( 'custom-line-height' );
}
add_action( 'after_setup_theme', 'mytheme_block_editor_setup' );

Best Practices

Theme Support Best Practices

  • Use after_setup_theme hook: Always add theme support in this action
  • Check for function existence: Use function_exists() before calling functions
  • Provide defaults: Set sensible default values for customizable features
  • Document requirements: Clearly document which features your theme requires
  • Test thoroughly: Test all features with different content types
  • Consider performance: Don't add unnecessary image sizes
  • Follow standards: Use WordPress coding standards
  • Make it translatable: Use proper text domains for all strings
Don't add theme support in child themes for features already supported by the parent theme. This can cause conflicts.

Practice Exercise

💻
Configure Complete Theme Support

Create a comprehensive theme setup function that includes:

  1. Enable post thumbnails with 3 custom image sizes
  2. Add custom logo support with specific dimensions
  3. Enable HTML5 support for all available elements
  4. Add support for at least 5 post formats
  5. Configure custom header with default image
  6. Set up Block Editor color palette (min 4 colors)
  7. Add Block Editor font sizes (min 3 sizes)
  8. Enable responsive embeds and wide alignment
  9. Add title tag and feed links support
  10. Test each feature to ensure it works correctly

Additional Resources