Search

Search bars always kinda bug me when I visit a website. Most of the time, I’ve already arrived via a search. Half of them are underpowered. Here are the my notes on the search elements for this theme. Try it out ??

Design:

I’ve seen sites with a search in the header, sidebar, and the footer. Why? I prefer to just include it in the header so that it’s on every page in one place. The only other place I include it is on the search results page to make it quicker to start another.

Accessibility

I was sent a link today to a website that had white search text on a white background with no buttons or other indications that it was even a search field. To top it off, I was sent the link from my better half who regularly works with folks with disabilities and the website features and handicap logo right below the search bar. Needless to say, I spent a little extra time getting the search bar to be accessible. Notice that even the tab movement automatically opens the field and places the curser.

inc/theme-templates.php:

add_filter('wp_nav_menu_items', 'dwp23_add_nav_search_form', 10, 2);
function dwp23_add_nav_search_form($form, $args) {
  if( $args->theme_location == 'primary' ){
  $form .= '
    <li class="nav-item">
      <form method="get" class="search-form" action="'.home_url( '/' ).'" role="search">
        <div class="input-group has-validation">
          <button type="submit" value="search" class="search-nav btn btn-primary" type="button"><i class="bi bi-search"></i></button>
          <label class="screen-reader-text search-label" for="search" aria-labelledby="search">Search</label>
          <input type="search" id="search" class="search-nav-input form-control search-field border-start-0 border-0" placeholder="Search" name="s" aria-describedby="no-search-term" required/>
        </div>
      </form>
      <div class="invalid-feedback no-search-term">
        Please choose enter a search term.
      </div>
    </li>
    ';
  }
  return $form;
}

css/custom.scss

I removed the default :focus elements in favor of using :focus-within on the entire element.

.search-form:focus-within {
  border-color:$main-200;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
.search-form button {
  border-radius: 0 !important;
}
input.search-nav-input[type=search] {
  width: 0px;
  background:transparent;
  transition: .5s;
}
input.search-nav-input[type=search]:focus {
	width: 160px;
  background:$main-800;
  border-color:$main-200;
  box-shadow: none;
}

---

1. Bootstrap Form Validation – https://getbootstrap.com/docs/5.0/forms/validation/
2. MDN Aria:search role – https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role
3. :focus-within – https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within