Learn how to add features to a WordPress theme using the add_theme_support function

rarely find a WordPress template that does not use the add_theme_support function, which is considered one of the effective and easy-to-use functions included in the WordPress system.

This function basically adds or registers certain pre-defined features within a WordPress theme (Theme Functionality) and allows you to customize them to your liking and manage them through the theme customization page.

If you are a WordPress template developer and want to create a template from scratch, or want to modify a specific template and customize it according to your requirements, it is necessary for you to know the function of this function, know how to use it, and the features it provides so that you can support your WordPress template with these features and customize it according to your requirements. .

What is the add_theme_support() function

The add_theme_support() function is a built-in WordPress function used to support WordPress themes with specific features.

add_theme_support( string $feature, mixed $args )

As you can see from the code above, the function has two parameters or arguments.
The first parameter $feature is mandatory and is a string representing the name of the feature to be supported in the template.
The second parameter, $args, is optional. It represents an array of parameters whose element values vary according to the feature specified in the first parameter. Through this array, we can customize the features and make them more specific.

For example, the following code is used to support the two title tag features to provide a title for search engines that is different from the article title, and a custom logo feature for the template and specifying its dimensions to be 100 x 100 pixels.

//Support the title tag feature in the template

add_theme_support( ‘title-tag’ );

//Support the custom notice feature in the template with customizing the logo dimensions

add_theme_support( ‘custom-logo’, array(

‘height’ => 100,

‘width’ => 100,

) );

Features that can be provided through the add_theme_support function

Now you might be wondering what built-in features I can add to my theme through add_theme_support function?

In fact, there are about thirty implicit features that a WordPress template can support through this function, and features are added with different versions of WordPress, and the most important of these features are:

custom-logo Enable the website logo customization feature on the template customization page. This feature was first supported in WordPress version 4.5.

add_theme_support( ‘custom-logo’ );

custom-header Enables the header customization feature, which enables you, for example, to upload a specific image and display it in the header of your template, or specify the height and width of the header.

add_theme_support( ‘custom-header’ );

custom-background : The feature of customizing the background image. Supporting this feature will add two sections to the template customization page: colors and background image. Thus, you can set the background color or background image for your template.

add_theme_support( ‘custom-background’);

post-formats : Provides the feature of formatting articles according to a specific form, content, and style within the template according to the type of content that this article displays.

add_theme_support(‘post-formats’);

This feature supports customizing 9 content types that can be passed through the feature matrix as follows:

add_theme_support( ‘post-formats’, array(

‘gallery’,

‘quote’,

‘video’,

‘aside’,

‘image’,

‘link’,

‘status’,

‘audio’,

‘chat’

) );

post-thumbnails : Providing the feature of customizing a distinctive image for all types of posts

add_theme_support(‘post-thumbnails’);

You can pass an optional parameter that represents an array specifying the types of posts in which you want to enable this feature (posts, pages, custom post type ) as follows

add_theme_support( ‘post-thumbnails’ );

add_theme_support ( ‘post-thumbnails’ , array ( ‘post’ ) ) ; // Enable featured image for articles only

add_theme_support ( ‘post-thumbnails’ , array ( ‘page’ ) ) ; // Enable featured image for pages only

add_theme_support ( ‘post-thumbnails’ , array ( ‘post’ , ‘book’ ) ) ; // Enable featured image for articles and custom post type book

HTML5 feature supports the use of HTML5 codes in some parts of the template, such as the search form, comments form, and gallery..

add_theme_support(‘html5’);

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

starter-content: Providing a starter content feature for WordPress from the beginning.

add_theme_support(‘starter-content’);

automatic-feed-links The feature of activating automatic RSS feed links so that RSS feed links can be used for any posts and comments in the <head> tag.

add_theme_support( ‘automatic-feed-links’ );

title-tag Supports the title tag, which is usually placed in the <head> tag of the page, and which is used by the browser to dynamically determine the title of the web page.

add_theme_support( ‘title-tag’ );

editor-font-sizes: This feature allows us to set values for font sizes when editing paragraph texts in the Gutenberg component editor.

add_theme_support( ‘editor-font-sizes’ );

disable-custom-font-sizes : This feature prevents us from selecting or entering specific font size values in a section when editing paragraphs in the Gutenberg plug-in editor

add_theme_support( ‘disable-custom-font-sizes’ );

editor-color-palette : This feature allows us to adjust the colors that appear in the Color Settings section when editing paragraphs in the component editor.

add_theme_support( ‘editor-color-palette’ );

disable-custom-color-palette : This feature removes the custom color selection button that appears in the Color Settings section when editing paragraphs in the component editor.

add_theme_support( ‘disable-custom-color-palette’ );

wp-block-styles : The component editor includes some default CSS values but these CSS values are not used in your theme, so you can add this feature to ensure that the CSS values added to customize components are used in your theme as well.

add_theme_support( ‘wp-block-styles’ );

dark-editor-style: This feature adjusts the interface of the component editor if you use a dark background style for your component editor.

add_theme_support( ‘dark-editor-style’ );

responsive-embeds : This feature makes your theme display files embedded in content (such as YouTube videos) added using the component editor responsive to mobile screens by adding a row named wp-embed-response.

add_theme_support( ‘responsive-embeds’ );

Customize Selective Refresh Widgets: This feature enables you to update interface elements, or what are known as widgets, only through the template customization page instead of updating your entire page.

add_theme_support( ‘customize-selective-refresh-widgets’ );

Where do we write the code to call the add_theme_support function?

You can write the code to call this function directly into the template’s functions.php file, and then it will be called automatically when the template is executed without the need to link it to any hook in order to execute it.

You can also link its call to action hooks to be executed when this hook occurs. The appropriate hook in this case is the after_setup_theme hook , which occurs after the template is loaded so that the function works correctly.

This hook allows adding theme support for any feature. It works as soon as the theme is set up. WordPress does not allow us to support theme features until WordPress has finished setting up the theme internally. So to support a feature in your theme all you have to do is link this action hook to the function supporting the feature you want.

For example, you can call the function code in order to enable the custom logo feature in a WordPress theme:

function mytemam_setup(){

add_theme_support(‘custom-logo’);

}

add_action(‘after_setup_theme’, ‘mytemam_setup’);

Note 1:
If you want to call this function from a custom plugin and not within the theme’s functions file, then you must definitely hook it to the after_setup_theme action hook for it to execute correctly.

Note 2:
Calling this function within the template functions file will only enable it in the back-end of the site, but you must write code to display it and customize the way it appears in the front-end of the site. In the following paragraph, we will explain this in practical application to one of the features, which is the feature of providing a custom logo for a WordPress template, to better clarify the idea.

Note 3:

When one of the following parameters is used within the function (sidebars, menus, editor-style), the function is not called from the template’s functions file, but rather it is called only to verify that the template supports these features within the context of the current_theme_supports function , because these parameters are read-only.

A practical application for adding a custom logo feature to a WordPress template

Suppose you have a simple template or a template under development on your site, and this template does not support the feature of displaying a logo or logo customized for the site.
That is, when you go to the site admin control panel > and choose Appearance > Customize > Site Identity, you notice that there is no option to specify a custom logo for the site in your template, as shown in the following image:

To support this feature in the template, you must first add the following code to the template functions file functions.php:

add_theme_support(‘custom-logo’);

If you want to further customize the logo, such as making it with specific dimensions, you can, as we explained before, pass values to the customization matrix as a second parameter to the add_theme_support function. For example, the desired width and height of the logo can be set as follows:

add_theme_support( ‘custom-logo’, array(

‘height’ => 100,

‘width’ => 100,

‘flex-height’ => true,

‘flex-width’ => true,

) );

After adding this code to the functions.php file, and moving again to your site’s control panel > Appearance > Customization > Site Identity, you will notice that there is a new option called Logo in the Site Identity section, and below it is a button that enables you to specify and choose a custom logo for your site, as shown in the following image:

Upload the appropriate logo image and click the Publish button to save the changes. You will notice that the custom logo is not yet displayed on the front-end of the site!

You need to continue working and displaying the logo on the front end by calling the_custom_logo() function, but it is better to test the existence of this function before calling it to maintain compatibility with older versions of WordPress, as follows:

if ( function_exists( ‘the_custom_logo’ ) ) {

the_custom_logo();

}

You can call this code anywhere within the template where you want to display the logo you uploaded, but a common place to call it is within the template’s header file, header.php.

We browse the current template files, find the header.php file and open it in any code editor. The header file for my current site template displays the menu in the site header (under the nav tag) as follows:

<nav class=“site-nav”>

<?php

$args = array(

‘theme_location’ => ‘primary’

);

<?php wp_nav_menu( $args ); ?>

</nav>

Therefore, I will add the logo display code within this nav tag and before the list display code, so that it appears in the position indicated by an arrow in the following image:

Where the logo is displayed on a WordPress site

The complete code for the site header will be as follows:

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset=“<?php bloginfo(‘charset’); ?>”>

<meta name=“viewport” content=“width=device-width”>

<title><?php bloginfo(‘name’); ?></title>

<?php wp_head(); ?>

</head>

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

<div class=“container”>

<!– site-header —>

<header class=“site-header”>

<h1><a href=“<?php echo home_url(); ?>”><?php bloginfo(‘name’); ?></a></h1>

<h5><?php bloginfo(‘description’); ?> <?php if (is_page(‘portfolio’)) { ?>

– Thank you for viewing our work

<?php }?></h5>

<nav class=“site-nav”>

<?php

if ( function_exists( ‘the_custom_logo’ ) ) {

the_custom_logo();

}

$args = array(

‘theme_location’ => ‘primary’

);

<?php wp_nav_menu( $args ); ?>

</nav>

</header><!– /site-header —>

Now, if you browse the site, you will find that the logo you downloaded appears in the appropriate place as follows

Display the logo in the header of your WordPress site

Include all template features in one function

When your template includes more than one feature, you can group these features together and add them within one function, and call this function through the after_setup_theme action hook. This will make your template code organized in a better way, as shown in the following code:

function wpar_theme_feature() {

/* post formats */

add_theme_support( ‘post-formats’, array( ‘aside’, ‘quote ) );

/* post thumbnails */

add_theme_support( ‘post-thumbnails’, array( ‘post’, ‘page’ ) );

/* HTML5 */

add_theme_support( ‘html5’ );

/* automatic feed links */

add_theme_support( ‘automatic-feed-links’ );

}

add_action( ‘after_setup_theme’, ‘wpar_theme_feature’ );

Conclusion

In today’s article, we learned how to add features to our WordPress template by using the ready-made function add_theme_support. We also attached a practical example of using this feature to customize the WordPress website logo through the template customization tool.
Finally, we explained how to call it within a WordPress template in the optimal way. If you have any questions about this function or one of the features it provides to a WordPress template, do not hesitate to ask your question in the comments below the article.

Archives

Categories

Meta

What is the add_theme_support() function

Features that can be provided through the add_theme_support function

Where do we write the code to call the add_theme_support function?

A practical application for adding a custom logo feature to a WordPress template

Include all template features in one function

Conclusion