add_theme_support for html5 on search-form not working

[blackawxs]

I’m on WordPress 5.9.2 and using TwentyTwentyOne version 1.5

I have a very odd situation within my child theme, in which the built in search form is not converting to HTML5 syntax.

From my child theme I have the following files

– style.css
– screenshot.png
– functions.php
– front-page.php

Within my functions.php, I have the following code:

  <?php
  function _ags_after_setup_theme() {
    add_theme_support( 'html5', array( 'search-form' ) );
  }
  add_action( 'after_setup_theme', '_ags_after_setup_theme' );

Within my font-page.php I have the following code :

<?php
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

<!--_ags - THE FRONT PAGE SEARCH TEST-->
<p>the beginning of our front page content</p>
<div class="search-form-container">
  <?php get_search_form(); ?>
</div>

<?php
get_footer();

And when I go to my front page, the search form still looks like the following syntax:

 <form role="search" method="get" class="search-form" action="http://nffa.agx:49206/">
	<label for="search-form-1">Search…</label>
	<input type="search" id="search-form-1" class="search-field" value="" name="s">
	<input type="submit" class="search-submit" value="Search">
  </form>

As you can see, no HTML5 conversion on the form.

Why is that?

[joyously]

The code is working as expected.
The get_search_form() function first looks for a searchform.php file in the child or parent theme, and only if not found does it generate a form according to the current_theme_supports value for html5.
Since the Twenty Twenty One theme supplies a searchform.php, that is what is output.

[costdev]

Hi @blackawxs, thanks for opening this ticket!

@joyously is correct. See the results in different scenarios below.

With searchform.php and without html5: search-form theme support:

<form role="search" method="get" class="search-form" action="http://localhost/wordpress-develop/src/">
        <label for="search-form-1">Search…</label>
        <input type="search" id="search-form-1" class="search-field" value="" name="s">
        <input type="submit" class="search-submit" value="Search">
</form>

With searchform.php and with html5: search-form theme support:

<form role="search" method="get" class="search-form" action="http://localhost/wordpress-develop/src/">
        <label for="search-form-1">Search…</label>
        <input type="search" id="search-form-1" class="search-field" value="" name="s">
        <input type="submit" class="search-submit" value="Search">
</form>

Without searchform.php and without html5: search-form theme support:

<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/wordpress-develop/src/">
        <div>
                <label class="screen-reader-text" for="s">Search for:</label>
                <input type="text" value="" name="s" id="s">
                <input type="submit" id="searchsubmit" value="Search">
        </div>
</form>

Without searchform.php and with html5: search-form theme support:

<form role="search" method="get" class="search-form" action="http://localhost/wordpress-develop/src/">
        <label>
                <span class="screen-reader-text">Search for:</span>
                <input type="search" class="search-field" placeholder="Search …" value="" name="s">
        </label>
        <input type="submit" class="search-submit" value="Search">
</form>

As this is the expected behaviour, I'll close this ticket.