Custom Layouts

Trevor Moderator

#273002

I thought I would open my first ever topic to let you know that something a lot of you have been asking for has arrived – a Custom Layouts plugin from us!!

It is entirely free – no paid ‘Pro’ version
It will get better as we add more features
It works with any theme (but you need to have WordPress 5.6 or higher, and PHP 7.2 or higher)
It works in the Gutenberg editor
It also works as a shortcode on any page
The layout designer is drag and drop – no coding
It comes with pre-made templates that you can import (we will add more)
It works with Search & Filter Pro (but you need v2.5.4 or higher of S&F Pro)
It can be used without S&F Pro

Did I mention it was FREE?

Why did we make it? Read our blog post:

https://codeamp.com/creating-the-custom-layouts-plugin/

How do you use it with Search & Filter (the download link is at the top of that page also):

https://searchandfilter.com/documentation/search-results/custom-layouts/

We are working on the documentation for the actual plugin itself right now, but it is fairly easy to use.

Why not give it a try?

Add New Note to this Reply

Gabriela Krassimirova Velitchkova

#274411

Thanks. Why don’t you do a plugin for search filter custom layout? Ïs quite impossible to understand how to change .css

Add New Note to this Reply

Trevor Moderator

#274505

You are talking about styling the form, yes? This will come in V3 of our Search & Filter plugin (due in a few months).

Add New Note to this Reply

Quagga

#275812

Hi,

Can I assume that this is the bones and flesh of the V3 grid and card editor ?

Then Can I share some request 🙂

• ACF fields : quite obviously, and even better any custom field, of which we could type in the field name (not label)
• Custom HTML field : a field where we could type in custom text ad html
• Shortcodes option for custom html field: run shortcode in html field, I expect it to be a checkbox option and not always “On” for performance optimisation
• CSS class field for each field : add a text field for adding CSS class, separated by space, at each level (grid, card, single card field, etc.). Please avoid us the pain we do face when styling S&Fpro form where we can’t add class to individual search field
• Post type styling : provide the ability, within a grid, to style cards according to the post_type is holds ; for instance card background color change according to post_type
• Post format styling : as above with wp built in post_format feature
• post term styling : as above, card can be styled according to the post terms (not only built in taxonomies please)
• Magic tags : well magic tags, or call it and implement it however you want. The idea is to display field value.s within field such as “css class” and “custom html fields”. Three examples, first, I have a custom html field coud contain “%post.title% is a %post.post_type.label% written by %Author%”, second, card Css field could contain “%post.post_type.name% %post.post_format% %post.category%” so the card css class would be “my_cpt_name video french_movies documentary”, video being the post format and “french_movies documentary” the two category term of the post. this enables advanced card building without over whelming ui for the user and very simple usage (pods.io magic tag are a good example of how far this could go)

Then, there are a couple of “features” we discussed not available out of the box in S&Fpro, but that may be implemented using custom php result template, and this would be great if they are not lost on the way

https://support.searchandfilter.com/forums/topic/diference-between-end-of-infnite-scroll-results-and-no-results-at-all

https://support.searchandfilter.com/forums/topic/hide-result-shortcode-until-user-input-ajax-auto-update/

Finally the children category issue

Cheers

Add New Note to this Reply

Ross Moderator

#275815

Hey Quagga

Thanks a lot for your detailed feedback!

Pretty much everything you’ve added are great suggestions which I would like address at some point, for now some comments on a few of your points:

ACF fields : quite obviously, and even better any custom field, of which we could type in the field name (not label)

This is almost ready for release in the next few days – we will support any single value custom field – and you can format it as string / number / date.

We plan for deep ACF integration at some point, supporting most of the field types.

CSS class field for each field : add a text field for adding CSS class, separated by space, at each level (grid, card, single card field, etc.). Please avoid us the pain we do face when styling S&Fpro form where we can’t add class to individual search field

This is possible right now, check the “advanced panel” for any element and you can add a custom class

Regarding two other things you touched on:
* Changing background/settings based on post status / post type – how do you envisage doing this – via our UI, our if we add classes, this would be implemented by custom CSS?

** Magic tags – this looks cool – will need to have a good look into all this and think of the best approach – I’m not 100% sold on that exact approach, but its a good start – this is something for further down the line.

Thanks again for sharing!

Add New Note to this Reply

Quagga

#275814

not sure why the links do not apear above
link1https://support.searchandfilter.com/forums/topic/infinite-scrohttps://support.searchandfilter.com/forums/topic/infinite-scroll-on-archive-page-or-on-multiple-page/ll-on-archive-page-or-on-multiple-page/
https://support.searchandfilter.com/forums/topic/hide-result-shortcode-until-user-input-ajax-auto-update/
https://support.searchandfilter.com/forums/topic/include-a-category-and-its-child-category/

Add New Note to this Reply

Quagga

#276131

Hi there,

Following up the ideas, what would be really really awesome is to have a slider/caroussel layout style…

a simple implementation would be to display one card at a time and slide between them automatically, there would be basic navigation button/info

more options could be to
select how many card we want to display at once,
have some custom css for the “main” card when more than one are displayed (for instance 3 cards but the one on the middle size is 120% of the others=
select if it side card one by one or 3 by 3 when having 3 cards at a time
having a button to “show more” which would be like navigating betwen page results…

well you got the idea 🙂

Add New Note to this Reply

Trevor Moderator

#276133

Thanks for the feedback. I have passed those ideas on to Ross.

Add New Note to this Reply

Quagga

#276238

Hi again

Ok I’m working on a site with wp 5.7 and could have tried the updat of custom layouts.

Just a stupid question, isn’t there ajax pagination ? and “load more” feature
Using the module as an output for search&filter, it would be sad to loose them !

Add New Note to this Reply

Quagga

#276240

Hi again again

ok, now i may have a “simple” maybe more “mature” and super powerfull feature request :
programmatically set css class for item templates.

if you want to makes thing easy for you and everyone : just add the post “ID”, “post_type”, “terms” as
class without gui to edit it in the template

then each item will be in an html container with all thoses clases, you can prefix it to avoid conflict.

if one want to do advances styling he could just use this class…
this is a killer feature I think.
At the moment I do use custom result for S&F so I can selectively design (the header color) of my cards according to the terms or post type.

if this class would be there in your cards, I would adopt and praise for your module … which is already great in term of query building 🙂
Cheers

Add New Note to this Reply

[Author]

Posts