Themes field guide: WordPress 5.5

WordPress 5.5 will contain several changes to existing features that will directly impact themes. This theme specific field guideField guide The field guide is a type of blogpost published on Make/Core during the release candidate phase of the WordPress release cycle. The field guide generally lists all the dev notes published during the beta cycle. This guide is linked in the about page of the corresponding version of WordPress, in the release post and in the HelpHub version page. details a few changes and also links several that were previously published separately.

Theme compatibility checks

In WordPress 5.4, support was added to the style.css file for the RequiresWP (Requires at least) and RequiresPHP (Requires PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher) file headers (see #44592). These headers allow theme authors to define the minimum versions of WordPress and PHP required to reliably run their themes. Though support was added for these headers, they were not yet used in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

In 5.5, the values provided by these headers will now be respected. Users will be unable to install, activate, or preview themes when a site does not meet the specified requirements.

Please ensure your theme contains these headers, and that the values are up to date and accurate.

For more information, check out the related tickets on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. (#48491, #48507, #49334, #49653).

Adding icons in Twenty Twenty

The Twenty Twenty default theme includes a feature that displays SVG icons to a page from a defined list if available icons. Additionally, there is an array that maps icon names to specific social website URLs. When a menu is assigned to the social menu location, the link text is automatically replaced with logo icons for each link (should one match the predefined list of supported icons).

Continuing to add requested icons (there are a small handful every few months) is not sustainable. Because of this, no new requests for icons will be considered for the Twenty Twenty theme. However, filters have been added in the theme to allow additional icons to be added as desired.

  • The twentytwenty_svg_icons_{$group} filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. allows new SVG icon tags to be added to a group’s list of icons. The default groups are ui (twentytwenty_svg_icons_ui), and social (twentytwenty_svg_icons_social). Custom groups could be added if needed.
  • The twentytwenty_social_icons_map filter allows new services to be added to the list of site links that are automatically replaced with icons in a menu assigned to the social menu location.
  • And finally, the new twentytwenty_svg_icon_color filter allows the color of the icon being displayed to be changed.

For example, say you wish to replace the calendar icon provided by default with your own.

<?php
function mychildtheme_twentytwenty_svg_icons_ui( $icons ) {
	$icons['calendar'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M6.75 0a.75.75 0 01.75.75V3h9V.75a.75.75 0 011.5 0V3h2.75c.966 0 1.75.784 1.75 1.75v16a1.75 1.75 0 01-1.75 1.75H3.25a1.75 1.75 0 01-1.75-1.75v-16C1.5 3.784 2.284 3 3.25 3H6V.75A.75.75 0 016.75 0zm-3.5 4.5a.25.25 0 00-.25.25V8h18V4.75a.25.25 0 00-.25-.25H3.25zM21 9.5H3v11.25c0 .138.112.25.25.25h17.5a.25.25 0 00.25-.25V9.5z"></path></svg>';

	return $icons;
}
add_filter( 'twentytwenty_svg_icons_ui', 'mychildtheme_twentytwenty_svg_icons_ui' );

As a second example, say you have a separate photography blogblog (versus network, site) and would like to add a link in your social navigation.

<?php
function mychildtheme_twentytwenty_social_icons_map( $icons ) {
	$icons['myphotoblog'] = array(
		'myphotoblogdomain.com',
		'asecondphotoblogdomain.com',
	);

	return $icons;
}
add_filter( 'twentytwenty_social_icons_map', 'mychildtheme_twentytwenty_social_icons_map' );

function mychildtheme_twentytwenty_svg_icons_social( $icons ) {
	$icons['myphotoblog'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M2.25 4a.25.25 0 00-.25.25v15.5c0 .138.112.25.25.25h3.178L14 10.977a1.75 1.75 0 012.506-.032L22 16.44V4.25a.25.25 0 00-.25-.25H2.25zm3.496 17.5H21.75a1.75 1.75 0 001.75-1.75V4.25a1.75 1.75 0 00-1.75-1.75H2.25A1.75 1.75 0 00.5 4.25v15.5c0 .966.784 1.75 1.75 1.75h3.496zM22 19.75v-1.19l-6.555-6.554a.25.25 0 00-.358.004L7.497 20H21.75a.25.25 0 00.25-.25zM9 9.25a1.75 1.75 0 11-3.5 0 1.75 1.75 0 013.5 0zm1.5 0a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0z"></path></svg>';

	return $icons;
}
add_filter( 'twentytwenty_svg_icons_social', 'mychildtheme_twentytwenty_svg_icons_social' );

For more information on this change, check out #48713 on Trac.

The icons in the examples above courtesy of Octicons.

Other theme related updates

There are several other changes affecting themes that were published as separate developer notes. You can find them below for easy reference.

For a full list of developer notes associated with WordPress 5.5 (including those documenting new features), please read the full WordPress 5.5 field guide.

Props @audrasjb for reviewing prior to publish.

#5-5, #dev-notes