The simplest way to create a collapsed search control is to use WordPress’s native Search block in a block theme and enable its button-only presentation. In a classic theme, place get_search_form() where the control belongs and customize the generated form through searchform.php if needed. The native options provide the form; your theme still needs to handle the reveal state, focus, keyboard behavior, and responsive layout correctly.
Choose the WordPress method that matches your theme
| Theme and workflow | Implementation | Control level | Important checks |
|---|---|---|---|
| Block theme or Site Editor | Insert a Search block and enable its button-only presentation. | Editor-managed settings and block markup. | Check the button label, position, expanded state, focus, and mobile layout in the active theme. |
| Classic theme | Call get_search_form(); add searchform.php in a child or parent theme when custom markup is required. |
Direct theme-level control over the form HTML and surrounding toggle control. | Preserve the search form’s label, name="s" field, submit behavior, keyboard access, and synchronized state. |
A plugin is not inherently required for a basic search form or a collapsed search starting point.
Option 1: Add a toggle starting point in a block theme
Insert the Search block
- Open the Site Editor and edit the template or template part where the search control should appear, such as the header.
- Insert the Search block.
- Use the block toolbar or settings panel to enable the button-only option. This hides the search input and leaves the Search button as the compact visual control.
- Set the accessible label and button text so the control is understandable without relying on an icon alone.
- Choose the button position offered by the block, then inspect the result at desktop and mobile widths.
The Theme Handbook also shows the basic block markup:
<!-- wp:search {"label":"Search","buttonText":"Search"} /-->That markup inserts a Search block. The button-only appearance is a separate block setting, so confirm the setting in the editor rather than assuming the comment alone creates a collapsed control.
#1 Best Overall
What the block setting does—and does not do
Button-only presentation is the native visual starting point for a reveal effect: the field is hidden until the user activates the control. It does not, by itself, establish a universal custom animation, focus-management policy, Escape-key behavior, or responsive treatment for every theme. Test the actual block, theme, and WordPress version together.
Option 2: Add the search form in a classic theme
Place the form in the template
Add get_search_form() in the template or template part where the search control belongs:
<?php get_search_form(); ?>WordPress first looks for searchform.php in the child theme and then the parent theme. If neither theme supplies that file, WordPress renders its built-in search form.
Give multiple forms distinct accessible names
If a page contains more than one search form, pass an aria_label argument so each search landmark has a distinct accessible name:
Free tools Windows power users keep installed
One-click scans. No signup required.
<?php
get_search_form(
array(
'aria_label' => 'Site search'
)
);
?>Use a different label for another instance, such as “Header search” and “Footer search,” when both appear on the same page.
Customize the generated markup with searchform.php
Create searchform.php in the child theme when you need to wrap the form, change classes, or coordinate it with a theme toggle. Keep the functional pieces intact: a labeled input type="search", the field name s, and a submit control.
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<span class="screen-reader-text"><?php echo esc_html__( 'Search for:', 'your-textdomain' ); ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'your-textdomain' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<button type="submit" class="search-submit"><?php echo esc_html_x( 'Search', 'submit button', 'your-textdomain' ); ?></button>
</form>The visually hidden label is still a label. A placeholder is not a substitute for one.
Build the reveal behavior without breaking accessibility
Use a real button for the action
The control that opens or closes the field should be a <button>, not a clickable <div> or an icon-only link. Give it an accessible name such as “Open search” and ensure the name or supporting text makes the action clear.
Recommended Free Tools
Keep the state accurate
When the form is visible, the toggle should expose aria-expanded="true"; when it is hidden, it should expose aria-expanded="false". Keep the attribute synchronized with the actual visual and interactive state. A historical Twenty Twenty changeset specifically corrected synchronization of this state between mobile and desktop search-toggle buttons, which is a reminder to test both layouts rather than assuming one breakpoint behaves like the other.
Hide the field in a keyboard-safe way
When collapsed, the search field should not remain unexpectedly reachable in the tab order. When opened, keyboard users must be able to reach the input and submit the form. Do not remove the form’s label or rely solely on a placeholder while changing its visibility.
Plan focus movement
Decide where focus goes when the control opens and where it returns when the control closes. Test the sequence with a keyboard and assistive technology. The WordPress references establish the need for accessible labels, visible focus styling, and accurate expanded state, but they do not define one universal JavaScript recipe for focus entry, focus return, Escape handling, or animation timing.
Preserve visible focus styling
Do not suppress the browser or theme focus indicator unless you replace it with an equally clear style. Check the toggle, the search input, and the submit button against the site’s desktop and mobile color schemes.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Responsive and interaction checks
- At narrow widths, confirm the opened form does not push navigation off-screen or become clipped by an overflow rule.
- At wide widths, confirm the button and revealed form align with the header’s spacing and stacking order.
- Verify that the button remains reachable when menus, sticky headers, or overlays are active.
- Open and close the control repeatedly and check that its visual state,
aria-expanded, and keyboard behavior remain synchronized. - Submit a query and confirm the normal WordPress search results request still uses the
sparameter. - Test with keyboard-only navigation and at least one assistive-technology workflow before treating the effect as complete.
Common implementation mistakes
Using only an icon
An unlabeled magnifying-glass icon does not communicate its purpose reliably. Provide an accessible name and, where appropriate, visible text.
Removing the label
Replacing the label with placeholder text makes the form less robust, especially after text is entered or when users navigate with assistive technology.
Changing visibility without changing state
A form can look open while the button still reports aria-expanded="false", or look closed while its controls remain keyboard reachable. Treat visual, DOM, and accessibility state as one requirement.
Assuming the editor setting is a complete animation
The block’s button-only option is a presentation setting, not a guarantee of a finished custom slide, fade, focus, or Escape-key interaction in every theme. Verify the behavior your design requires in the installed theme and WordPress version.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Which route should you use?
- Choose the Search block when the site uses a block theme and you want editor-managed placement and the quickest native collapsed starting point.
- Choose
get_search_form()plussearchform.phpwhen the site uses a classic theme or you need direct control over wrappers, classes, labels, and the surrounding toggle markup. - Use either route without a paid plugin for a basic WordPress search form; add custom code only for interaction and styling requirements your theme does not already provide.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
