[Resolved] I want to know how to create a search box

[Author]

Posts

[haychP]

Tell us what you are trying to do?

Hi I want to recreate this page : hidden link

3 Major things
1 Dropdown that pulls up my custom post categories.
2 the Results Doesn't cause to Load the page, it instantly pulls up the results.
3 must have the same design as what's on the website.

I also want to recreate its design :

Im using DIVI builder

using your tools , i already made a custom post name directories now i want to place a search bar that pulls up only the categories inside the custom post

here is my demo site : hidden link

Is there any documentation that you are following?: none

Is there a similar example that we can see?

hidden link

What is the link to your site?

hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've removed the website's access details from the message and they should only be included in the dedicated section for the access details so that they're not publically visible.

The type of search that you're planning to recreate is possible through Toolset plugins and here are the steps:

1. For creating a search view, you'll need the Toolset Blocks plugin. You can install and activate it from WP Admin -> Plugins -> Add New -> Commercial

2. Since you're using the Divi builder, you'll also have to enable the classic/legacy views editor from WP Admin -> Toolset -> Settings -> General. For the setting "Editing experience", select the option "Show only the legacy interface for designing with shortcodes".

3. After these steps, you'll be able to create a post view from WP Admin -> Toolset -> Views -> Add New. The documentation on working with the classic/legacy views is available here:
https://toolset.com/documentation/legacy-features/views-plugin/

4. The view will allow you to create the search form and the search results and once it is created, you'll be able to show the search results in one column and the search form in the other column, using the shortcodes, in your Divi builder content.

Shortcode for the view's results:

[wpv-view name="view-name" view_display="layout"]

Shortcode for the view's forms:

[wpv-form-view name="view-name" target_id="self"]

Note: You'll replace "view-name" with the actual name of your view.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[haychP]

HI

Few steps i find confusing

step 1 : how i will i know what's the correct " Commercial " plugin i should download?

See screenshot : hidden link

Step 2 : I can see what you're referring too check screenshot below

Admin -> Toolset -> Settings -> General. For the setting "Editing experience", select the option "Show only the legacy interface for designing with shortcodes".

I cant see "Show only the legacy interface for designing with shortcodes".

hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back.

For step 1, you don't have to type in "commercial", but use the "Commercial" tab that is available, at the top.
( screenshot: hidden link )

The option from step 2 will become available once you've installed and activated the Toolset Blocks plugin from the "Commercial" tab.

[haychP]

Hi thank you for the help,

Right now im folllowing the video tutorials on the courses : https://toolset.com/lesson-placement/lesson-placements-1622879-1808797/

its hard for me to follow through as im using divi on this, you guys did mention this is divi compatabile,

I want to create a template for my posts and just basically follow through the tutorial

Can you give me a link where you guys are using divi to create everything that would really help.

[haychP]

Hi any updates?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update and I see that you've followed steps 1 and 2 from my last reply.

The documentation and video tutorials that you see are for users who are using the default WordPress editor Gutenberg, which uses blocks.

The Divi editor is also supported with Toolset, but, I'm afraid, we don't have video tutorials available for that. The basic guide on using Toolset and Divi together is available at:
https://toolset.com/course-lesson/using-toolset-with-divi/

To make this easier for you, I've created an example view "Test view from TS support":
hidden link

For this view, I've assumed that you need to show the list of conditions from the "Posts" post type. I'll recommend checking how different sections of the view have been set up and let me know if you have any questions.

The individual loop/list item from this view is controlled by a content template "Loop item in Test view from TS support", which is set to be edited by the Divi editor:
hidden link

I've also created a simple page "Test page from TS support" to show the search form and results from this view, in two columns, as explained in my last reply:
hidden link

The page can be viewed at:
hidden link

I hope this example view and the page will make this more clear.

[haychP]

HI thank you for the help

now another thing :

I want it show the ones inside the custom post I created.

The test category and also for the categories dropdown i want it to pull up the categories under the "test categories"

how to do that?

hidden link

The view display i already chose the "test categories "

hidden link

for the taxonomy i already chose the right one too "Directory Categories"

hidden link

also how can i design a template for this? using divi?

thanks!

[haychP]

Hi any update? 🙂

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I'll assume that you're referring to fixing the view named "first view set up".
( ref: hidden link )

Let me explain that, step-by-step:

1. In the "Content Selection" the post type "test directories" is selected to show the post results.
( screenshot: hidden link )

2. In the "Query Filter" section and the "Search and Pagination" section, no filter for the categories is set.
( screenshot: hidden link )

Here are steps for that:

a). Please click the "New filter" button in the "Search and Pagination" section.
( screenshot: hidden link )

b). From the next screen, select the taxonomy that you'd like to use for this search filter.
( screenshot: hidden link )

c). The next screen will allow you to select the type of search field, the default option label, and order settings for the field options.
( screenshot: hidden link )

d). When you'll click the "Insert shortcode" button, the code for the search field will be included in the "Search and Pagination" and the relevant query filter will also be added into the "Query Filter" section.
( screenshot: hidden link )

3. The next step is to configure the "Loop Editor" section.

a). To start, click the "Loop Wizard" button.
( screenshot: hidden link )

b). As you'll be using the Divi editor for the designing the output of the loop items, select the "Unformatted" option for the display.
( screenshot: hidden link )

c). From the next screen, add any field like post title, make sure the use of the content template is enabled, and click "Finish".
( screenshot: hidden link )

As a result, the necessary code for the loop editor will be included and the content template will be attached with the view.
( screenshot: hidden link )

This content template will be used to show each result/post in the view's list.

4. The last part is to design the loop item content template using the Divi builder.

a). As you'd like to use the Divi builder for this template, click the link to stop using the block editor.
( screenshot: hidden link )

b). Next, you'll see that the template will be using the classic editor, but, there will be a button to use the Divi builder too.
( screenshot: hidden link )

c). When you've selected the Divi builder, you'll see the option to edit the template using the Divi builder.
( screenshot: hidden link )

When you'll click the button "Edit using the Divi builder", a new window will open and you can edit the template using the Divi builder just like you edit your content in pages.

At this point, I'll recommend understanding how different sections in the view editor works and try making a couple of test views on your own.

Once the use of view's editor screen is clear, you can move to the part of displaying the views on the desired page. This is already explained in step 4 of my first reply.
( ref: https://toolset.com/forums/topic/i-want-to-know-how-to-create-a-search-box/#post-2262523 )