Create a Field

After you have created your first query (link to the article), it’s time to get started with creating a field. While Search & Filter Queries are the backbone of the filtering and search functionality of our plugin, Fields allow your users to interact with the set options. There are various types of fields, but for this example, we’ll create a 3 fields: a search, choice (filter), and control (submit) field.

The process is very similar for all fields, so we’ll discuss one in detail and then breeze through the rest.

Note: Similar to the Search & Filter Queries, fields have multiple formats that can be used to add them to your site. Check out our in-depth article on fields to learn more.

For this example, we’ll review the Shortcode and Block options. Those are incorporated with WordPress by default and can be utilized without any added integrations.

Create a Search Field

To create a search field:

Log into your WordPress admin dashboard.
Go to the Search & Filter > Fields page.
Click on the Add New button at the top of the page.
The Field Editor will appear. First, you’ll need to make sure to add a name for your field and choose its type. For this example, we’ll use the Search type.
Check that the Enabled switch is on. It will be on by default, however, please note that if this option is turned off, the field will not be available to use on your site:
You’ll notice that there’s a live preview of the field in the middle of the page, and the settings can be found on the right-side menu. Let’s go through the different settings together:
1. Query (Required): this setting creates a connection between this field and the query that you’ll be using to filter your posts. This is one of the most important settings, so make sure to click on the dropdown menu and choose the relevant query.
  
  If no changes are made, our plugin will automatically detect the most recent query you have created.
2. Data Type: this field controls what data type the search should focus on. There are multiple options available, but for the time being, we’ll use the default Post Attributes option. This data type utilizes common posts’ attributes like their title, content, type, and even status.
  
  Not all options can be used in unison, though. We’ll need to specify which one is preferred in the following field.
3. Data Source: this field sets what should be the source of the search. For example, when the data type is set to Post Attributes, the data source has different options available. For this example, we’ll use the default option – which is the Post Title + Content one.
  
  This means that when a user types a keyword to search, the query will search through your posts’ Post Title + Content to output relevant results.
4. URL Name (Pro): this field allows you to edit the URL name for the field. By default, Search & Filter uses the following format by default: yourdomain.com/page/?_s=”search-term”
  
  This setting will change the /?_s term to the one you specify in this field.
  
  Note: this setting only accepts characters a-z, underscores, and/or hyphens.
5. Input Type: here, you can change what is the expected input type for this field. By default, there are two options available, Text and Autocomplete (Pro). For this example, we’ll use the Text option, but you can read more about how to configure the Autocomplete setting here.
6. Placeholder Text: you can specify what the placeholder text of the field should be here. We’ve added a sample phrase here, but you can keep this empty if you don’t want to use placeholder text.
7. Show icon: you can turn this off if you’d like to hide the magnifying glass icon inside the search field. We’ll keep this on for this example.
8. Label: similar to the Placeholder Text field, you can change the text of the label. By default, the text is set to New field. We’ll change it to a different text for this example.
  
  There are some extra options relevant to this field:
  1. Show label: this is on by default but you can turn it off if you don’t want to use a label for your field. We’ll keep this on for this example.
  2. Toggle input visibility: this switch controls whether the search field can be hidden so that only the Label is visible unless a user interacts with it. We’ll keep this off for this example.
    
    Note: This option is only available when the Show label switch is on.
9. Show description: this switch allows you to enter a sub-label for the search field. It’s off by default, but if you turn it on, you can specific a description for the field and it will look like this:
  
  We’ll keep it off for this example.
10. Width: here, you can set what percentage of its container’s width you’d like this field to fill.
  
  Depending on how you’re designing your site’s pages, it’s common for WordPress themes to allow the use of empty elements that can help with the design of a page’s layout. Even if an element isn’t used, the element will try to fill in the space of its container based on this setting.
  
  For now, we’ll keep it to 100% – which is also the default option – but you can find out more about changing the style of a field here.
11. Auto submit: keeping this switch on by default will automatically submit the value of the field every time a user has finished typing. It’s great if you’re looking to create a dynamic search experience, however, keep in mind that the auto submit delay is fairly small and it can cause unwanted keywords to be submitted.
  
  We’ll turn it off for this example as we’re aren’t creating a Live Search form.
12. Auto Submit Delay: this field allows you to adjust the auto submit delay. You’ll need to add the field in milliseconds (i.e. 1 second = 1000 milliseconds).
13. Default Value: this setting allows you to preselect an option in a particular field. This allows you to showcase the query results already filtered with a specific option. You can configure it to:
  – Inherit from current location: this option will allow you to activate switches to automatically inherit the value from the current archive, and/or the current post, page, or custom post type. You can also allow the filter to be initially applied to the query so that the results of the query are filtered based on those options.
  – Custom: you can use this option to add a custom, default value instead.
  
  For this example we will not add a default value and keep the option set to None.
14. Add a class: Lastly, you can add a custom CSS class to this field. This is great if you’re looking to make any custom CSS changes or if you’d like to target that element with a custom script.
  
  We’ll keep this empty by default.
When you’re done making all the needed changes, click on the Save button and you’ve just completed your first search field. Well done!

Control Field

The Control Field is essentially a button that allows your users to complete certain actions to control the rest of the search and/or filter fields. For example, you can create a submit button for users to be able to use to submit their search terms, a reset button to reset all the previous filters, and even a field that your users can use to sort the output of a query.

For this example, we’ll create a submit button. Keep in mind that the first few steps are identical to creating a Search Field. You can review them again below for quick reference:

Log into your WordPress admin dashboard.
Go to the Search & Filter > Fields page.
Click on the Add New button at the top of the page.
The Field Editor will appear. First, you’ll need to make sure to add a name for your field and choose its type. For this example, we’ll use the Search type.
Check that the Enabled switch is on. It will be on by default, however, please note that if this option is turned off, the field will not be available to use on your site:
You’ll notice that there’s a live preview of the field in the middle of the page, and the settings can be found on the right-side menu. Let’s go through the different settings together:
1. Query (Required): this setting creates a connection between this field and the query that you’ll be using to filter your posts. This is one of the most important settings, so make sure to click on the dropdown menu and choose the relevant query.
  
  If no changes are made, our plugin will automatically detect the most recent query you have created.
2. Control Type: this dropdown allows you to set the type of the control field. Currently, we support the types highlighted in the screenshot:
  
  For this example, we’ll choose the Submit option, but you can read more about the available control types and how to use them here.
3. Label: You can change the text of the button here. We’ll use the text Submit for this article.
4. Description: You can switch on the option to showcase a description for the field. We’ll keep this option off for this example.
5. Dimensions: You can set the percentage of the width the field fills. For this example, we’ll use the 100% option.
6. Add a class: In this field, you can add a custom CSS class in your control field.
When you’ve completed all the needed changes, you can click on the Save button to proceed.

Now, we’re ready to add the query and fields we’ve created to a page and complete our search form.

Some notes:

For styling changes, you’ll need to click on the black and white circle icon at the top of the menu:

You can find out more about changing the style of a field here.
After creating a field, there are two ways to add them to the page:
- Use a Reusable field block and choose the field you just created. The block will automatically pick up all the options you set in this guide and ensure it’s properly connected to the needed query.

Use a Shortcode. You can find the shortcode code by navigating to the Search & Filter > Fields and then either clicking on the field you just created and scrolling down to find the Info section or clicking on the three dots on the right side of the field and then on Copy shortcode option as highlighted below:

We’ll go into detail on how to add those to a page in the next guide.

Create a Field

Create a Search Field

Control Field

On This Page

More From This Series

Getting Started