A Search Shortcut For Any Theme

Magnifying Glass and Map by Francesca Tirico

Sometimes you find a WordPress theme you love, like Twenty Nineteen, but it’s just missing something you really want, like a search bar at the top. I’ve covered my other Twenty Nineteen tweaks in an earlier post, but folks have asked about this too. Since it works for pretty much any theme, I figured a separate post would be more appropriate.

Since you don’t have a search bar in at the top of your site, you’re probably using WordPress’s built-in Search widget. The first thing you’ll want to do is right-click the widget’s title, choose Inspect Element (or similar, it depends on your browser) and copy its section ID. In my case, that is:

<section id="search-3" class="widget widget_search">

so, the section ID is search-3.

Now, edit your site’s menu. Here you’ll add a Custom Link to your menu, enter only # followed by the section ID as the URL, in my case #search-3 and enter whatever you’d like for the Navigation Label. I went with a magnifying glass emoji 🔍 , and if you choose an emoji too, please enter “Search” in the Title Attribute field so folks with Screen Readers know what the link is for.

(Photo by Francesca Tirico on Unsplash)

6 responses

  1. I wondered how you did it. I’ve the answer, thanks to people who asked you 🙂

    1. You’re welcome! 🙂

  2. Jorge Chacon Gutierrez Avatar
    Jorge Chacon Gutierrez

    thanks much. very helpful!

    1. You’re welcome! 👍

  3. Heh, sometimes the simplest hacks are the best. Thank you for sharing this!
    (incidentally, the lack of a search button at top and the unpleasant default font / font size have been two my twenty-nineteen dealbreakers and now I have fixes for both! I had initially been unhappy about the lack of a sidebar but then I realized… with the majority of folks likely viewing my personal blog on a phone, what good is a sidebar anyway?!)

    1. Happy to help!