How to Create Custom WordPress Search Forms Code-Free
Table of Contents
Are you looking for ways to deliver a better online experience to your website visitors? Creating custom WordPressWordPressOpen-source content management system (CMS) that allows users to create and manage websites and blogs.
More About WordPress search forms is one of the sure-fire methods to keep your audience more engaged with your web page and make it easier for them to find the needed content. How can you update your web page with custom search fields? This article describes three easy ways of adding the respective functionality to your site step-by-step.
Creating custom WordPress search forms will be especially useful for content-rich blogs and websites. It significantly facilitates the way users find relevant posts and products on your site while narrowing down the search results based on a specific category. For example, you can organize separate sections with products and special deals on your site, which are kept separately from the rest of your site’s data. You can adjust the search results to reveal posts from the chosen category using custom WordPress search forms on each category page.
Importance of WordPress Search Forms
A search field is a vital element of every website that aims to deliver a better user experience and make their content more findable. When landing on your web page, most users will find the needed information while using a search form.
However, not so many website owners integrate their web pagesWeb PagesHTML documents accessed via the internet.
More About Web Pages with custom WordPress search forms. In most cases, the site’s menu is all that a customer may use for navigation. The problem is that even the most advanced menu cannot give the customer exactly what they are looking for. When a person reaches your site through Google search and cannot find what they need, they are likely to leave your site and choose a competitor’s web resource offering handy search options.
With a useful internal WordPress search form, you increase the chances that website visitors will convert into your customers and won’t leave for your competitors’ websites. If you have hundreds of posts published on your blog, lacking a search form makes it difficult or simply impossible for your readers to find articles on specific topics.
Add Search Forms with Search Bar Widget
With the default WordPress installation, you get a search bar widget that you can place in any widget-capable area of your website, including a sidebarSidebarA vertical column that appears alongside the main content, providing additional information, links, or widgets that are relevant to the main content.
More About Sidebar, headerHeaderA visual and typographical band or menu commonly situated at the uppermost part of a website’s interface.
More About Header, and footerFooterA section at the bottom of a webpage with contact details, copyright notices, and links to important pagesOne of the primary functions of a footer is to provide navigation.
More About Footer area. You can add this widget to your site using the following two methods – using the WordPress Customizer or your site’s dashboard.
Adding a Search Form with WordPress Customizer
To add a custom WordPress search form using WordPress Customizer, you need to open your site’s dashboard and navigate Appearance > Customize. Select “widgets” in the Customizer sidebar. By doing so, you will open a new menu containing the entire list of widget areas that your website has and the widgets it features.
To add a search bar, choose the area where you’d like to place it and click on the Add a Widget button. You will see a list of widgets that you can add to the chosen area. Scroll down and find Search. Click on it, and the respective elements will be added to your web page.
If you would like to add the search form to the footer of your site, you may get a result like this:
You can relocate the search form and specify a titleTitleA text that appears at the top of a web page or within a section of content.
More About Title in the Title field using the drag-and-drop functionality.
Once you finish editing the custom WordPress search form, save the changes to publish it on your site.
Adding the Search Form Using WordPress Dashboard
If you prefer working in the dashboard of your WordPress site, you can add the search form to your web page while clicking Appearance > Widgets. The widget editorEditorThe interface that allows you to write and format text, add images, embed media, and much more.
More About Editor screen will show up. Find the Search option on the list, drag and drop it to the area where you’d like to display it. The further steps look similar to adding a custom WordPress search form via the WordPress Customizer. You can add the title to the search form and adjust its location within the chosen widget area in the WordPress dashboard.
If you decide to switch to the WordPress Customizer, you can do it at any moment by clicking on the Manage with Live Preview button placed at the top of the screen.
How to Manually Customize Default WordPress Search Forms
As it’s been already mentioned above, the default WordPress installation doesn’t come with many customization options for search forms. Basically, all you can do is adjust its position in the chosen widget area and specify the title of the search form.
Luckily, there is a wide choice of plugins of all types and available in the WordPress community for different purposes. If editing the search form’s code isn’t exactly what you are looking for, you may customize your search form with the help of dedicated WordPress plugins.
For example, you can install a free WordPress pluginPluginA piece of software that can be easily installed and activated on a CMS platform to enhance its capabilities.
More About Plugin like the Ivory Search. It’s a handy solution that lets you manage how the search form will be displayed on your site and what content it will reveal in search results.
To get started, you need to install and activate the free version of the Ivory Search plugin on your site. Next, use the WordPress dashboard to navigate Ivory Search > Search Forms.
You can either leave the default settings of the search form or go ahead and customize it the way you like. You can specify what content from your site you’d like to show up in search results. It may be posts, pages, extras. You can specify what content you do not want to show up in search results using the Exclude tab.
Using the Design tab, you can adjust the search form’s display on your site while enabling Search Form Customization. Once done, click on the Search Form Customizer to open the WordPress Customizer and manage the design settings in the visual mode. That is where you can adjust the style of the search box, including its color, shape, and the text used for different elements. Once done, don’t forget to click on the Save Changes button.
At the end of the custom WordPress search form customization, you can configure the search results page. It lets you manage the number of posts displayed on the search results page, manage whether you’d like to highlight search terms, adjust the order of search results, etc.
Click Save Form once finished. To add the search form to your site, navigate Ivory Search > Settings and choose whether you’d like to add the search form to the footer or header sections while clicking on Header Search of Footer Search options. In the drop-down menu, click on the search form you’ve just created and save the changes. Open your website to watch the form appear in the header area.
You may also add the custom search form to your website’s menu. To do this, click Ivory Search > Menu Search, and specify the menus where you’d like your custom WordPress search form to show up.
Save the changes once done.
How to Add Google Custom Search in WordPress
To begin with, go to Google Programmable Search Engine and log in with your Google account. After logging in, click on New Search Engine and specify a link to our WordPress site. This link will also be used as the name of your search engine in the Google Custom Search Engine console. Click on the Create button and proceed to the next step.
You will see a notification that you have successfully created your custom search engine on the next page. You will be offered a choice: add it to your site or get a public link. To add a custom search engine to your WordPress site, click on the Get Code button.
On the next page, you will receive the code for your custom search engine. Copy it. We will need it in the next step.
Go to Appearance » Editor in your site’s dashboard and click on the searchform.php file to open it in the editor. Paste the above code into this file. It’s okay that this file will contain nothing but the Google custom search engine code.
If your theme does not have a searchform.php file, create it using a text editorText EditorA software application or program designed for creating, editing, and manipulating plain text files.
More About Text Editor like Notepad and upload it to your theme folder using an FTPFTPFile Transfer Protocol is a technology that allows users to transfer files between computers over a network.
More About FTP client.
After pasting the Google custom search code, go to the Appearance »Widgets and drag the search widget to your sidebar.
That’s all. You can see the new search in action on the site.
To add a personalized look and feel to the custom WordPress search form, go to the Google Custom Search website and open the editing of your search engine. You will be shown its settings. Click on Look and Feel in the sidebar. Google custom search has several predefined themes that you can use. You can also click on the customize tab and choose your font, borders, background color, etc. Once you’re done customizing the look and feel of your search bar, just save your changes, and they’ll appear on your site.
10 WordPress Custom Search Form Plugins
If you need more options for the best WordPress custom search form plugins, we have prepared an overview of 10 free and premium extensions that will help you improve the standard search of your site.
Free plugins
The plugin adds “live search” to the functionality of the default WordPress search. As soon as visitors start typing a query into the search bar, the plugin constantly queries WordPress in search of matches with the words already entered.
The “live search” technique means that most people will find what they are looking for before they finish entering their query. This saves users time searching for the information they need.
The main features of the plugin:
- adaptive designAdaptive DesignA web development approach that focuses on creating a website or application that adapts based on the device being used.
More About Adaptive Design: SearchWP Live AjaxAjaxA set of web development techniques that uses various web technologies on the client side to create asynchronous web applications.
More About Ajax Search is suitable for working with any WordPress themeWordPress ThemeA collection of files that determines a website’s overall design and functionality.
More About WordPress Theme; - the built-in function of the templateTemplateA website template is a pre-designed webpage that is a starting point for creating a website.
More About Template loader will show the final look of the search form on the page while editing the site; - templates will help you quickly and easily customize your search for WordPress;
- the plugin is open sourceOpen SourceA type of software that allows users to access, modify, and distribute its source code freely.
More About Open Source, an experienced developer can modify the plugin to suit your needs.
Cost: free.
The plugin will replace the standard WordPress search engine with an advanced search form that gathers relevant results. The plugin has an advanced search on the site, in the titles, and by pages. The plugin tracks search queries. It displays a map of the search for the most popular queries, which you can add to the sidebar or footer of the site using the widget.
The main features of the plugin:
- search results are integrated into your topic without the need to customize custom search templates;
- fine-tuning the results by changing the weight of the record title and its content;
- an available heat map that displays the most popular queries on your site;
- works with caching plugins, such as WP-Super-CacheCacheA temporary storage location that stores frequently accessed data to reduce load times.
More About Cache and W3 Total Cache; - search results are automatically sorted by relevance.
Cost: free.
The plugin will extend your basic WordPress search functionality, allowing you to specify what can be displayed in the search. The plugins we’ve described above make WordPress site search more flexible and significantly expand your search terms. Search Exclude, on the other hand, excludes certain pages and posts from the search.
The main features of the plugin:
- quick setup: to hide a post or article, just select “Exclude from search queries” in the editor menu;
- list of hidden publications: A list can be edited to manage hidden items in the search in the plug-in settings.
Cost: free.
This plugin replaces the standard WordPress search engine with a system that works with partial matches and sorts search results by relevance. The plugin also indexes comments. The premium version of the plugin is compatible with WordPress Multisite.
The main features of the plugin:
- sort results: search results are sorted in order of relevance, not by date;
- works with fuzzy matches: correspondence of partial words, if complete words do not match;
- full and partial match search: search for documents that match only one word from the search query or for all words of the query;
- highlight search terms in the document when the user views the search results;
- search for comments, tags, categories;
- ability to adjust the weight of titles, tags and comments;
- save query history: display the most popular and recent queries;
- advanced filtering capabilities;
- customize WordPress search results page.
Cost: free, but there is a paid premium version.
Premium packages:
- Annual – $ 101 per year. Includes use of the plugin for an unlimited number of personal sites and support and updates for the year.
- Permanent – $ 356, one-time payment. Use the plugin for unlimited personal, customer, and commercial sites and support and updates for life.
With Ivory Search, you set up a custom search for your WordPress site. This WordPress search plugin will help you find information about products on WooCommerceWooCommerceA free, open-source e-commerce plugin for WordPress.
More About WooCommerce online store, pictures and attachments, and visitor messages on the pages. All this will provide a smart search on the WordPress site.
The main features of the plugin:
- Ivory Search forms can be placed in different areas of the site, be it the title, footer, sidebar, widget area or menu on the pages;
- use of AJAX search technology;
- statistics of search queries on the site;
- multilingual site support;
- compatibility with plugins such as WooCommerce, Weglot, Polylang, bbPress and WPML.
- Price: free, there is a premium version.
Premium packages:
- Pro – $19.99 per year for one site. In addition to the standard functions, the plugin searches for publications of a certain author with a marked status or excludes such publications from the search query. The price includes a year of priority support and renewal.
- ProPlus – $49.99 per year for one site. Includes standard features and capabilities of the Pro package. In addition, it searches for products in the WooCommerce online store by article, image, and attachment with a certain type of files. With the plugin, you can exclude WooCommerce products from search if they are not available and remove some multimedia files from search results. The price includes a year of priority support and renewal.
FiboSearch – Ajax Search for WooCommerce
WordPress search plugin that will improve the standard search in the online store. Works with WooCommerce on search phrases, which will help the buyer to find the right product on the site quickly.
The main features of the plugin:
- detailed search by products: you can customize the search by product name, article, categories and tags;
- quick setup of the plugin on the site: FiboSearch can be added to the site page in a couple of clicks, pasting it into the page code or adding a widget;
- personalize the search bar: set your own rules for displaying the search query on the page;
- design: the user can determine the appearance of the search. For example, specify the color of the search bar, photos of products that will be displayed in the previous search box.
Price: free, there is a premium version.
Premium packages:
- Personal – $49 per year. The price includes support and updates per year for one site for 10 thousand products, as well as access to premium features: search with errors and synonyms, search by tags, categories, messages on the pages and exclusion of some products from the search.
- Entrepreneur – $89 per year. The package includes priority support and update of the plugin for three sites up to 50 thousand products. Premium features of the plugin are also included in the price.
- Agency – $199 per year. Tariff with priority support and plugin updates for 25 sites up to 150 thousand products. The price also includes the premium features of the plugin.
This WordPress search plugin will add site types to your site, such as gallery, article, or portfolio.
The main features of the plugin:
- search classification: use tags and categories for better search on the site;
- custom fields;
- translation-ready.
Price: free, there is a premium version.
Premium packages:
- Annual – $18.90 per year. Includes premium plug-in features: disable search for specific pages or record types, adjust the order in which search results are displayed, add custom code. You will also receive priority developer support and plugin updates.
- Lifetime – $189 one-time. Lifetime subscription with premium plug-in capabilities, personal support, and updates.
Paid plugins
It is one of the best premium search plugins. The plugin scans existing articles, pages and other custom posts.
The main features of the plugin:
- fine-tuning: you can manually select the custom types of posts and categories you want to include in the search;
- priority setting: you can assign priority to posts and web pages;
- keywordsKeywordsA specific word or phrase that encapsulates the essence of a particular topic or theme.
More About Keywords: the plugin has a function of partial match for keywords; - The plugin works with PDFs: it indexes content from unlocked PDFs.
Cost:
- Standart – $99 per year. License for 1 site, 1 year of support and updates, as well as all official extensions.
- Pro – $199 per year. License for 5 sites, 1 year of support and updates, access to metrics, integration with WooCommerce, the ability to define your own search parameters.
- Agency – $399 per year. License for an unlimited number of sites, 1 year of support and updates, and all official extensions.
The plugin replaces the basic WordPress search engine with a more flexible and live search engine. Posts, pages and sections perform the search. Ajax Search Pro is compatible with any theme, it has 60 design styles. Customize the search form on the site to suit the style of your blog or online store.
The main features of the plugin:
- adaptive design: the plugin is optimized for any screens and devices;
- more than 400 custom settings;
- integration with Google AnalyticsGoogle AnalyticsA web analytics service that provides valuable insights into the performance and user behavior on websites and mobile applications.
More About Google Analytics; - keyword selection and search statistics;
- caching option.
Cost: $36 per year for personal use on one site and $ 255 per year for multiple users’ corporate use of the plugin.
Try different plugins and choose the one that will improve the relevancy of the search on your site and the overall experience of using your website. Add advanced custom WordPress search forms to your site. you customers will appreciate it.