Content Grids and Faceted Search with WP Grid Builder

we're all used to seeing content displayed in grids all the page builders including gutenberg come with some basic way to display content listings these are not all created equal some only allow you to display post content while others are flexible enough to also use with custom post types some let you modify the query to include or exclude items based on taxonomy less frequently you can use them with custom fields only a few of them however provide front-end filters for fast searching these filters sometimes called facets are a huge convenience when the user needs to narrow down the options hi this is david mccann for webtng and in this video i'm going to look at wp grid builder which is one of the few plugins that provides all these features and goes beyond the basics wp grid builder is a premium plugin there is no free version available in the wordpress plugin directory it has built-in support for gutenberg it also has built-in support for woocommerce and easy digital downloads it works with the search wp and revelanci search tools and it natively supports advanced custom fields it also works with polylaying and wpml in addition to the built-in support there are additional integrations provided through add-ons there's an oxygen and an elementor add-on for these page builders there's a learn dash add-on which provides blocks for displaying course information there's a maps add-on for displaying markers and facet filters and there's a caching component if you're not using one of these builders that has direct integration then you could also use short codes that the wp builder plugin provides for displaying grids and facets the shortcode method also lets you use grids and facets with regular wordpress archives assuming the theme uses the standard wordpress queries wp grid builder is offered an annual subscription packages for 1-3 and unlimited sites with a renewal discount there's an occasional sale and a couple of times they've offered a lifetime package but these are only available for a short time i have here a testing site using the free cadence theme and i've loaded it up with a bunch of posts that have different categories i also have a custom post type called books the book's custom post type has a custom taxonomy genres and it has three custom fields author's name author's photo and a link to the author's website you can see that i have wp grid builder installed already and when you install it you get a new admin area that has a number of screens on the dashboard you have a place where you enter your license where you can export content where you can import content and then some system information which might be useful for troubleshooting then there are several screens one for all grids this is where you can see the grids you created or create a new one all cards the same you can see the cards you've created or add a new one and the card is basically your layout for an item in the grid then there's an all facets screen where you can see the facets you've created or create one there's an add-on screen where you can install an add-on directly within wordpress you don't have to go and download it and then there's a settings area and the settings has four tabs the general settings you can delete all the data on uninstall you can add post format support display post options display term options there's the option to render blocks in the gutenberg editor there's some facet and index options and some asset and cache options and one of the things about these settings as you notice this little information icon next to each one if you click on it then you get a tool tip that tells you what it's about here's where you can set your default color schemes on the settings media screen you can set the image sizes for your site and some themes add image sizes but here's a place for convenience where you can create your own image sizes in case you need to use particular image sizes with your grid and when you create ones here they apply to all the images you upload from that point on so there's a note here that if you need to use images that were already uploaded then you might have to use a plugin like regenerate thumbnails so wp grid builder comes with its own lightbox option but it also allows you to use one of these other plugins if you prefer that so those are the settings let's get started i believe that when you create your grid you're going to need to have a card created already and your facet to go with a grid so i think the order of operation is first review your settings then create cards then create facets and then create your grid so i'm going to start with cards and let's see what creating a card from scratch looks like when you create a card you go into an editor and it looks pretty sophisticated on the left side you can give it a name you can choose a card for use in masonry or one to use in metro justified grids you can align the card vertically or horizontally and you can position the content top bottom or both or left or right if it's horizontal you can enable or disable different card layers so here we have the media layer the media overlay and the card footer and then you can set the width of the card and turn on responsive fonts then there's another tab for blocks and these are the elements that you can use on your cards so you see that there's basic post fields user fields taxonomy fields button and icon blocks and then custom fields or raw content custom fields will allow you to insert advanced custom fields up here you have a drop down that lets you pick the section of the card you want to work with and here's some place where you can switch modes if you want to preview your card or have it in edit mode then when you hover over the card there's a settings area here if you want to set up a link for the card as a whole for the appearance of the card and for animations and then over here if you hover to the right there's a contacts menu for editing the layer or editing these drop areas when i first tried to create a card the first thing i looked for in this list was for the featured image because i wanted to add the featured image and it took a while for me to realize that this blue area is the featured image and so what these drop areas are doing here are giving you options to put the fields onto an overlay of the featured image so anyway that's kind of how that works so this is the image this is the body area and this is the footer so i'm going to try to drag and drop a block and you notice that doesn't work so even though it says drop area the only thing you can do is click to add and it adds it at the top if i go here and choose body it's not possible to add it there so the way you do these they get added to the top and then you have to move them down and when you click on one of the fields or blocks you get a settings pop up and notice at the bottom you can trash it you can duplicate it or move it up or down so i'm going to delete the extra one and then i guess move this one down you can add a custom class you can set the tag you can change the field source and you can change what the field is you can set an action so you can redirect to the single page for instance or you can open it in the light box this is where you set the display options your style options for the regular state or the hover state and then here are your animation options so let's see i have post title next i guess i'd like the author avatar and post author and the publication date and so it just adds them like this so i guess i have to move them down now ideally i'd like these to be all on one line and i noticed at the bottom here there's a snap to grid option which you know displays a grid here so i'm going to try dragging this up and putting it in the grid but i can't really do that here i was thinking maybe i could do that so when i look at these i wonder do i need to make a div and then float these in the div somehow i did check the youtube channel and the documentation there's not really a step by step on how to do this there's documentation but it's not step by step so i guess next i want an excerpt and a read more button [Music] light box and play button social share or icon would that be this so it's not that one because this has an action already applied to it let's try previewing it and it doesn't add a read more by default so i see a raw content here where you can add html maybe that's what you need to do oh that added a read more okay so you get the idea how you do this and let's preview it so uh it'd be nice to have a guide for this at this point i want to go and take a look at the demos and kind of see how those are put together before going to look at a demo just wanted to point out there is this css tab the third tab is a css tab where you can add your own style custom style for the block so i'm not going to save my changes i'm going to go back to all cards when you click one it just selects it i guess for import you don't really have a preview and i did look on the website to see if there's a preview of what these look like there and didn't see that so i think what i'm going to do is import them all and let's try that so that was pretty quick oh so when you hover over some of them you get some hover animations so that's nice and let's look for kind of a traditional type of card this one looks pretty traditional amber so i'm going to use that one you can start as a favorite export it trash it duplicate it or edit it so i think i'll duplicate this one amber two okay here it is so now let's go in and edit and i'll rename this and i'm happy with this masonry happy with vertical this all looks fine to me so one of the questions i had was how did they get these to line up kind of reverse engineering these blocks because these are two blocks that are lined up so let's see so they made it position relative in line block okay so that's how they did that so i know or you know for the future and let's look at that again oh it does it shows see where there are dots those are ones that have been adjusted so that's nice you can kind of see where changes have been made already all right well this is good for me so i'm just going to save this and it shows us down here it's been saved let's go back to the all cards there it is okay so i think the next thing we need to do is create a facet here are some demo facets i'm going to do the same thing again and import them all and then i guess i'll duplicate this one and rename it go in and edit this will be i'm gonna filter by category and give it a slug and the title this is optional displayed above the facet okay and then these are read only this is gonna be the generated css class and the generate shortcode okay save changes go to behavior so these are the different actions you can use a filter a loading action a sorting action and apply action or a reset action and then it comes with these filter types let's see one two three four five six seven eight nine ten thirteen filter types so that's pretty good and i think what i want is a drop down okay so when you choose your filter type or probably your action you get different options down here so that's exactly what i want taxonomy categories it's not hierarchical i don't want to exclude any and i'm thinking that it's going to include them all by default and i don't want to show children i don't want to show empty choices but i the count sounds good and then i want to order them by the name and the drop down the placeholder will be select okay so i want to save now i think we're ready for the grid so they have a blog demo a portfolio demo and e-commerce which i guess would be for woocommerce maybe or easy digital downloads i'm going to import them again seems to be a big time saver i'll duplicate the blog demo and edit that and i'll call it my post grid these are read only again error messages look good so i guess we just go through this as kind of a list so i'm gonna do posts we have the option for taxonomy or users number per page offset by order by post date i guess that's okay here's where you choose the post type and published filter by authors and include or exclude and then yep i want any taxonomy terms i'm not going to use custom fields on this one so i'll save that then media formats so if no post formats are selected only images will be displayed that's what i want i think there's an option for the first media content mine have ideally a featured image but here we can add a default if one of the posts doesn't have a featured image so i'll choose an image as a default it's nice you can override the image ratio and here you can set the thumbnail sizes so that looks good layout yeah i want to go with masonry but you can choose metro or justified horizontal fit into rows equal height columns and then here's your responsive option three columns on desktop two on tablet one on mobile so that looks good so you could set it up as a carousel or slider grid builder okay so it says here we can use the gutenberg blocks or shortcode or widgets to add these and so i think this is mainly for if you want to use short codes here's my filter by category facet and then the demo ones so anything i'm not sure about here is if i need to add pagination down here and maybe the facet on top i can come back here if need me but i want to i think i'm going to skip this for now try to use the blocks default card card for post grid yep okay all right so those are my defaults and this is kind of cool you could have a different card for different post formats so you could have one for quote different card for an image for a video that's i think really cool because you have different type of content so that would make sense and then you can set some colors here also okay so let's save that animations looks fine loading it's got a clock i guess that's okay and then customization you can enter custom css or javascript all right i like those fine let's see what the preview looks like okay that's good so now let's go and add a new page here there are two new blocks there's a facet block and a grid block so i guess i want the category filter at the top select a facet filter by category facet select the grid my post grid and then let's add the grid and my post grid so publish that let's go view the page awesome let's see if this works so there are four personal ones yep so that works let's check that the pagination works oh okay so let's fix that and let's try going back to the grid builder here let's add pagination here and set it centered and now let's go view that page and here's the pagination okay so that was pretty easy i remember there was that setting to render the blocks in gutenberg let's try that out before we move on i'm just curious to see if that works ah so that's nice so it shows the blocks in gutenberg so the next thing i want to do is to go and test out elementor if you remember we have elementor installed so let's try out that integration and we'll install the elementor add-on and now let's create a new page for an elementor test we'll edit it with elementor and here we have two widgets so we have facet and grid see if it works the same way filter by category my post grid and now let's add the other one and we'll select my post grid and let's update and let's go take a look so this worked the same way so that's nice that's easy so there's one other thing i wanted to do is to see if we can make a faceted grid for books there are a couple things about the books that'll be different one is that we have a custom taxonomy genres the other is that the featured images are the portrait orientation instead of kind of the standard landscape and then the third thing is that we have author's name and i'm wondering if we can create a facet to search by or filter by author let's try this out first thing i'm going to do is go back to cards and what we saw is that you know when you start with an example it's pretty fast so i'm going to duplicate this one let's edit it and let's name it card for book grid and so this will look funny because it's portrait you'd have like a really huge image here so let's try making it horizontal and switching the image to be on the left and the content on the right and we can adjust the media width here so let's take it down to be something like 25 more or less which would be kind of about what the book cover image looks like so card sizing a thousand pixels so it's going to be pretty wide i think only one per row let's save that let's go to our facets do the same thing again let's duplicate and edit and we'll do filter by genre and this will be have a class slug of genre filter whoops and a label a filter by genre okay save that and then under behavior filter drop down is good and taxonomy is good but now we want genres so that's an easy switch everything else looks good let's save that so we have our facet get the idea when you're working from a demo or from a pre-existing one duplicating a pre-existing one this goes really fast i wanted to add a facet for author to filter by author so let's duplicate this one and edit it and this will be filter by author filter by author label save that and now in behavior drop down is fine i don't want to do taxonomy i want to do a custom field yeah it's a post field author author's name okay looks good let's save that same thing let's duplicate this let's edit it so i'll rename this one to be my book grid okay save that content query so it's not posts it's going to be books so that's good so that looks like everything there i don't think i need to change that masonry is fine uh but there are a thousand pixels across so i think i want to bring this down to one column for all sizes save that don't want carousel and now i think that's okay we want the card for books that looks good animated loading customization so we don't need any of those all right let's go back and add a new page i think we're ready so let's add a column and on this side we'll add the genre facet and on this side we'll add the author facet and then let's add the grid nice let's publish this and go view the page okay so that's all good let's see there's only one historical fiction yep and john grisham has three books so that all works looks good let's go back and make sure we have pagination at the bottom yep all right so simple simon looks good it's flexible for use with custom post types with different types of media i'm really liking this let's see one other thing i can show you here is if we go back to the product website let's take a quick look at the documentation they're getting started guides faqs so two things here one is they have some php functions filters and actions and they have some javascript events and methods so these are good for programmers and then if we look at the guides they have a guide for creating a grid a card a facet for filtering for the rest api for using short codes and blocks some of these though i think are pretty basic steps but the one for creating a card like i said i kind of looked at this and it does have some good information but there isn't really [Music] a step by step here so i think it would be nice if there were a video or something showing you how to create a card and the different options on that but anyway there is documentation and they also have a programmers api that's what i wanted to show you from their website okay now for discussion and conclusions let's start with the cons i saw two in working with this the first was it took a while to figure out the process and there are a lot of steps and settings and i guess that's the nature of power tools and this is definitely a power tool some walk through videos or step by step tutorials on some of the more difficult areas like card building would help people get up to speed quicker and the second con was you know there was no way to preview the demo cards and i think maybe having a section on their website where you could see what the different demos were would make it so you didn't have to import all of them to find one that you wanted to use so the wp grid builder is not really a plugin for new users and it's going to require some work and patience in terms of the pros wp grid builder i thought was very attractive the building screens are attractive and the output is attractive plug-in is very flexible it has gutenberg elementor and oxygen builder supported out of the box although i didn't show it you can add custom fields to the cards and as i did show you can use custom fields for front end filters true there are a lot of steps and options in the grid builder but you also have a lot of control the documentation talks about three types of layout masonry metro and justified however there's also that fourth layout option which is you can set up your cards to work in a carousel it was clear to me that starting with the demos is a huge time saver if you intend to build your own cards from scratch then i recommend you start by reverse engineering some of the demos as you saw when i created the grid and facet for books once you have something to start from and have a sense of the steps the process you need to go through then you can move through it really quickly i was impressed by the level of detail for example the ability to apply different cards to different types of content like audio image video into different post formats this together with a good number of facet types 13 means that you can work with a lot of different types of content such as blog content directory listings woocommerce etc there are a number of options in wordpress for creating a grid or listing of multiple records there are some that work with custom post types it's pretty rare though to find ones where you can incorporate custom fields and they're only a few that offer front-end filters or facets i think it's clear from this walkthrough that the pros really outweigh the cons and the wp grid builder is a good option that ticks all of the boxes so if you don't already have a good attractive powerful and flexible grid and facet solution then wp grid builder is going to be worth taking a look at so that's my walkthrough and review of wp grid builder there's a text version of this video available on the web tng website along with other walkthroughs reviews and resources i hope you found this video useful thank you for watching

Channel: David McCan

Views: 3,795

Keywords: wp grid builder, wpgridbuilder, gridbuilderwp, wordpress tutiorial, elementor facets, gutenberg facets, advanced custom fields facets, frontend filters, front-end filters, post grids, wp grid builder tutorial, filter by acf field

Id: JZ3EMIn8pvU

Length: 30min 37sec (1837 seconds)

Published: Sun Mar 14 2021