How to Use add_theme_support Function in WordPress

add_theme_support Function Introduction

WordPress asks developers to register features for their custom theme in the function.php if they want to use them.

add_theme_support function in WordPress is responsible for registering features in themes.

For example, using thumbnails in a theme requires registering the post-thumbnails feature for that theme with this code:

function my_theme_register_post_thumnails(){
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_register_post_thumnails' );

Did you notice the after_setup_theme hook in the above code? I used it because It’s important to register the feature at the right time (hook).

In my examples at the end of this article, you can see a few features registered for a custom theme using the after_setup_theme hook.

Features that a custom theme needs to register before using them are listed below:

• admin-bar
• align-wide
• automatic-feed-links
• core-block-patterns
• custom-background
• custom-header
• custom-line-height
• custom-logo
• customize-selective-refresh-widgets
• custom-spacing
• custom-units
• dark-editor-style
• disable-custom-colors
• disable-custom-font-sizes
• editor-color-palette
• editor-gradient-presets
• editor-font-sizes
• editor-styles
• featured-content
• html5
• menus
• post-formats
• post-thumbnails
• responsive-embeds
• starter-content
• title-tag
• wp-block-styles
• widgets
• widgets-block-editor

The most useful features inside the list, in my opinion, are post-thumbnails, post-formats, widgets, title-tag, and menus. But if you want to develop a theme with visual page builder support, you will use it much more!

add_theme_support Function Syntax

add_theme_support( string $feature,  mixed $args )

add_theme_support Function Parameters

• $feature: Name of the feature you want to add to the theme.
• $args: Some features can be customized using this argument.

add_theme_support Function Result

If there is a problem in adding the requested feature to the theme, add_theme_support function will return false. Otherwise, there is no return.

add_theme_support Function Examples

Here are three examples of using the add_theme_support function to register features for your custom theme:

1- Add support for post thumbnails to your custom theme

function my_theme_register_post_thumnails(){
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_register_post_thumnails' );

After putting the above code in your theme or custom plugin, you can see the Featured Image box in the post editor of the WordPress admin panel.

To get the URL of your thumbnails, Use this code:

$postId = 1; //or get_the_ID() for current post
$thumbnailSize = 'thumbnail';
$thumbnailUrl = get_the_post_thumbnail_url( $postId, $thumbnailSize );

2- Add support for uploading a custom logo to your theme

To add support for a custom logo with defined width of 400px and height of 100px, use this code:

function my_theme_register_custom_logo(){
    $logoOptions = array(
        'height'               => 100,
        'width'                => 400,
        'flex-height'          => true,
        'flex-width'           => true,
        'header-text'          => array( 'site-title', 'site-description' ),
        'unlink-homepage-logo' => true,
    );
    add_theme_support( 'custom-logo', $logoOptions );
}
add_action( 'after_setup_theme', 'my_theme_register_custom_logo' );

Now you can upload the logo from Admin Panel -> Appearance -> Customize -> Site Identity -> Logo.

To print the logo in your theme, use the_custom_logo() function. This function has its HTML markup implemented.

If you want only the logo URL without any additional markup, use this code:

$customLogoId = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $customLogoId, 'full' );
$logoUrl = 'put your default logo url here';
if( !is_empty( $logo ) )
    $logoUrl = $logo[0];

3- Add support for a custom background for your theme

To register support for a custom background color and image, you must use the add_theme_support('custom-background') code. Like below:

function my_theme_register_custom_background(){
    $customBackgroundOptions = array(
        //default color for custom background (this is black)
        'default-color' => '000000',
        //default image url (this is the background.jpg image 
        'default-image' => '%1$s/assets/images/background.jpg',
    );
    add_theme_support( 'custom-background', $customBackgroundOptions );
}
add_action( 'after_setup_theme', 'my_theme_register_custom_background' );

Now you can change the background color from Admin Panel -> Appearance -> Customize -> Colors.

And upload the background image from Admin Panel -> Appearance -> Customize -> Background Image.

To use this background option, make sure you have the body_class() function in <body> tag of your theme:

<body <?php body_class(); ?>>

If you still do not see the background (not even in the codes), it’s maybe because you did not include the wp_head() function in <head> tag of your theme.