Building a Layout

After having created a Search & Filter query and at least one field, you’re now ready to combine them into a search form and results. For this example, we’ll gonna be using a WordPress page, but it is possible to add a search form to any place in your site that you can edit and add a shortcode or a block to.

Note: Search & Filter Pro integrates with Elementor, Beaver Builder, and more plugins that can further expand the places where you can add and create search forms and results. You can find out more about the supported integrations here.

In order to create a search form with your results, there are three main methods you can use to add a query and the fields you’ve created:

• By using Blocks
• By using Shortcodes
• Via an Integration

We’ll focus on the first two options for this article.

Blocks

1. Log into your WordPress admin dashboard.
2. Click on the Pages > Add New Page.
3. You can choose one of the supported patterns for newer WordPress versions or click on the X button on the upper left corner of the pop-up if you want to design the entire page manually.
4. Then, you can either click on the + button in the upper left corner or type / and the name of the block you’re trying to add in order to proceed. For this example, we’re gonna start by adding a Query Loop block.
5. Like step 3, you can choose a pattern or design your own manually. For our article, we’ll use a template to proceed. This block will be used to output the results of the search your users will make.
6. After adding the Query Loop block, you’ll need to select it again and then make some changes on the Block side menu on the right side. More specifically, you’ll need to change the Search & Filter Query setting so that it uses the query we just created.
   
   For this example, we’re gonna use the query titled My first query as shown in the example below:
   
   
   
   Note: If you’re having trouble clicking on the Query Loop block, you can find a list of all the added blocks of your page by clicking on the three horizontal lines icon on the upper left page as highlighted above. Then, you’ll need to click on the parent block, as shown in the screenshot above, before you can find the Search & Filter Query.
7. After this step is done, it’s time to add your fields. Since we’ve already created Reusable Fields, we’ll need to use the relevant block so that all our changes persist on this page, too. Click on the + icon on the upper left corner of the page.
8. Then find and add the Reusable Field block.
9. On the right-side menu, you’ll notice a dropdown menu titled Find Reusable Field. Click on that and choose the field you want to add. For this example, we’ll use the field we created in the previous step of this guide.
   
   
10. After you select the field you want to add, there are a couple of ways to move it around the page. You can:
    1. Click on the three horizontal lines (like step 6) and drag and drop the element anywhere you’d like in the layout.
    2. Click on the block and then on the arrow up (or down) as highlighted below:
       
11. Don’t forget to click on the Save button on the upper right corner to save your changes.

And you’re done! You have created your first search form using Search & Filter.

Shortcodes

1. Log into your WordPress admin dashboard.
2. Click on the Pages > Add New Page.
3. You can choose one of the supported patterns for newer WordPress versions or click on the X button on the upper left corner of the pop-up if you want to design the entire page manually.
4. Then, you can either click on the + button in the upper left corner or type / and the name of the block you’re trying to add in order to proceed. For this example, we’re gonna start by adding a Shortcode block.
   
   Note: For this example, we’re using a theme that supports Blocks. However, if your theme doesn’t support that feature, you can add a Shortcode using the method that your theme supports.
   
   
5. Now, click on the Save draft button on the upper right corner of the page and then return to your site’s WordPress admin dashboard.
6. Since we already created a query in a previous step of our guide, you can just go to the Search & Filter > Queries page and click on the Edit button.
   
   
7. In the Location tab, you’ll find the Results Shortcode field. Click on the Copy button.
   
   
8. Then, return to the page you were editing and add the shortcode inside the block:
   
   
9. Now, you’ll need to repeat steps 3 to 5 to add a second shortcode block and then click on the Save draft button again.
10. Return to your site’s WordPress admin dashboard and navigate to the Search & Filter > Fields page.
11. There, click on the three dots as highlighted on the screenshot below and then on the Copy Shortcode button.
    
    
12. Once more, return to the page you’re creating and add the shortcode in the second Shortcode block as shown below:
    
13. Click on the Publish button in the upper-right corner if you’re ready to publish the page, or click on the Save draft button if you’d like to continue working on it.

Well done! You’ve created your first Search & Filter search form using shortcodes.

Keep in mind that when using shortcodes, each field will use its own shortcode field or block. Click here to continue reading about queries, fields, and more.