{"id":40556,"date":"2021-04-26T13:26:25","date_gmt":"2021-04-26T10:26:25","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=40556"},"modified":"2023-02-02T13:14:59","modified_gmt":"2023-02-02T11:14:59","slug":"wordpress-search-form","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/wordpress-search-form\/","title":{"rendered":"How to Create a Custom WordPress Search Form (In 3 Simple Steps)"},"content":{"rendered":"\n

Search is a key part of the online experience, and it’s how most users find information on the web. As such, if a visitor arrives on your site and can’t immediately find what they’re looking for, there’s a good chance they may leave without digging further. A WordPress search form can help make sure that doesn’t happen.<\/p>\n\n\n\n

By implementing a better search feature on your site, you can help users find what they need faster and simultaneously reduce bounce rates. It’s a win-win situation for everyone involved.<\/p>\n\n\n\n

In this article, we’ll discuss the importance of your site’s internal search and show you how to add a search form to your website. Then we’ll walk you through how to create your own custom search form in three steps. Let’s get started!<\/p>\n\n\n\n

Why your WordPress search form is important<\/h2>\n\n\n\n

Search is a dominant force on the web. It’s how the vast majority of users find new content and sites to visit \u2013 and we’re all familiar with the importance of search engine optimization (SEO)<\/a> when it comes to being found online.<\/p>\n\n\n\n

However, not as many website owners consider the prominence of search on their own sites. After all, a main menu can seem like all the navigation visitors might need<\/a>.<\/p>\n\n\n\n

However, if users land on your site and can’t find what they’re looking for quickly, they may not stick around. This is especially critical if they came from a Google search, since there’s a whole list of likely competitors just a Back <\/em>click away.<\/p>\n\n\n\n

Having a useful and accessible internal search form helps prevent users from prematurely leaving your site. This means fewer losses to the competition and more chances to convert visitors into subscribers, customers, or fans.<\/p>\n\n\n\n

\n
\n

Similarly, if you have hundreds or thousands of blog posts<\/a> published, it can be tough for users to sift through and find articles on specific topics. A search function can improve the user experience (UX)<\/a> of your site and leave visitors more satisfied, which is ultimately good for business.<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tHow to create a custom #WordPress search form for free (2 methods) \ud83d\udd0d<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

How to add a search bar to your site (two methods)<\/h2>\n\n\n\n

The default WordPress installation includes a search bar widget that can be added to widget-capable areas<\/a> of your site, such as the header, footer, or sidebar. There are two methods for adding this widget: <\/p>\n\n\n\n

    \n
  1. Through the WordPress Customizer<\/a>.<\/li>\n\n\n\n
  2. Directly from the dashboard<\/a>.<\/li>\n<\/ol>\n\n\n
    <\/div>\n\n\n\n

    1. Add a search form using the WordPress Customizer<\/h3>\n\n\n\n

    To add the search form using the Customizer<\/a>, head to your WordPress dashboard and navigate to Appearance \u2192 Customize<\/em>. Click on Widgets<\/em> in the Customizer sidebar.<\/p>\n\n\n\n

    This will open a new menu with a list of the widget areas on your site and the elements each one currently contains:<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    To add the search bar to a widget area, click on the Add a Widget<\/em> button in the area where you want to place it. In the new menu that slides out, scroll down to and select the Search<\/em> widget:<\/p>\n\n\n

    \n
    \"Adding<\/figure><\/div>\n\n\n

    This adds the widget to the end of the list:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    You can then drag it to a different spot to reposition it. For example, dropping it at the beginning of the list will move it to the far left of the widget area.<\/p>\n\n\n\n

    You can also add a title to the search form by filling in the Title<\/em> field. This includes a small header above the search box:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    When you’re finished, remember to save your changes. You can do this by clicking on the blue Publish<\/em> button at the top of the Customizer menu.<\/p>\n\n\n

    <\/div>\n\n\n\n

    2. Add a search form from the WordPress dashboard<\/h3>\n\n\n\n

    If you prefer, you can also add the search form directly from the WordPress dashboard. To get started, navigate to Appearance \u2192 Widgets<\/em> to open the widget editor screen:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    From there, simply find the Search<\/em> widget in the list and drag it to the area you want to display it in:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    You get access to the same options here as in the Customizer. You can reorder the widget to change its position or add a title if you wish.<\/p>\n\n\n\n

    The only difference is that the Customizer provides a visual preview of your changes. If you decide at any time that you’d rather use the Customizer, just click on the Manage with Live Preview<\/em> button at the top of the screen to open it up.<\/p>\n\n\n\n

    Note that the specific widget areas available on your site are controlled by your theme, and not every theme includes the same options. For example, the default WordPress Twenty Twenty-One<\/a> theme only offers the footer as a widget area.<\/p>\n\n\n

    <\/div>\n\n\n\n

    How to customize the default WordPress search form manually<\/h2>\n\n\n\n

    Unfortunately, the default search form doesn’t come with many customization options. You can change its position and add a title, as outlined in the above sections, but that’s all that’s available using the interface.<\/p>\n\n\n\n

    However, since we’re talking about WordPress, there’s a way around this: editing the code directly. By using WordPress template files, you can create a custom search page for your site. If you want to do this, WordPress.org has a fantastic walkthrough<\/a>.<\/p>\n\n\n\n

    However, even with this method, the default WordPress search function is still limited. You can only place the form in widget areas, and the appearance is based on your theme, which may not offer much in the way of customization options. Fortunately, there are easier ways to customize your search form \u2013 namely, by using WordPress plugins. <\/p>\n\n\n

    <\/div>\n\n\n\n

    How to create a custom WordPress search form with a free plugin<\/h2>\n\n\n\n

    If you want to create a custom search form and aren’t comfortable with code (or just don’t have the time for it), you can use a free plugin instead. In this section, we’ll walk you through creating a custom search bar using the Ivory Search plugin.<\/p>\n\n\n

    <\/div>\n\n\n\n

    1. Install and activate the Ivory Search plugin<\/h3>\n\n\n\n

    The first step is to head to your WordPress dashboard and install Ivory Search:<\/p>\n\n\n

    <\/div><\/div><\/div><\/div>\n\n