How do I create frontend searches?

Hi, this is Sandra from Greyd. In this video I’m going to show you the extensive possibilities to build individual form searches with Greyd.Suite.

So let’s start with the Greyd search block. After placing the Greyd search on your page, you will see that there is a search field and a search button by default. But from the plus here, you can see that there is a lot more in terms of filter and sorting options, and we will have a look at that in a moment. Right now let’s start in the parent block where you start to define which post types you’d like to search and how you would like the elements of your search aligned. You can have them next to each other, also a custom layout, which means that you can place them individually and also create more sophisticated layouts, for example with off-canvas popovers where the filters are placed or something like that.

Here you also have some layout options that you can vary by screen size. You have the distance between the elements, the alignment of the elements, and whether or not you want to allow wrapping and several rows in case there is not enough space in the frontend on your screen.

So next is the search field. In the editor itself, you can have the label and also the placeholder text, and you can also choose between your field styles and handle the alignment. Field styles and the like can also be found here in the design settings, where you can also define the size of your field, again individually per breakpoint if you want to. You have some design options for the label in terms of font size and color. So label is this text here, that one could change in color and size, whatever. And of course you can also overwrite the entire field design here. The search button offers you basically the same options as regular Greyd buttons, so including an icon, you can have a search icon here, you have various design options, etc.

Now we have a couple of filter options. So for example you could offer a dropdown to offer filter options in the frontend. It would look like this: I could say okay, in my post type movies I have genre as a taxonomy and I can have the search results filtered by these now. And to do that I can again add an input field. You can have placeholder and label text here and in the settings on the right. And we have to select a post type first. Sorry, always. It won’t work. Well, let’s work with films. Now we can select the filter tab for example. In my case I only have one taxonomy which is Genres. And I can say, do I want the user to be able to select more than one? Show over yes or no? And again the regular styling options.

Another possibility to add filters is filter buttons and chips. Here you have a lot more possibilities to design advanced filters. Again, let’s work with the source. And then you can see there are again the option to enable multi-select. But there are a lot of design options. You can have the filters displayed as radio buttons, as checkboxes, iOS widgets, tabs, chips, or buttons. Different button styles, lots of possibilities. And for each one you have a lot of design options below, so you have detailed options with regards to paddings and margins individually for each side. If you want to, you have different design options for the labels of the filter options, you can define how you want them to be aligned and arranged, with how much space between. You have color options, typography options, spacings, border, border radius, and even shadows. The design options do vary slightly depending on what kind of filter styles you have here. So you see there’s a lot of possibilities with that.

You can also use a date picker in the frontend to have your visitors filter the search results by different dates. The date picker again is an input field. So again you have the label and placeholder and you basically have the design options of input fields. But now we have the date picker itself. So we can have a look in the frontend how it looks like. This is a calendar that you can have different styling options and layout options that you can use to filter posts by date.

So let’s have a look at the options in detail and start with the design options. So we have two regular field options. And then we have the date picker styles. You have a lot of options with regards to text colors, background colors, padding. So we can have a border for the entire date picker. And these are the general stylings that apply here. Then you have these range date pickers. If you activate them, you have a look at that in a moment. But here you will find all the styling options for these range buttons on the left. And there’s also active styles. So how do you want to differ the styling of the date that the user has selected in the frontend?

These are just the design options. Now let’s have a look at the functional options. So first of all we just had a look at these range buttons. You have lots of possibilities to individually define which of these ranges you want to have in your calendar. And you can even change the designations here. For example, if you want to change the way you describe these options or also if you’re using the calendar in different languages. So these are the ranges. Then you can select how you would like to enable the search. What date are you filtering by? You can have the post date. But of course you can also work with dates that are in any meta fields of your post type. So for example, for my movies I could have like the publication date or something like that. And the difference between meta fields and dynamic meta fields is just that. Meta fields are the default meta fields by WordPress that you can add to any post type, and dynamic meta fields are custom fields in your custom post types created with Greyd.Suite’s dynamic post types.

Then you can define in general what you like to have your visitor filter: date ranges or by a single date, both are possible. Where do you want the date picker to open with relation to your input field? At the moment it’s on the left, but you can also have it in the middle or on the right. What should be the format of the date? That will also be displayed in the input field when you select. You can see it here. I’ve already selected a date. And here you can define in which format the date will be shown. The placeholder again. We offer the date picker in German and English. Then you can have week numbers displayed here. So there’s another column here with the weeks. And you can even go further and not only filter by date but also by time. So here you can see now there’s the time frame. And it can work with an am/pm mode or also with 24 hour mode like this, depending on which region you are operating in. And you can also define a minimum date and/or a maximum date to prevent, for example, that users search in time ranges that no post exists. So to make it easier to find the best results.

So you have seen there are a lot of different filter options in the Greyd search, and you can also offer the possibility to sort the results in the frontend. You will see here we have a sorting option. And again it’s a simple input field. Maybe let’s remove all these things here to have a better overview. So here we have our sorting field. Again, it’s an input field with the respective design options. But in terms of the filtering, you have different possibilities to have the results filtered chronologically or alphabetically in both directions. And you can even define how the individual sorting options should look like in the frontend. For example, it’s just published that for a moment so it can have a look at it. And in the frontend here you have two filter options. I should make my field a little bit bigger. But you have chronologically, alphabetically, etc. and how these options are described here in the frontend. This is what you can define here. Again, this is also an easy way to have it multilingual. So basically there is chronologically and alphabetically. If you’ve activated the respective features in the backend, which we will have a look at in a moment, you can also filter by most popular and most relevant.

So as you’ve seen, there are lots and lots of possibilities to create individual frontend searches with Greyd.Suite. But that’s not it already. We will now see what happens if you combine a Greyd search block with our post slider block. That way you can create wonderful live interactive searches like this one. So what usually happens with regular searches? We can see here, we can search for a movie here. And then we click on search. And then we are directed to the search results page, which is basically the search results template page that can be designed and layouted in the site editor. But what you can do with the live search is to make it more interactive, to show the results directly here on the frontend, and all you have to do in order to create such a live search is combining the Greyd Search block with a post slider block.

So let’s have a look at the backend of the page we just saw in the frontend. Here you can see I have a regular query loop here. And in this query loop I have placed my search. Just exactly the same as the one that we just had a look at in detail. This is the post slider here to display the results. And by combining these two within the query loop, I can create these amazing frontend searches that interact live with each other. So in general, if you want to learn more about how these post sliders work in general dependently or independently from the search, then we have a dedicated tutorial on that in our Helpcenter. Also, if you are not working with the live search, but with the regular search that shows you the results on the search results template, there is also a tutorial in our Helpcenter showing you how to design and work with these WordPress templates.

And there is one more thing I want to show you now, which is the advanced search settings that you will find here in the Greyd settings. Because there are some more options you have to know. At first you have live search here again, but this is a live search for a special occasion. Like we’ve seen, you can create live searches easily by just placing the live search together with the query loop and post slider. But this live search here is dedicated for the search results page. So if you want to have a live search here and do not want to combine it with the post slider, but for example also with the regular default search of WordPress, you can have a live search as well simply by activating this feature here.

Then we have the relevance and popularity counts that we had a look at earlier. If you activate these options here, you will be able to offer sorting by relevance or by the most popular posts. How to search is something we didn’t have a look at. That’s what we are going to do now. Let’s go to the backend. In the search field, you will find the option to search suggestions. If you activate this, the user will be given suggestions for search results as soon as he or she starts typing in the frontend. Let’s have a look at it in the frontend. It’s not the most beautiful one, but you can see as soon as I type, I already get suggestions here. And how many suggestions can be defined here. You can define in which order you want to show the suggestions. You can also define the text that is shown while I am typing. There was one moment where it says “loading”. You can define that here. Again, it’s easy to have multilingual since we can individually define the text here. Also the text in case there is no result found. And if you activate this option here, as soon as I click on one of the suggestions, I’m directly referred to the search results page. So this is auto search.

And here is the extended search. Usually by default WordPress only searches the content and title of your posts. But if you’re working with custom post types you may have relevant information also in custom fields. And if you want them to be searched as well, you have to activate this option here. And the same way as you can extend and enlarge the search results here, you can also exclude certain posts or categories, terms, etc. from being searched. You will find an option everywhere in the settings. For example, if you just go to pages you have “exclude this post from search” and then this page will not appear even if it meets the criteria of what is being searched for. And you can do the same for any post category, taxonomy, etc.

So as you’ve seen, lots and lots of possibilities. There’s almost nothing that cannot be done. You can create really interactive and advanced searches in Greyd.Suite without any additional plugin. And there’s even more! Depending on your Greyd.Suite license, you are also able to show search results from completely different websites on your website. So for example, if someone searches for “Dynamic templates” on my Helpcenter website, I can also show search results from the FAQ of the Greyd Corporate website with our global content and site connector features. So if you have the respective Greyd.Suite license, you will find tutorials both on global content and the site connector to learn how you can connect your website in a way to show search results from different sites and even different installations.

For more videos and information, please visit our Helpcenter.