Title: Focus search
Last modified: September 22, 2026

---

# Focus search

 *  [readonly24](https://wordpress.org/support/users/readonly24/)
 * (@readonly24)
 * [1 week, 1 day ago](https://wordpress.org/support/topic/focus-search/)
 * Hello,
 * is it possible to set to focus (cursor) into the search field after clicking 
   the search icon?
 * Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Amrit Kumar Shrestha](https://wordpress.org/support/users/shresthauzwal/)
 * (@shresthauzwal)
 * [1 week ago](https://wordpress.org/support/topic/focus-search/#post-19026821)
 * Hi [@readonly24](https://wordpress.org/support/users/readonly24/),
 * Thank you for reaching out.
 * When you hover over the search icon or click to open the search field, the cursor
   already changes automatically to indicate that you can type into it.
 * It seems you may be looking for a more specific or custom behavior. Could you
   please provide a bit more detail on what exactly you mean by “focus”? For example,
   are you referring to a visual highlight or outline appearing around the search
   field, the cursor automatically blinking inside the input box ready for typing,
   or something else entirely?
 * This will help us understand your exact requirement.
 * Best regards
 *  [Shivaji Mitra](https://wordpress.org/support/users/anblik/)
 * (@anblik)
 * [5 days ago](https://wordpress.org/support/topic/focus-search/#post-19029159)
 * I think [@readonly24](https://wordpress.org/support/users/readonly24/) means 
   keyboard focus, not the mouse cursor. That is, after the search icon is clicked,
   the typing cursor should already be inside the search box so you can start typing
   straight away.
 * And yes, it should work that way. When a button opens a field, focus belongs 
   in that field. At the moment a keyboard user activates the icon, the panel opens,
   but focus is still sitting on the icon, so they have to press Tab to get into
   the box. Someone using a screen reader often does not even realise the box has
   appeared.
 * Until the theme does it, you can add this in your child theme functions.php:
 *     ```wp-block-code
       add_action( 'wp_footer', function () { ?><script>document.addEventListener('click', function (e) {    if ( ! e.target.closest('.zak-search-icon, .search-toggle, [class*="search-toggle"]') ) return;    setTimeout(function () {        var f = document.querySelector('.search-field:not([hidden]), input[type="search"]:not([hidden])');        if (f && f.offsetParent !== null) { f.focus(); }    }, 150);});</script><?php }, 99 );
       ```
   
 * If nothing happens, the selector is wrong for your build. Right click the search
   icon, choose Inspect, copy the class you see there and put it in place of the
   first one in the list.
 * Two more things that go with this, if you want the search to be properly usable
   by keyboard:
 * The icon should be a real button element with aria-expanded set to false when
   closed and true when open, so a screen reader announces that something opened.
 * Pressing Escape while the search is open should close it and put focus back on
   the icon. Without that, a keyboard user is stranded inside a panel they cannot
   get out of.
    -  This reply was modified 5 days ago by [Shivaji Mitra](https://wordpress.org/support/users/anblik/).
 *  Thread Starter [readonly24](https://wordpress.org/support/users/readonly24/)
 * (@readonly24)
 * [5 days ago](https://wordpress.org/support/topic/focus-search/#post-19029180)
 * [@anblik](https://wordpress.org/support/users/anblik/) Thanks, this is exactly
   what I want to have. 
   Your scripts works perfectly. Great!

Viewing 3 replies - 1 through 3 (of 3 total)

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffocus-search%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/zakra/4.3.3/screenshot.jpg)
 * Zakra
 * [Support Threads](https://wordpress.org/support/theme/zakra/)
 * [Active Topics](https://wordpress.org/support/theme/zakra/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/zakra/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/zakra/reviews/)

 * 3 replies
 * 3 participants
 * Last reply from: [readonly24](https://wordpress.org/support/users/readonly24/)
 * Last activity: [5 days ago](https://wordpress.org/support/topic/focus-search/#post-19029180)
 * Status: not resolved