[Closed] Splitting up parametric search

[Author]

Posts

[stewartE]

I have a view in a grid made up of a custom post type called videos. I want this view to be searchable using the text filter but also by category using checkboxes. I know how to achieve this what I am unsure on is how to split the text and the checkbox search as I want the checkbox search to go into the sidebar of the page and the text search to be at the top (in the standard position).

So far I've just created the standard text search. Not sure how to proceed from there

Thanks!

[Christian Cox]

Hello, I'm not sure there is a simple way to achieve exactly what you're looking for because Views produces its output in this general HTML structure:

- filters parent element
 - - filters and search inputs
- results parent element
 - - results list

Since the filters and results have separate parent elements in the generated markup, it is somewhat difficult to create the layout structure you have created here. It seems like this structure would require that the custom search field is included in the same parent element as the results, which is not easily achieved in the markup structure produced by Views.

To achieve a sidebar column like this in legacy Views, normally you would use the Output Editor panel to create a grid and column-based layout that looks like this:

<div class="container">
  <div class="row">
    <div class="col-3">
      [wpv-filter-meta-html]
    </div>
    <div class="col-9">
      [wpv-layout-meta-html]
    </div>
  </div>
</div>

This is a Bootstrap grid system, and you can see that the columns are achieved by placing the filters shortcode in one parent column and the results in another parent column. But that does not give you the ability to render the custom search input field separately from the other filters - they are all rendered by Views in the same parent element. So there isn't an easy way to display the filters and search input in separate locations like you have described. The system is limited to producing all the filters and search inputs in the same parent element by a shortcode.

[stewartE]

Hi Christian

Thanks for your response. Can I just check are you saying that what I am attempting to do is not possible?

Note I am using legacy views and it doesn't necessarily have to be a sidebar if it works within the view or content template in some way that would be fine too

Thanks!

[Christian Cox]

Thanks for your response. Can I just check are you saying that what I am attempting to do is not possible?
I'm saying I'm not completely certain whether or not it is possible given the Bootstrap grid system at your disposal in Toolset. I think it will require some custom CSS code to get it exactly right. If you plan to make the site responsive for mobile devices, it will be even more challenging as you'll need to write custom CSS rules for different screen dimensions. It might be possible to achieve this layout structure with custom CSS, but I don't have a cut-and-paste solution or reference site available showing an example you can emulate. So depending on your level of comfort writing custom CSS, this level of customization may require a developer resource as it is a bit outside the scope of the support we offer here.

Note I am using legacy views and it doesn't necessarily have to be a sidebar if it works within the view or content template in some way that would be fine too
Okay to clarify, I was using the word "sidebar" to describe the narrower side column in the layout you've shown in screenshots. The narrower side column for the filters and a wider main column for the results. I was not using "sidebar" to refer to a true WordPress sidebar widget. Whether you use a WordPress sidebar widget or not you're going to have some significant layout challenges to overcome here, and I don't have a simple cut-and-paste solution for you in either case.