WordPress форма поиска

Добавить seach-box в меню – https://vahro.ru/other/dobavit-seach-box-v-menyu

<form role="search" method="get" class="search-form" 
action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit search-submit-mine" value="<?php echo esc_attr_x( 'найти', 'submit button' ) ?>" />
</form> 

В теме может быть своя форма для поиска – файл searchform.php в корне темы.

При вызове get_search_form(); WordPress ищет файл searchform.php, если его используется стандартная форма поиска.
Оригинальная форма поиска WordPress лежит – wp-includes\blocks\search.php

На этом сайте
searchform.php  
  <form role="search" method="get" class="loupe-search-form search-form" action="<?php echo home_url( '/' ); ?>">
    <input class="checkbox-toggle" type="checkbox" />
    <i class="icon-loupe symbol-under-checkbox font-icon">&#xe800;</i> <!-- icon-search 0xe800 fonts.css -->
    <i class="icon-cancel symbol-under-checkbox font-icon">&#xe803;</i> <!-- icon-cancel 0xe803 fonts.css -->
    <input class="input-search search-field" type="search" placeholder="<?php echo esc_attr_x( 'Что искать …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>">
    <!-- <input type="search" class=""  ?>" /> -->
  </form>

Форма поиска добавлена в главное меню – https://vahro.ru/other/dobavit-seach-box-v-menyu/

Как работает

При нажатии на значок лупы  он меняется на крестик  и появляется поле для ввода строки поиска

Символы берем из коллекции Font Awesome – делаем свой небольшой набор на сайте fontello – https://vahro.ru/other/fontello/

Как сделано
В форме поиска <input type=”checkbox” > и <input type=”search”>
checkbox – прозрачный (opacity:0)
на него накладывается лупа (opacity:1) и крестик (opacity:0)
при нажатии (событие click) checkbox получает статус checked, меняется opacity у символов лупы и крестика и включается поля для поиска input-search

CSS

.search-form {
  position: relative;
  margin-bottom: 0;
}

/* При загрузке поле input-search не показывается - display: none */
.input-search {
  top: 2px;
  outline: none;
  margin-left: .5em;
  padding: 0 !important;
  display: none;
}

/* При загрузке символ лупы включен - opacity: 1 */
.icon-loupe {
  opacity: 1;
}

/* При загрузке крестик выключен - opacity: 0 */
.icon-cancel {
  opacity: 0;
}

/* При клике на чекбокс - выключаем символ лупы - opacity: 0 */
.checkbox-toggle:checked ~ i.icon-loupe {
  opacity: 0;
}

/* При клике на чекбокс - включаем крестик - opacity: 1 */
.checkbox-toggle:checked ~ i.icon-cancel {
  opacity: 1;
}

/* При клике на чекбокс - включаем input-search */
.checkbox-toggle:checked ~ input.input-search {
  display: inline;
}

/* Расположение символов лупа/крестик под чекбоксом */
.symbol-under-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: .25em;
  z-index: -1;
  cursor: pointer;
}
/* Чекбокс всегда невидимый - opacity: 0 */
.checkbox-toggle {
  cursor: pointer;
  opacity: 0;
  z-index: 1;
}

WordPress: Поиск по Сайту (без плагинов) – https://only-to-top.ru/blog/programming/2020-12-13-ajax-search-wordpress.html