How to use the add_theme_support() function in WordPress

When creating a new theme or customising an existing one, you might find it helpful to make use of the add_theme_support() function that is already integrated into WordPress. In this article, we will investigate how to make efficient use of this function, as well as talk about some of the parameters that are the most frequently utilised in conjunction with it.

What exactly is the add_theme_support() function?

Within the functions.php file that makes up your WordPress theme is where you’ll find the add_theme_support() method. You are able to add new features to your theme and enable or disable existing ones using this function. You may verify that your theme supports particular features by making use of this function. Some of these features are post thumbnails, custom logos, and custom header images.

How to use the add_theme_support() function:

To use the add_theme_support() function, you need to add the following code to your theme’s functions.php file (assuming you’re building a custom theme):

function mytheme_setup() {
    // Add theme support for various features here
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Now, within the ‘mytheme_setup()’ function, you can add the desired theme support using the add_theme_support() function. The basic syntax for this function is as follows:

add_theme_support( $feature, $arguments );

$feature: This parameter specifies the feature you want to enable or add support for.
$arguments: This optional parameter allows you to pass additional arguments for the specific feature.

Common parameters for add_theme_support()

Post thumbnails

To enable post thumbnails (featured images) for your theme, use the following code:

add_theme_support( 'post-thumbnails' );

Post thumbnails will be enabled automatically for both posts and pages by default. You have the option of passing in an array of post types in place of the second parameter if you want to make this feature available for only certain kinds of posts:

add_theme_support( 'post-thumbnails', array( 'post', 'custom-post-type' ) );

Custom logo

To enable custom logos for your theme, use the following code:

add_theme_support( 'custom-logo' );

You can further customise the settings of the logo by passing an array of arguments as the second parameter, which includes the following:

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

Custom header

To enable custom headers for your theme, use the following code:

add_theme_support( 'custom-header' );

Similar to custom logos, you can pass an array of arguments to customise the header settings:

add_theme_support( 'custom-header', array(
    'default-image'          => '',
    'width'                  => 1000,
    'height'                 => 250,
    'flex-height'            => true,
    'flex-width'             => true,
    'uploads'                => true,
    'random-default'         => false,
    'header-text'            => true,
    'default-text-color'     => '000',
    'wp-head-callback'       => '',
    'admin-head-callback'    => '',
    'admin-preview-callback' => '',
) );

HTML5

To enable HTML5 support for specific elements, use the following code:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

Markup in HTML5 will be enabled for comment lists, comment forms, search forms, gallery captions, and gallery pages thanks to this code.

Title tag

Make use of the following code in order to enable the automatic production of title tags for your theme:

add_theme_support( 'title-tag' );

With the help of this function, WordPress is able to control the document title and ensure that it is structured appropriately for different types of pages.

Post formats

To enable post formats for your theme, use the following code:

add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );

This code will enable support for a variety of post formats, which will enable you to style and display a wide variety of content on your website.

Editor style

To enable a custom CSS file for the TinyMCE editor (used in the classic WordPress editor), use the following code:

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

This code will link the ‘style-editor.css’ file to the TinyMCE editor, allowing you to apply custom styles to the editor’s content. This is super handy for making more customised admin experiences for your users, where you can match fonts on both the front-end and back-end of the website.

Wrapping it up

The add_theme_support() function is an essential tool for WordPress theme developers. You may quickly enable or disable certain features for your theme with this function, offering a more personalised experience for users. We’ve gone through some of the most common parameters associated with this function, but there are many more. Consult the WordPress Codex for further information on exploring other features and capabilities.

WP Editorial

WPE