WordPress add_theme_support(): title-tag, post-thumbnails, html5, align-wide Complete Guide

WordPress’s add_theme_support() function is the theme’s declaration to the core that it opts into specific features. Without these declarations, core features that require theme cooperation are simply inactive — there will be no <title> tag in the document head, no featured image support, no wide-aligned block support, and no custom logo picker in the Customizer. The function must be called inside the after_setup_theme hook (not init), because theme setup runs before init and some features — particularly html5 and title-tag — affect output that is generated before init fires. Correctly declaring theme support is the first step in building any production WordPress theme and has implications for accessibility, SEO, and the block editor.

Problem: A custom theme has no <title> tag in its source, featured images do not appear in the block editor sidebar, the Customizer has no Custom Logo option, and wide/full-width blocks are constrained to the content width.

Solution: Add all required add_theme_support() calls inside after_setup_theme. Each feature needs its own call with the correct argument structure.

<?php
// functions.php — must be in after_setup_theme, NOT init
add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup(): void {

    // ── 1. Dynamic  tag — replaces hardcoded <title> in header.php ─
    add_theme_support( 'title-tag' );

    // ── 2. Featured images (post thumbnails) ──────────────────────────
    add_theme_support( 'post-thumbnails' );
    // Enable for specific post types only:
    // add_theme_support( 'post-thumbnails', [ 'post', 'product' ] );

    // ── 3. HTML5 semantic markup for core elements ────────────────────
    add_theme_support( 'html5', [
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
        'style',    // outputs <style> without type attribute
        'script',   // outputs <script> without type attribute
    ] );

    // ── 4. Custom logo in the Customizer ──────────────────────────────
    add_theme_support( 'custom-logo', [
        'height'      => 80,
        'width'       => 250,
        'flex-height' => true,
        'flex-width'  => true,
        'header-text' => [ 'site-title', 'site-description' ], // hide when logo set
    ] );

    // ── 5. Wide and full-width block alignment ─────────────────────────
    add_theme_support( 'align-wide' );

    // ── 6. Responsive embeds (wraps iframes for CSS aspect-ratio) ────
    add_theme_support( 'responsive-embeds' );

    // ── 7. Disable core block patterns (if you supply your own) ──────
    // remove_theme_support( 'core-block-patterns' );

    // ── 8. Editor styles — load CSS into the block editor ─────────────
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/editor-style.css' );

    // ── 9. Custom background ──────────────────────────────────────────
    add_theme_support( 'custom-background', [
        'default-color' => 'ffffff',
    ] );

    // ── 10. Post formats ──────────────────────────────────────────────
    add_theme_support( 'post-formats', [
        'aside', 'image', 'video', 'quote', 'link', 'gallery',
    ] );

    // ── 11. Automatic feed links in <head> ────────────────────────────
    add_theme_support( 'automatic-feed-links' );

    // ── 12. Starter content for new theme previews ───────────────────
    add_theme_support( 'starter-content', [
        'posts' => [ 'home', 'about', 'contact' ],
    ] );

    // ── Translation readiness ─────────────────────────────────────────
    load_theme_textdomain( 'my-theme', get_stylesheet_directory() . '/languages' );
}

// ── Output the custom logo in templates ───────────────────────────────
// In header.php:
the_custom_logo(); // outputs <a><img></a> with proper classes

// Check if a logo has been set:
if ( has_custom_logo() ) {
    the_custom_logo();
} else {
    echo '<span class="site-title">' . esc_html( get_bloginfo( 'name' ) ) . '</span>';
}</code></pre>
<p><!-- /wp:cedaro/code --></p>
<p><!-- wp:paragraph --></p>
<p><strong>NOTE:</strong> <code>current_theme_supports()</code> lets you check at runtime whether a feature is active — useful in plugins that need to behave differently depending on what the active theme supports. If you are building a plugin that adds block editor features, always check <code>current_theme_supports( 'align-wide' )</code> before offering wide-alignment controls, or the UI will confuse users on themes that do not support wide blocks. The <code>title-tag</code> support is all-or-nothing — once you declare it, you must remove the hardcoded <code><title></code> tag from <code>header.php</code>, or the page will have two title elements.</p>
<p><!-- /wp:paragraph --></p>
                </article>
                <div class="after-article-block">
                    <div class="post-meta">
                        <div class="entry-tags">
                            <p></p>
                        </div>
                        <div class="share-post">
                            <span class="share-post-title">Share this post</span>
                            <div class="share-post-social-icons">
								        <div class="social-networks-wrap">
            <a class="twitter social-icon x-social-icon" rel="nofollow"
               href="https://x.com/share?url=https://helloadmin.com/wordpress-add-theme-support-title-tag-post-thumbnails-html5-align-wide/&text=WordPress%20add_theme_support():%20title-tag,%20post-thumbnails,%20html5,%20align-wide%20Complete%20Guide%20•%20HelloAdmin">
                <i class="x-icon" aria-hidden="true">𝕏</i>
            </a>
            <a class="facebook social-icon" rel="nofollow"
               href="https://www.facebook.com/sharer/sharer.php?u=https://helloadmin.com/wordpress-add-theme-support-title-tag-post-thumbnails-html5-align-wide/">
                <i class="fa fa-facebook" aria-hidden="true"></i>
            </a>
        </div>
	                            </div>
                        </div>
                    </div>
					                        <div class="related-posts">
                            <span class="related-posts-title">Related posts</span>
                            <hr class="line">
                            <div class="related-posts-lists">
																	                                    <article class="article" data-aos="fade-down" data-aos-duration="1500">
                                        <div class="article-img-wrap">
                                            <a href="https://helloadmin.com/wordpress-edge-caching-cloudflare-workers/">
                                                    <span class="article-img"
                                                          style="background-image: url(https://helloadmin.com/wp-data/uploads/2026/06/WordPress-Edge-Caching-with-Cloudflare-Workers-and-Cache-API-60x60.webp)">
                                                        <span class="arrow">
                                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                                        </span>
                                                    </span>
                                            </a>
                                        </div>
                                        <div class="article-desc">
                                            <a class="article-title" href="https://helloadmin.com/wordpress-edge-caching-cloudflare-workers/">
                                                <h6>WordPress Edge Caching with Cloudflare Workers and Cache API1</h6>
                                            </a>
                                            <div class="article-date">June 1, 2026</div>
                                        </div>
                                    </article>
																		                                    <article class="article" data-aos="fade-down" data-aos-duration="1500">
                                        <div class="article-img-wrap">
                                            <a href="https://helloadmin.com/wordpress-eeat-author-authority-signals/">
                                                    <span class="article-img"
                                                          style="background-image: url(https://helloadmin.com/wp-data/themes/hello_admin/img/default-image-article.jpg)">
                                                        <span class="arrow">
                                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                                        </span>
                                                    </span>
                                            </a>
                                        </div>
                                        <div class="article-desc">
                                            <a class="article-title" href="https://helloadmin.com/wordpress-eeat-author-authority-signals/">
                                                <h6>WordPress E-E-A-T: Building Author Authority Signals for Search</h6>
                                            </a>
                                            <div class="article-date">May 30, 2026</div>
                                        </div>
                                    </article>
																		                                    <article class="article" data-aos="fade-down" data-aos-duration="1500">
                                        <div class="article-img-wrap">
                                            <a href="https://helloadmin.com/typescript-wordpress-block-development-wordpress-scripts/">
                                                    <span class="article-img"
                                                          style="background-image: url(https://helloadmin.com/wp-data/themes/hello_admin/img/default-image-article.jpg)">
                                                        <span class="arrow">
                                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                                        </span>
                                                    </span>
                                            </a>
                                        </div>
                                        <div class="article-desc">
                                            <a class="article-title" href="https://helloadmin.com/typescript-wordpress-block-development-wordpress-scripts/">
                                                <h6>TypeScript in WordPress Block Development with @wordpress/scripts</h6>
                                            </a>
                                            <div class="article-date">May 25, 2026</div>
                                        </div>
                                    </article>
																		                                    <article class="article" data-aos="fade-up" data-aos-duration="1500">
                                        <div class="article-img-wrap">
                                            <a href="https://helloadmin.com/core-web-vitals-inp-optimisation-wordpress/">
                                                    <span class="article-img"
                                                          style="background-image: url(https://helloadmin.com/wp-data/themes/hello_admin/img/default-image-article.jpg)">
                                                        <span class="arrow">
                                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                                        </span>
                                                    </span>
                                            </a>
                                        </div>
                                        <div class="article-desc">
                                            <a class="article-title" href="https://helloadmin.com/core-web-vitals-inp-optimisation-wordpress/">
                                                <h6>Core Web Vitals: INP Optimisation for WordPress Themes and Plugins</h6>
                                            </a>
                                            <div class="article-date">May 20, 2026</div>
                                        </div>
                                    </article>
																		                                    <article class="article" data-aos="fade-up" data-aos-duration="1500">
                                        <div class="article-img-wrap">
                                            <a href="https://helloadmin.com/wordpress-multisite-wp-cli-network-administration/">
                                                    <span class="article-img"
                                                          style="background-image: url(https://helloadmin.com/wp-data/themes/hello_admin/img/default-image-article.jpg)">
                                                        <span class="arrow">
                                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                                        </span>
                                                    </span>
                                            </a>
                                        </div>
                                        <div class="article-desc">
                                            <a class="article-title" href="https://helloadmin.com/wordpress-multisite-wp-cli-network-administration/">
                                                <h6>WordPress Multisite: WP-CLI Commands for Network Administration</h6>
                                            </a>
                                            <div class="article-date">May 15, 2026</div>
                                        </div>
                                    </article>
																		                                    <article class="article" data-aos="fade-up" data-aos-duration="1500">
                                        <div class="article-img-wrap">
                                            <a href="https://helloadmin.com/php-asymmetric-visibility-set-private-php-84/">
                                                    <span class="article-img"
                                                          style="background-image: url(https://helloadmin.com/wp-data/themes/hello_admin/img/default-image-article.jpg)">
                                                        <span class="arrow">
                                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                                        </span>
                                                    </span>
                                            </a>
                                        </div>
                                        <div class="article-desc">
                                            <a class="article-title" href="https://helloadmin.com/php-asymmetric-visibility-set-private-php-84/">
                                                <h6>PHP Asymmetric Visibility: set-private Properties in PHP 8.4</h6>
                                            </a>
                                            <div class="article-date">May 10, 2026</div>
                                        </div>
                                    </article>
									                            </div>
                        </div>
										                </div>
            </div>
		    </main>

<a href="#top" class="scroll-top"></a>
<footer id="contact">
    <div class="footer-top">
        <div class="contact-info">
            <address>
                <p class="title">HelloAdmin</p>
                <p class="description"><i class="fa fa-map-marker" aria-hidden="true"></i>Ukraine, Kyiv</p>
                <p class="title">Email:</p>
                <p class="description">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                    <a rel="nofollow"
                       href="mailto:hello@helloadmin.com?subject=Hello%20Admin!">
						hello@helloadmin.com                        <span class="slider"></span>
                    </a>
                </p>
            </address>
        </div>
        <div class="quick-info">
            <p class="title">Quick Info</p>
			<ul id="menu-footer-menu" class="footer-menu"><li id="menu-item-548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-548 footer-menu-item"><a href="https://helloadmin.com/"><span class="slider"></span>Home</a></li>
<li id="menu-item-549" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-549 footer-menu-item"><a href="/#about/"><span class="slider"></span>About</a></li>
<li id="menu-item-550" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-550 footer-menu-item"><a href="/#services/"><span class="slider"></span>Services</a></li>
<li id="menu-item-547" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-547 footer-menu-item"><a href="https://helloadmin.com/blog/"><span class="slider"></span>Blog</a></li>
</ul>        </div>
				            <div class="blog">
                <p class="title">Blog</p>
                <div class="articles-wrap">
					                        <article class="article">
                            <div class="article-img-wrap">
                                <a href="https://helloadmin.com/wordpress-edge-caching-cloudflare-workers/">
									                                    <div class="article-img">
                                        <img src="https://helloadmin.com/wp-data/uploads/2026/06/WordPress-Edge-Caching-with-Cloudflare-Workers-and-Cache-API-50x50.webp" alt="WordPress Edge Caching with Cloudflare Workers and Cache API1">
                                        <span class="arrow">
                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                </a>
                            </div>
                            <div class="article-desc">
                                <a class="article-title" href="https://helloadmin.com/wordpress-edge-caching-cloudflare-workers/">
                                    <h6>WordPress Edge Caching with Cloudflare Workers and Cach ...</h6>
                                </a>
                                <div class="article-date">June 1, 2026</div>
                            </div>
                        </article>
					                        <article class="article">
                            <div class="article-img-wrap">
                                <a href="https://helloadmin.com/wordpress-eeat-author-authority-signals/">
									                                    <div class="article-img">
                                        <img src="https://helloadmin.com/wp-data/themes/hello_admin/img/default-image-article.jpg" alt="WordPress E-E-A-T: Building Author Authority Signals for Search">
                                        <span class="arrow">
                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                </a>
                            </div>
                            <div class="article-desc">
                                <a class="article-title" href="https://helloadmin.com/wordpress-eeat-author-authority-signals/">
                                    <h6>WordPress E-E-A-T: Building Author Authority Signals fo ...</h6>
                                </a>
                                <div class="article-date">May 30, 2026</div>
                            </div>
                        </article>
					                        <article class="article">
                            <div class="article-img-wrap">
                                <a href="https://helloadmin.com/typescript-wordpress-block-development-wordpress-scripts/">
									                                    <div class="article-img">
                                        <img src="https://helloadmin.com/wp-data/themes/hello_admin/img/default-image-article.jpg" alt="TypeScript in WordPress Block Development with @wordpress/scripts">
                                        <span class="arrow">
                                            <i class="fa fa-share fa-10x" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                </a>
                            </div>
                            <div class="article-desc">
                                <a class="article-title" href="https://helloadmin.com/typescript-wordpress-block-development-wordpress-scripts/">
                                    <h6>TypeScript in WordPress Block Development with @wordpre ...</h6>
                                </a>
                                <div class="article-date">May 25, 2026</div>
                            </div>
                        </article>
					                </div>
            </div>
		        <div class="feedback-form">
            <p class="title">Contact Us</p>
			
<div class="wpcf7 no-js" id="wpcf7-f34-o1" lang="en-US" dir="ltr" data-wpcf7-id="34">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/wordpress-add-theme-support-title-tag-post-thumbnails-html5-align-wide/#wpcf7-f34-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><input type="hidden" name="_wpcf7" value="34" /><input type="hidden" name="_wpcf7_version" value="6.1.6" /><input type="hidden" name="_wpcf7_locale" value="en_US" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f34-o1" /><input type="hidden" name="_wpcf7_container_post" value="0" /><input type="hidden" name="_wpcf7_posted_data_hash" value="" /><input type="hidden" name="_wpcf7_recaptcha_response" value="" />
</fieldset>
<p><span class="wpcf7-form-control-wrap" data-name="your-name"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Name *" value="" type="text" name="your-name" /></span><br />
<span class="wpcf7-form-control-wrap" data-name="your-email"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail *" value="" type="email" name="your-email" /></span><br />
<span class="wpcf7-form-control-wrap" data-name="your-message"><textarea cols="4" rows="4" maxlength="2000" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Message *" name="your-message"></textarea></span><br />
<i class="fa fa-paper-plane" aria-hidden="true"></i><br />
<input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="Submit" />
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
</div>
        </div>
    </div>
    <div class="footer-bottom">
        <a class="logo" href="https://helloadmin.com">
            <img src="https://helloadmin.com/wp-data/uploads/2017/10/logo_64x64.png" alt="Logo"/>
            <p class="head-title">HelloAdmin</p>
        </a>
        <p>Copyright © 2018 - 2026            <a href="https://helloadmin.com">HelloAdmin</a>.
			All rights reserved.        </p>
    </div>
</footer>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-data/uploads/*","/wp-data/*","/wp-data/plugins/*","/wp-data/themes/hello_admin/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="prism-js" src="https://helloadmin.com/wp-data/plugins/shiny-code/assets/js/vendor/prism.js?ver=1.15.0"></script>
<script id="wp-hooks-js" src="https://helloadmin.com/wp-includes/js/dist/hooks.min.js?ver=7496969728ca0f95732d"></script>
<script id="wp-i18n-js" src="https://helloadmin.com/wp-includes/js/dist/i18n.min.js?ver=781d11515ad3d91786ec"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
</script>
<script id="swv-js" src="https://helloadmin.com/wp-data/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.6"></script>
<script id="contact-form-7-js-before">
var wpcf7 = {
    "api": {
        "root": "https:\/\/helloadmin.com\/wp-json\/",
        "namespace": "contact-form-7\/v1"
    }
};
//# sourceURL=contact-form-7-js-before
</script>
<script id="contact-form-7-js" src="https://helloadmin.com/wp-data/plugins/contact-form-7/includes/js/index.js?ver=6.1.6"></script>
<script id="jquery-js" src="https://helloadmin.com/wp-data/themes/hello_admin/js/jquery.min.js"></script>
<script id="bootstrap-js" src="https://helloadmin.com/wp-data/themes/hello_admin/js/bootstrap.min.js"></script>
<script id="script-js-extra">
var current = {"homePageURL":"https://helloadmin.com","pageIsFrontPage":"","pageIsBlogPage":"","ajaxURL":"https://helloadmin.com/wp-admin/admin-ajax.php","fetchDataNonce":"6f9f70aba7","searchDataNonce":"fbdb5524de"};
//# sourceURL=script-js-extra
</script>
<script id="script-js" src="https://helloadmin.com/wp-data/themes/hello_admin/js/script.min.js"></script>
<script id="google-recaptcha-js" src="https://www.google.com/recaptcha/api.js?render=6LfF13oaAAAAACJ56J_MCEzeN_v6nUn5xNqFjHGq&ver=3.0"></script>
<script id="wp-polyfill-js" src="https://helloadmin.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0"></script>
<script id="wpcf7-recaptcha-js-before">
var wpcf7_recaptcha = {
    "sitekey": "6LfF13oaAAAAACJ56J_MCEzeN_v6nUn5xNqFjHGq",
    "actions": {
        "homepage": "homepage",
        "contactform": "contactform"
    }
};
//# sourceURL=wpcf7-recaptcha-js-before
</script>
<script id="wpcf7-recaptcha-js" src="https://helloadmin.com/wp-data/plugins/contact-form-7/modules/recaptcha/index.js?ver=6.1.6"></script>
</body>
</html>