Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
WordPress can provide a collapsed search control without a paid plugin. In a block theme, add a Search block and enable its button-only presentation. In a classic theme, place get_search_form() where the control belongs and, when needed, customize the markup in searchform.php. The reveal-and-hide animation itself is theme-specific, so test the control, focus behavior and responsive layout in your actual theme and WordPress version.
Choose the implementation that matches your theme
| Theme setup | Native route | Markup control | Best starting point |
|---|---|---|---|
| Block theme or Site Editor | Search block | Block settings and template markup | Enable the button-only presentation |
| Classic theme | get_search_form() |
Theme template plus optional searchform.php |
Render the standard form, then add your theme’s toggle behavior |
Block theme: create a button-only search control
- Open the Site Editor and edit the header, navigation template part or other template area where the control should appear.
- Insert a Search block.
- In the block toolbar or settings, choose the button-only option so the search input is hidden until the control is activated.
- Review the block’s label and button-position settings. Check both desktop and mobile widths, because the available space and the expanded form can change the header layout.
- Save the template or template part and test the resulting button with a keyboard and a screen reader.
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 Search block setting, so confirm the setting in the editor rather than assuming the comment alone creates a toggle.
Free tools Windows power users keep installed
One-click scans. No signup required.
Classic theme: render and customize the search form
1. Place the form
Add get_search_form() in the header, navigation template part or another template file at the point where the search control should appear:
#1 Best Overall
<?php get_search_form(); ?>WordPress looks for searchform.php in the child theme and then the parent theme. If neither theme supplies that file, WordPress renders its built-in form.
2. Give multiple forms distinct names
If a page contains more than one search form, pass an aria_label argument so each form has a meaningful accessible name:
<?php
get_search_form(
array(
'aria_label' => 'Header search',
)
);
?>Use a different label for another instance, such as “Footer search.”
3. Customize only when you need different markup
A custom searchform.php can wrap the input and submit control in the structure your toggle needs. Preserve the form’s normal query behavior: the text field should remain an input with name="s", and the form must still submit a normal WordPress search request.
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="site-search">Search this site</label>
<input id="site-search" type="search" name="s" value="<?php echo esc_attr( get_search_query() ); ?>">
<button type="submit">Search</button>
</form>The built-in HTML5 form already includes a search landmark, a visually hidden label, an input type="search" named s, and a submit control. Reuse that behavior when styling or wrapping the form instead of replacing it with a decorative icon.
Make the reveal control accessible
Use an actual button
A search icon that reveals a form is an action, so use a <button>, not a link or a clickable <div>. Give it an accessible name such as “Open search” and “Close search,” or use a stable label with an appropriate hidden text description.
Synchronize expanded state
When the form is visible, the trigger should expose aria-expanded="true"; when it is hidden, it should expose aria-expanded="false". Keep the attribute synchronized with the visual state at every viewport size. A Twenty Twenty theme changeset documents a fix for this state synchronization, which is a reminder not to assume every theme handles it correctly.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Keep a real label and visible focus
- A placeholder is not a replacement for a label. Keep a visible label or a properly hidden label associated with the input.
- Ensure the toggle and input can be reached with the keyboard.
- Keep a visible focus style; do not remove the browser outline without supplying an equally clear replacement.
- When the form opens, decide where focus should go and test returning focus to the toggle when it closes.
Focus placement, Escape-key behavior and animation timing are practical implementation decisions, not universal WordPress defaults. Test them with keyboard navigation and assistive technology in the theme you are shipping.
Adding the visual effect without breaking the form
Whether you use a Search block or get_search_form(), the safest pattern is to keep the form in the document and change its visual state with the theme’s classes or block controls. The hidden state must not leave an unusable, focusable input stranded off-screen. If you add custom JavaScript, make it responsible for the button’s expanded state, the form’s visibility and any focus movement as one coordinated operation.
A minimal interaction outline looks like this, but it is an example to adapt and test rather than a guarantee for every theme:
const toggle = document.querySelector('[data-search-toggle]');
const panel = document.querySelector('[data-search-panel]');
const input = panel?.querySelector('input[type="search"]');
if (toggle && panel) {
toggle.addEventListener('click', () => {
const expanded = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', String(!expanded));
panel.hidden = expanded;
if (!expanded) input?.focus();
else toggle.focus();
});
}Your CSS and markup must supply the data-search-toggle and data-search-panel hooks, and the interaction still needs testing for Escape, outside clicks, animation, duplicate forms and responsive headers.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Test the finished toggle
- Activate and close it using only Tab, Shift+Tab, Enter and Space.
- Confirm the expanded state announced by assistive technology matches what is visible.
- Type a term and submit it; verify the URL and results are a normal WordPress search.
- Check that the input has an accessible label even when the form is collapsed.
- Test narrow and wide layouts, including a long search term and browser zoom.
- Confirm focus is never trapped in a hidden form and that closing the form returns focus sensibly.
- Check pages with more than one search form for distinct accessible names and unique input IDs.
Common problems and fixes
The icon appears but no field opens
In a block theme, verify the Search block is set to button-only and that the theme supports the expected block behavior. In a classic theme, inspect whether the toggle script is targeting the actual form wrapper and whether the form is being hidden by CSS without a corresponding state change.
Search submits an empty or incorrect query
Inspect the form markup. The search input needs name="s", and the submit control must be inside the same form. If you replaced searchform.php, compare it with WordPress’s default structure.
Screen-reader users cannot identify the control
Add an accessible button name, keep aria-expanded accurate, and associate a label with the search input. Do not rely on the magnifying-glass graphic or placeholder text alone.
Two search controls interfere with each other
Use separate IDs, data hooks and accessible names for each instance. Pass distinct aria_label values to separate get_search_form() calls.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Do you need a plugin?
No. A basic search form and a collapsed presentation are available through WordPress’s native Search block or the classic-theme search-form API. A plugin may be appropriate for a substantially different search experience, but it is not inherently required for this toggle effect.
Quick Recap
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.
