Set up a WordPress search – Tutorial

In this Step-by-Step-Tutorial, we will teach you, how to create a basic search form with the WordPress search plugin “Profisearchform”. But first, we need to explain some terms, we will use here.

When you are using WordPress, you are probably familiar with the concept of “Categories”. As you know, by this concept, you can categorize your Blogposts by using different topics. More generally speaking, categories are taxonomies, as well as tags are taxonomies. Maybe your Theme has also other taxonomies registered, for example, in the case of WooCommerce “product categories”. “Profi Search Form” enables you now, to use these taxonomies in order to get more precise search results. So, for example, you can add a select box to your Search Form, by which your visitor can limit the search results to a given category.

The second concept, we want to discuss are the WordPress Postmetas. For every blogpost, there is the possibility, to enrich this Post with metavalues. These are called Postmeta. By these information, you can add additional information to your posts like for example prices, latitude, longitude or whatsoever. So, if you are using lets say WooCommerce, you can add products and you can enrich the product-information by adding a price to it. But these Postmetas are not bound to specific themes. You can enrich each Blogposts by the metavalues, you want to. You can activate this funtion by clicking on the “Screen Options”. You will find them in the top right corner of your editor page.

After you have activated this option, you will see this new Form at the end of your editor page:

The Postmeta Field in the WordPress search plugin Dashboard

The Postmeta Field in your WordPress Dashboard

Postmetas contain a Key/Value-Pair. This means, for example, you enter as key “price” and as a value you enter 25.99. For another post you may now enter for the key “price” the value 15.99. This would indicate, that the discussed item in the first blogpost would cost 25.99 $ and in the second post 15.99 $. Usually, these things will be done by your theme automatically, but we think, its important to mention this possibility, because with the Postmetas begins the magic.

The “Profi Search Form”-Plugin is able to make these values searchable. So if your value is a number or a string, “Profi Search Form” is able to search them! Unfortunatly, it is not possible to search serialized postmeta values. For the moment, this shouldn’t bother us. If you want to know more about this issue, please read the chapter in our “Troubleshooting” article.

OK. So, after we have discussed the two main concepts, on which we can rely to realize our detail search in WordPress, lets realize one.

To do so, we log into our WordPress Dashboard and click “Search Filter > New Filter”.

Create a Detail Search with WordPress - Step 1

Create a Detail Search with WordPress – Step 1

The first thing we do is, we enter a name for our new Form. By this name, we can later on insert this form into a page. The second step, we have to undertake is to define the Post Types, which we want to search with this form. The classic WordPress Post Types are “Post” and “Page”. Other Post Types can be “Products” or whatever. In the last step, we decide, wether we want to highlight matching phrases or not. This is especially interesting, when we add a fulltext search. If your visitor enters a search word, this will be highlighted in the search results. If you don’t want this option, just don’t check the checkbox.

Create a Detail Search with WordPress - Step 2

Create a Detail Search with WordPress – Step 2

In the second step, we can now choose, which Taxonomies and Postmetas we want to use in our search form. All searchable Postmetas and Taxonomies are listed on the left side. We choose now, which ones we want by dragging them into the right pane.

Configure the Layout in the WordPress search plugin

Configure the Layout

In this step, we will choose some layout options. It may look more complicated than it actually is. In the section “Search Result Columns”, we can select, wether we want to have our search results in one, two, three or four columns.

Additionally, you can choose the background color of the search result elements, as well as the border color. If you have selected the option “Highlight”, you can also choose the color, which the highlighted section shall have.

The section underneath (“Single Result Element”) gives us the possibility, to change the appearance of the single search result element ( click here for a more detailed description ). So, with some basic HTML knowledge, you are able to create beautiful result listings. But: You don’t have to. The plugin already has a standard template, which you can just use.
But we should have a closer look:
So, you see two text areas, which you can change. The first textarea contains the HTML for the single element, while the second area contains the HTML, in case, nothing was found. We developed a powerful, yet easy to use template engine to enrich the single element with a lot of additional data.
So, for example, the placeholder #the_title# will be replaced by the title of the post, which was found. There are some common placeholders for every item: #the_title#, #the_author#, #the_date#, #the_excerpt#, #the_content#, #count_comments#, #the_permalink# and #thumbnail#. But, for every Postmeta and for every Taxonomy, you’ve added in the last step, there is a placeholder now. That means, you can also add these informations into the search result.
And thats perfect! Imagine, someone searches a product which doesn’t cost more than 100 $. Doesn’t it make sense, to show him, how much the found products actually cost? It does!

After we’ve arranged the look of our search results, we access now the heart of our search form.

Create a Detail Search with WordPress - Step 4

Create a Detail Search with WordPress – Step 4

Now, we choose, which form elements we want to use in our search form. We can choose between eight different elements: Fulltext, Input, Selectbox, Radiobox, Checkbox, Map, Range and Order by. Before we discuss these different Types some basic explanations:

You choose an element by dragging it into the “Chosen Form Elements”-Pane. After you have chosen an element, you have to configure it. By clicking on the element, you can open a dialog box in which you can specify, how this element works. One of the main informations, you will always have to give is a name and in what datasource this element will search. Okay, but lets go step by step:

1. The Fulltext Search

Configure the Fulltext Search

Configure the Fulltext Search

In this dialog, you can define, if the fulltext search only searches the title or also the content or even the excerpt. If we once consider our city search, we have set up, to demonstrate our Plugin: The title always contains just the city name. So, by choosing only the title, we actually create a cityname search, instead of a fulltext search. So, by this we give you the possibility to specify, what content will be really searched for.

2. The Selectbox

Configure the selectbox

Configure the selectbox

The dialog to configure the Selectbox has already more options. First, you have to choose a Fieldname and then the datasource. So, for example, if you want, that this selectbox contains your categories, choose this from the datasource. But there is also another option: If you just open the box, there is a selectbox, where it says “Options: Automatic”. If we stick to our example of the categories, this means, that the options of this selectbox-element will be automatically chosen from the categories you use. But: Maybe you want to limit this selectbox to specific categories. So, after you have chosen the datasource, you can switch here to “Individual”. Now, a new field opens, where you can enter your own options. Also, a request will be made, which options are accessible by this datasource. These options will also show up. With a click on the trash-icon you can now delete the options, you don’t want. Or: You can add options.
But: Why should I want to enter options, that doesn’t exist. Well, in our example with the categories, that doesn’t make a lot of sense. But imagine, your datasource is a Postmeta. Lets say, you want a selectbox, where someone can choose between two options, lets say: Product is downloadable, Product is not downloadable. You give the fieldname “Download” and you want the two options “Yes” and “No”. But: The Postmeta Value is “1” and “0”. So, if you change to “Individual”, instead of “Yes” and “No” you will see “1” and “0”. Now, you can create your own options. Enter the Option Value “Yes” and the Option Key “1” and click “Add Option”. Do this again with “No” and “0”. After this procedure you just click the trash-icon for the old options and you are done.

3. The Input Field

Configure the Inputfield

Configure the Inputfield

You might have wondered, why there is – besides the fulltext search – another input field, which you can choose. Well, once you’ve opened the dialog, you know why. While the fulltext search is really bound to searching text in the blogpost, this Inputfield has some unique functionality. You can select a datasource and choose between six different operators: Equal, Like, Bigger Than, Smaller Than, Equal or Bigger than, Equal or Smaller Than. So, whats going on here? First, we want to give an example. Lets say, your database contains holiday appartments. One of your Postmetas contains the number of persons, which can stay in a particular appartment. Now, a family with four persons visits your webpage and wants to find an appartment where at least four people can stay. So you choose “persons” as your postmeta and “Equal or Bigger than” as your operator and you are done.

The operators explained:
Equal: Find all blogposts where the value is equal to the input.
Example: You have a Postmeta containing dograces. Now, someone types “Greyhound”. All blogposts where the Postmeta “dograce” is equal to “Greyhound” will be returned.

Like: Find all blogposts where the value is like the input.
Example: You have a Postmeta containing some sort of text, for example ingridients. The Postmeta “ingridients” contains for example “sugar,milk,rice”. If someone searches now for milk, this blogpost will be returned.

Bigger Then: You have a numeric value like the above example with the persons. All blogposts will be returned, which have a bigger value than the one inserted.

Smaller Then: You have a numeric value like the above example with the persons. All blogposts will be returned, which have a smaller value than the one inserted.

Equal or Bigger/Smaller than: All blogposts will be returned which have a bigger/smaller value or where the value is equal to the one entered.

4. Checkbox/ 5. Radiobox

Basically you configure these elements like you configure the selectbox. But the output will be a bit different. In case of the Checkboxes, the output will be checkboxes. This means also, that someone can select more than just one option. In the case of the radiobox, the output will be radioboxes.

6. Range

Configure the Rangefield

Configure the Rangefield

You want to provide the possibility, to search in between a range? This is what you need. The Range-element will output a range slider, where people can search for all blogposts in between a numeric range. What’s that? For example: Output all products, which cost more than 10 but less then 20 $.

To define such a range slider, you have to define the maximum value, the slider can have as well as the minimum value. You can also define a unit like “$”, “£”, “persons” or “year”. And you can define wether this unit should be placed in front of the number or in its back. So for example. In the UK you write prices like “£ 10.99”, while you write “10.99 €” in Germany.

7. Map search

Configure the Area search

Configure the Area search

Lets take for example our city database, which we set up to demonstrate the possibilities of our Plugin. You just want to get cities from a specific area? This element outputs a Google Map where the visitor can define a rectangle. Only cities, which are located in this area will be returned. So, first you have to define, which Postmeta contains your Latitude and which Postmeta contains your Longitude. These have to be different Postmeta-Keys! After this, you have to configure the map itself. You have to define at which Latitude and Longitude the Map centers in the first place and you have to define the zoom level. Choose a number from 1 – 18, while 1 is a very big scope and 18 is a very small scope. You also have to define the Map Style: Do you want Satellite, Roadmap, Hybrid or a Terrain-View? In the last step, you have to enter your Google Map API Key. This article explains, how you get your own Google Map API Key.

8. Order by

Configure OrderBy

Configure OrderBy

With this element, you give your visitors the possibility, to order the search results by given Postmeta values. Depending on how many Postmetas you have selected, you may see quite a list. Uncheck the Postmetas, you don’t want to have as an orderby-option. Each Postmeta has two options: “Order by [Postmeta] ascending” and “Order by [Postmeta] descending”. You can also just disable the ascending or the descending option. The Inputfield on the right enables you, to rename these options.

After the search plugin setup!

So, after you have chosen the form elements, you want to have in your detail search form, you click “Next step”. On the next page, you will find a shortcode. Create a new page and copy this shortcode into the editor and publish the page. Now: Open the page and you will see the form you have created. Congratulations! Your blog can now be searched in a much better way than before!

© 2014, websupporter | Credits

This is a demo store for testing purposes — no orders shall be fulfilled.