Formatting & Functionality Issues

Anonymous

#183118

Hi there – Apologies in advance for the long list of requests. I was not aware such a deep knowledge of CSS would be required to set it up and afraid I’m not talented enough.

Basically, I’d like set up something similar to your demo (http://demo.designsandcode.com/sfpro-movie-reviews/search/?sort_order=date+desc&_sfm_oscar=0+11) for our ‘past project database’: (https://www.dev.ptfund.org/past-projects-database/).

Here are the issues faced:

1) Search Fields: Can’t figure out how to filter by year (as in demo). How do you display that option? And how do you tag posts by year? Is that a custom taxonomy?

2) Search Field Formatting: I’d like the search form elements to show up horizontally across the top of search results (see for example: https://www.dev.ptfund.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-5.08.33-PM.png). Preferably in a self contained row with a background color (#f7f7f7). I’d also like to change the color of the ‘all items label’ text (#ad1b3f).

3) Search Field Functionality: I’d like a drop-down menu with checkboxes (scrolling) for both Country and Theme search fields. I’d also like to include a search to filter countries at the top of the dropdown, if possible. See for example: https://www.dev.ptfund.org/wp-content/uploads/2018/07/Screen-Shot-2018-07-20-at-5.08.19-PM.png

4) Search Results Formatting: I’d like the search results to show up in the format of my theme’s post list: feature image on the left (1/3) and title, excerpt, and ‘read more’ buttom on the right (2/3). Also a horizontal rule in between posts. See for example: https://www.dev.ptfund.org/news/

I think (I hope!) that’s it. If I can get it all working on this page, I’d also like to do the same for other pages on my site and may have a few more formatting questions.

Kindly let me know what we can do. Happy to provide log-in info if needed.

Trevor

#183142

Hi

I will try to answer the questions in turn:

1. If you want simply to be able to select a year as a filter from a list of years in a dropdown select field, you would need to create a custom field for the posts and enter the year on its own, and then base the form field on that.

2. The documentation (at the end of the page linked to below) covers the basic custom CSS required for this:

https://searchandfilter.com/documentation/getting-started/display-search-form/

I would need to see the live page to be able to advise further.

3. The current version of our plugin does not offer the option to have a dropdown field of checkboxes. The closest you could come is in our plugin settings set the Combobox script to Select2, and then in the form field settings, set the field to a combobox.

4. Is that ptfund site yours? If so, you appear to be using the WPBakery Visual Composer/Page Builder plugin to format the posts. We have an addon for that plugin, but the version you need to use depends on hw recent a copy you have of their plugin, so what version of the WPBakery plugin is it?

Anonymous

#184021

Thanks for your reply. Clarifications & such below in response:

1) I have a taxonomy for years and understand how to put them on the search form as checkboxes, multiselect, etc. but I’d really like a slider-thingy as you have in the movies demo for “Oscars Won”: http://demo.designsandcode.com/sfpro-movie-reviews/. Is that possible?

2) Here’s the page I’d like to have the search form displaying horizontally: https://www.dev.ptfund.org/experts/. I see on the link you sent how to make all search forms horizontal, but I’m using multiple, and would only like it to apply to this one. I tried to play around with the CSS but failed (obviously I’m not well versed!). Got the background how I’d like but would still like to make the ‘all items label text’ red (#ad1b3f) if possible.

As far as the search results, I’d like it to look similar to the format I have displaying the ‘expert profiles’ on the page now. I’m pretty sure I can tweak if you could provide a general framework for this.

3) I like it! Thank you. Follow up: For some of the taxonomies with lots of tags, could I show the top three and then have a “see more” expandable area to display the rest?

4) Yes, it’s my site. We do use the WPBakery plugin — version 5.5.2.

Trevor

#184070

1. A slider has to be based on a custom field with numbers in (which a 4 digit year would be). Taxonomies are always treated as strings, hence they can’t be used for sliders.

2. Replace instances of .searchandfilter with #search-filter-form-14574 to make the CSS form-specific.

3. Only by writing and using some custom CSS. I don’t have a snippet I can show you. You might need a third party coder to help you with that.

4. We have an integration plugin for that plugin.

Anonymous

#184117

1. Ok great – Any instruction as to how to create a custom field with numbers?
2. Perfect, thank you.
3. Understood there’s nothing you can do to help with formatting the search form, but can you provide any assistance with how the results are displayed? Without properly displaying results I can’t really use the plugin… afraid the default looks terribly sloppy with my posts.
4. How do I locate/install this? Don’t see anything on the WP Bakery add-ons page.

Trevor

#184121

#1. If you don’t have a Custom Field plugin, then use the free ACF plugin. Create a group, link it to the Post Type in question, and then create a field (try not to use a name used before). Don’t precede the name with an underscore, and when setting up the field in our form, you will see the field twice, pick the one without the preceding underscore.

#3 If using WPBakery Page Builder, you get to control all that. You place the Post Grid element on the page and then , correctly set up, our form takes control of that.

#4 I need to know which version of Page Builder you will be using, as this matters, then I can (for now) give you a link to download it from).

Anonymous

#184127

OK — will give it a try. The version of Page Builder is 5.5.2.

Trevor

#184134

This is a link to the WPBakery Page Builder Search & Filter addon from Page Builder version 5.5.0 or later:

https://www.dropbox.com/s/ai2w7y8n07jq2nb/search-filter-pro-wpb-pb5.5plus-0.1.0.zip?dl=0

It will NOT work with earlier versions.

The general instructions (other than this new file) are here:

https://support.searchandfilter.com/forums/topic/pagination-not-working-11/#post-105228

Anonymous

#184149

Thanks. I’m getting a 404 error for the link to general instructions. Is there another page?

Trevor

#184151

You mean the last link in my post? I just tried it and it is OK for me?

[Author]

Posts