WordPress Site Search? Do Tell!

When navigating a website, users need to be able to easily find what they’re looking for. If this is not happening, you might lose a subscriber or a potential client. This is why by having:

• Proper website navigation in place,
• Blog categories,
• Product categories, filters, and sorting options in the case of online stores,
• Internal site search,

you can improve website user experience, but also user engagement, and conversions.

In this article, we’ll go into the nitty-gritty of WordPress site search, which can help your visitors find the most relevant information for them. Particular tools can give you access to these searches so that you can gain insights into your visitors’ needs.

So, in this article we’ll be talking about:

• How to add internal search to your WordPress site,
• Which are the most popular site search WordPress plugins,
• How to create your WordPress search page,
• How to track user searches on your site.

 

How to add internal search to your WordPress site using widgets

If you’re not using the latest WordPress experience (aka Gutenberg, aka the Block Editor), you will be using  the search widget in order to add the WordPress site search feature.

Now, how do you know which experience you’re using?

Well, this is how the Classic Editor looks like when you enter a post, for example:

And this is the Default Editor, also called the Block Editor or Gutenberg:

 

Now, WordPress site search is a native feature for WordPress. It comes in the shape of a widget that can be placed inside a widget area. Now, depending on the theme you’re using, there are several areas where you can place the site search widget, from header, till footer and sidebar.

Here are the steps for adding the WordPress site search widget to a widget area:

1. Head over to Appearance->Widgets
2. Go to a widget area and click on the dropdown arrow.
3. Click on the “+” sign in order to add the search block to the page. In my example, I’m using the sidebar widget area. It has some existing widgets: Recent Posts, Recent Comments,   Categories, and Archives.Now, each of these were previously called widgets, now they are called blocks. The WordPress search site is now a block as well. We’re still transitioning from the “widget” term.
4. A block inserter will show up. Let’s type “search” in the search bar.
5. Let’s click on the search block to add it to the sidebar.
6. On top of the WordPress search block you will notice a toolbar which allow you to make a few edits to the search block. You can:
   1. Reposition the search block. When you select the 6 dots, you will have the option to drag and drop the block where you want. You can also use the up and down arrows to move the search block up and down.
   2. Change the search block’s alignment.
   3. Toggle the search label.
   4. Change the position of the button.
   5. Add an icon to the button.
   6. Move the block to another area (footer, etc).
   7. Other options (block duplication, deletion, etc) .
7. When you select the search block you will also notice a block editing panel on the right hand side. Here you can:
   1. Make color changes to the text or background of the search block.
   2. Adjust the width of the search block.
   3. Add CSS classes to the block if you want to make some extra CSS styling.

All you have to do now is hit the “Update” button in the upper-right.

 

How to add internal search to your WordPress site in the Block Editor

In the previous chapter I showed you how to add the WordPress search block to a widget area when you are using the old WordPress experience.

But when you are using the current one, the so called Block Editor, you no longer need widget areas, they are no longer available.

What’s still available is the WordPress search block. And you can add it now to any page or post, in whatever position you like.

Let’s go tot a page or post and add it.

1. Click on the “+” sign in the upper left of the Editor to open up the block inserter.
2. Type “search” into the block inserter’s search bar.
3. Drag and drop the WordPress search block wherever you want in the page or post.

In the previous chapter I showed you how to make edits to the block using the:

• Block toolbar,
• The block editing panel,

These are still valid here.

Now, what if you need more styling options for the search block?

Well, there’s a way for you to update the block editor. You could use the Kubio page builder for this. It is a free WordPress plugin that will put the Block Editor on steroids. It will allow you to make tons of block customizations, no matter the block you want to use.

 

How to customize the WordPress search block using Kubio page builder

The moment you install the builder you will notice new blocks in the block editor. The default ones will have black icons, while the Kubio ones are blue-green.

All you have to do is to add the Kubio search block to a page, instead of the default one. See? It looks almost the same. You can even recognize the toolbar.

But, here’s the catch. Take a look at the block editing panel. It’s been upgraded! It has 3 customization layers: Content, Style, and Advanced. Let’s take a look inside:

Search block content edits

At this level you can:

• Choose a search layout: input and button or input only,
• Specify the placeholder text. We recommend the default “Search”,
• Specify the type of button: text or icon,
• Select a relevant icon for your button.

 

Search block style edits

Inside style you can make changes to the normal and hover states for the input and the button.

For both the input and button you can customize the:

• Text color,
• Background color,
• Border,
• Typography.

 

Search block advanced customizations

At the “Advanced” level, here are the  available customizations across the container, input, and button: background, spacing, border and shadows, typography, transform, dividers, transition, responsive, and miscellaneous. I won’t go into details here. But the point is: Kubio gives you so much freedom over block design in WordPress.

 

Now, let’s say you want to add some extra functions to the WordPress search feature. Maybe you’d want some autocomplete options, or typo recognition…enter WordPress plugins.

 

WordPress plugins to help you improve your internal site search

I’ve picked 3 of the most popular site search WordPress plugins out there.

If you do not know how to install a WordPress plugin, don’t worry, we’ve got your back. This tutorial is all you need.

 

Relevanssi

Relevanssi is a free WordPress that manages to enhance the default WordPress site search feature. For some advanced features, there’s also a paid plan.

Now, here’s how Relevanssi can optimize your internal WordPress site search:

• It sorts search results by relevance, not by date.
• It matches partial words as well if complete words don’t match. Awesome, right?
• It allows you to search for phrases with quotes, for example “search phrase”, just like in Google’s search engine.
• It creates custom excerpts that show where the hit was made, with the search terms highlighted. This is also cool because you get a preview of the results, and it helps you realize if you’ve got the right content or not.
• It highlights search terms in the documents when the user clicks through search results. This is also great: you won’t have to search it again.
• It allows for WooCommerce products search.

I bet you had no idea that this is what optimized site search can mean.

Me neither, truth be told! 

 

Ivory Search

Ivory Search can power up your internal WordPress site search with features like:

• Display search forms anywhere on the site: the site header, footer, widget area, navigation menu, page content and on any other place using shortcode. This way you won’t depend on the widget areas made available by your WordPress theme.
• Search any content on the site including but not limited to Post Types, Category, Taxonomy, Terms,  Custom Fields, Authors, WooCommerce, Comments, Date, File Types etc.
• Excluded searches.
• Advanced search form styling options.
• Search WooCommerce products.

 

SearchWP

SearchWP is a very accurate site search WordPress plugin. Here are some of its best features:

• Show better results by using keyword stems instead of exact term matches.
• It allows searches for your keyword in post, page,  titles, slug, categories, tags, comments, taxonomies, excerpts, etc.
• It has shortcode outputs.
• Search WooCommerce products.
• It has search statistics and insights to understand what your visitors are searching for and (not) finding.

One very useful site search feature is the autocomplete one. I guess you’ve seen this before:

SearchWP doesn’t include autocomplete search functionality by default. But you can enable it by using a free extension called SearchWP Live Ajax Search.

Now that you know which are the most popular site search WordPress plugins out there it’s time to find out how search really works on a site. How do the results actually show up?

 

The WordPress search page

A Search Page is a WordPress Page with a custom Page template to give users more information for searching your site.

The Search Page is in fact a template that displays the search results. When users type in the search bar a query, they’ll be prompted to a page with results. These pages are generated thanks to a template file that is often included in the sidebar of many themes. If there isn’t one in your theme, here is the official WordPress tutorial on how to create it. 

For example, the Colibri theme has this file included. It can be accessed from the Customizer (Appearance -> Customize). On the upper-left, you can see an icon representing a file. When clicked, a dropdown with all the templates will show up (the search page included).

The Colibri search template matches the overall theme design, but it can be customized within the theme’s Customizer. When deploying the Colibri Page Builder plugin you’ll get access to tons of customization options.

Until now we’ve managed to:

• Run internal site search
• Customize the search results page

What now?

 

Enable Site Search Tracking in Google Analytics

Do you want to learn what your visitors are looking for on your site? Then, you need to enable site search tracking in Google Analytics.

It gives you insights into how people use your website, which content they look for, and what search terms they enter in the search bar. Such insights might even give you hints on your next blog topic.

Google Analytics is the tool that allows you to have access to users’ search terms. In order to do this, you’ll need to activate the feature.

You’ll have to log into your Google Analytics account, and head over to your Admin area.

Then, navigate to View -> View Settings.

Scroll down to “Site search Tracking” and toggle it on.

The query parameter is the letter that appears in your site’s URL before the search terms. It usually is the letter “s”(as in search term) or the letter “q”(as in query). Go ahead and search for something, then check your URL.  

Make sure to tick “Strip query parameters out of URL”. This strips only the parameters you provided and not any other parameters in the same URL. This way you are telling Analytics not to split up tracking for each visited page. You won’t be seeing separate listings such as yoursite.com/page?s=1, or yoursite.com/page?q=2, etc. All visitors will be tracked together on 

yourysite.com/page.

You can also enable “Site search categories”. In this case the query can be “cat”, more on the topic, here.

Now that you’ve enabled site search in Google Analytics, you can check the reports under Behavior -> Site Search.

And, we can call it a wrap!

 

Your turn now to set up search on your WordPress site.

 

[sibwp_form id=1]