Functions and hooks for required fields in WordPress 6.1

When forms contain multiple required fields, their labels might have an asterisk with a legend to explain that those fields are required. To reduce code duplication and to help maintain globally consistent markup, WordPress has two new functions: wp_required_field_indicator() and wp_required_field_message(). Themes and plugins could employ these functions, too, if they require at least WordPress 6.1.

Labels for required fields use the wp_required_field_indicator() function, which gives a symbol wrapped in a span tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) with the “required” class. Translators can now replace the asterisk with a more appropriate glyph in their language.

For the legend, wp_required_field_message() wraps “Required fields are marked *” in a span element as well, with the “required-field-message” class. The symbol matches the markup produced by the wp_required_field_indicator() function.

In WordPress 5.9 and 6.0, screen readers would not read the asterisks or the required fields message text of the comments form because they are visual cues. In 6.1, a revision restores these items so screen reader users who see the text also hear it.

Filtering markup

Both of these functions have hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. to edit their output, and the 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. names match the related function.

Indicator example

If the language keeps the single asterisk, but that already means something else on a site, the filter could add more stars:

function wpdocs_replace_single_asterisk_in_default_indicator( $indicator ) {
	$indicator = str_replace( '>*</', '>***</', $indicator );
	return $indicator;
}
add_filter( 'wp_required_field_indicator', 'wpdocs_replace_single_asterisk_in_default_indicator', 10, 1 );

Message example

Replace the space before the indicator in the message with a non-breaking space so the symbol does not wrap to the next line, separated from the rest of the message.

function wpdocs_use_nonbreaking_space_in_required_fields_message( $message ) {
	$message = str_replace( ' <span class="required"', '&nbsp;<span class="required"', $message );
	return $message;
}
add_filter( 'wp_required_field_message', 'wpdocs_use_nonbreaking_space_in_required_fields_message', 10, 1 );

For more information, view tickets #54394, #56389 and #55717.

Props: thanks to @audrasjb and @joedolson for reviewing and editing.

#6-1, #dev-notes, #dev-notes-6-1