Bricks Builder Tutorial - Crocoblock JetEngine & JetSmartFilters

now before I start this video off I want to ask you a quick question I want to cover more about bricks Builder specifically looking at Dynamic content various different tools and plugins you can use alongside bricks Builder but I want to put the question out there to you guys what would you like to see me cover now like I say bear in mind I want to cover the dynamic aspect because there are already great creators out there covering a lot of other aspects about working with bricks Builder so let me have some feedback in the comments section below what kinds of tools what kinds of designs what kinds of features you'd like to see me cover in future videos moving forward and I'll do my best to cover as many as possible okay so with that being said what are we going to be looking at in this video well we're going to be using bricks jet engine and Jet smart filters this is a kind of introduction to how you can use these in combination with each other to create something similar to what I've got on screen we've got some filters down the left hand side that allow us to very easily filter the data that we can see in our kind of loop you can see we can stack these on top of each other to create more comprehensive filters we can also come in and do things like use date ranges so for example let's just say we want to go from the first of February and we'll go through to a little bit later in February for example the 10th hit apply filter and now you can see we've only got two posts and if we want to we can come in and apply the post filter for the different categories as well on top of that to filter things down even further so all these work in conjunction with each other very simple to set up but you may not have actually used these tools in conjunction with each other and there's a couple of things we need to take into consideration so I'm going to show you how we can build something similar to this in this video now before we go any further let me just quickly tell you what I've got installed we've got bricks Builder obviously we've got jet smart filters and jet engine installed but other than that everything else is basically just plain old WordPress okay so what we're going to do is we're going to create some basic information inside a layout and then we're going to apply some filters to it so let's come over and create a new page let's call this something like filters demo we'll publish this and we'll edit it with bricks now when it comes to the design side of things I'm going to fly through it relatively quickly because I don't think you need to see me build everything step by step and style it and all those kinds of things pretty sure if you're on Dynamic data you're pretty cool at doing that yourself so we're going to do first of all is go ahead and add our section in and you can see there's our section and our container so everything is really basic at this point now we're going to do is we're going to split this into two different colors one for the filters and one for the actual content itself so we're coming to our container we're going to come back to our elements and we can use either blocks or divs inside sure so for this example we're going to add two blocks in they're nested inside the container you can see they stack on top of each other select our container set this to be horizontal we now have a 50 50 column split come to our first block over into Styles and into layout and we're going to set this to be let's just say 25 percent and then we'll do the block on the right hand side and we'll set that to be 75 so now we've created a pretty standard layer filled on the left content on the right so with that being done the next thing you want to do is to start fleshing out the loop that we're going to use now we're going to be using jet engine options for working with this so first of all we're going to leave the left hand block so we're going to change the name of that we'll just call this filters block and we'll rename the right hand column or the right hand block and we'll name this content block just means that when we're working we can very quickly see exactly what it is we're relating to inside our overall structure just makes Good Housekeeping okay so inside our content block we're going to go back over to our elements we're going to add a div inside here we're going to select that div and we're going to come over to the width and we're going to set this to be 50 percent with that being done with the divs still selected close the layout option down and go back to content and we're going to enable the query Loop option this is going to tell it that we want to create some kind of looping content going to come into our query inside there we're going to change this make sure it's set to posts the post type we're going to set to posts as well we leave everything else as it is except for the Post per page and we're going to set this to be six just so we can see how everything kind of stacks up everything else can be left exactly as it is then we see underneath we've got is filterable now because we've got jet engine installed this is a or jet smart filters I should say this is a new feature that's associated with that if you have bricks without that installed you won't see this feature so we'll enable that and you can see it says query ID we're going to leave all that as it is this is just telling it we want to have some kind of filter applied to this little later we'll do that in a moment okay so what I've done selected we're going to start building out our actual content so we're going to come back over this is what we're going to create we want this image at the top which is a thumbnail the title the author the post date and the actual excerpt of content just so we've got some information on our design let's come back over to our Builder we're going to come back over click on the elements option we're going to scroll through or once you get past all the options that are native to Bricks you'll see we have jet engine and Jet smart filters so we're going to do is we're going to grab this Dynamic image and click to add that inside our div give it a second or so you can see there's our Dynamic image this pulls in the thumbnail image now you'll notice we have a problem all the images stack on top of each other and that's not what we want to do so we're going to come back to our content block and select it we'll come over to the left hand side we're going to set this to be Flex I'm going to set this to be wrap then we're going to set this to be horizontal and now you can see that Stacks things the way that we want them to be stacked now don't worry about this first block this is kind of just pulling in a kind of placeholder text that we don't need to worry about this won't display on the front end when we actually go live so you can kind of ignore that okay so there's the first part let's go back now to where we've got our divs and so on let's click back on our Dynamic image come back over to the plus let's go add a few more of those elements in from jet engine so let's close all these down so we can see what we're working with okay so next I'm going to do is we're going to add in some Dynamic field information so we're going to click to add that in this now we're going to select it I'm going to come over to General and inside there we can now set the source and so on so you can see this is using post term and so on which are the sort of the Native functions inside WordPress itself we click to open that up we've got more options inside you including things like metadata so if you have custom meta fields and so on we can reference it query variables options and so much more we're going to leave that as it is though for the Post term then the object field is what data do you want to pull from that source so click and open that up and you see there's all the native WordPress options things like the title The Post slag post type and so on we're going to use title that's perfectly fine we don't need to worry about anything else underneath now because we're not working with any custom meta Fields we're just using native WordPress functions and if you want to I'll sort of change anything underneath you've got a filter field output and so on we'll come back onto those in a moment what we're going to do though we're going to change this HTML div tag from div and we'll set this to be H3 which is what we want to use for our headings and you see that pulls in the global styling so now we finish with our title what we're going to do is we're going to Simply right click on the dynamic field and we're going to just duplicate it just saves us having to go through a lot of the same process again we'll select that second entry come over to the left hand side we're going to get rid of the object field we're going to just delete that from there and we want to set this to be the author so we'll drop the list down we'll scroll through until we find the user and we're going to grab the display name we'll select that we'll come to our HTML tag and clear that from there and we're going to Simply set this to be a div now we're going to come down to where we've got the options underneath you can see at the moment it pulls in the name which is cool but that doesn't really mean anything what exactly is that gibberish or what exactly does that relate to well we can come down and we can say we want to customize the field output now this opens things up but you can see you've got this little short code inside here which is the sort of percentage mark and S that's telling it what to Output in this case the actual content we want from this particular source and object field but what we can do inside here is we can add in our own custom information so we can just pop in author or call out on the space and now that actually starts to make sense and we can also use HTML so if you want to make this bold we can just set this to be strong close that off before we get the author's name so now you can see the word author is Bold and the actual content afterwards is normal so it gives us a little bit of sense of hierarchy we're going to do the same again we're going to duplicate that Dynamic field select the second one and we're going to Simply come over change this from display name we're going to set this to be the date that it was posted so we'll say date I'm going to come down where it says author and we're just going to change the word inside the strong tags to post it on and now we have our post data now you can see this has a string of numeric information the date and so on and the time and it doesn't really look that nice so what we can do is for this example we can filter the field output select that option and you should get his call back now that probably means nothing if we click to drop down the options you can see we have a ton of formatting options for how we want this information to be displayed we can choose format date for example and you see that that says February 2nd or February 2 2023. so you can see underneath we've got the format this is where we can easily customize that format if it's not the way that we want it and if you want documentation on how these work there's a little link underneath to go and check that out so there we go there's most of the options inserted we're going to do one more thing we're going to just duplicate this Dynamic field one more time what we're going to do is we're going to clear all these options so you're going to turn these off we're going to change the HTML tag we're going to set this to be a p for paragraph and we're going to come up and change this from date and we're going to set this to be the option for excerpt now you may not use an excerpt in all of your kind of your designs so you can automatically generate that by using this option and that will then take the content from the actual post itself and then kind of create its own pseudo excerpt and all we can do is we can customize that so at the moment this is using the default value let's say we want to set this to be 25 words and if you want to change the more string which in other words at the end of those characters what you want to have you can have read more you could have whatever you kind of want so you can see this is relatively simple and straightforward to set these various different options up if I want to reorder anything you can simply drag them around to get them in exactly the right order as you can see I messed things up a little bit there with the post in the content so the next thing you want to do is go ahead and customize the look and feel this to make it look a little bit nicer now like I said I'm not going to bore you by making you watch me do this I'm going to quickly make these changes behind the scene and then we'll take a look at how we can start setting up the filters to interact with our newly customized and created post Loop okay and there we go there's The Styling and everything laid out and set up let's go ahead and take a quick look at this to make sure it looks okay on the front end there we go there's all of our different posts all six on screen at one time so next thing we need to do is go and create a couple of filters open up jet smart filters and we're going to go ahead and add a new filter in so you can see inside here we've got a range of different types of filters that we can pull in relevant to the data we have created and you're going to use various different ones inside your particular website designs and different projects and so on so I'm going to do is first of all we're going to call this the checkbox list and we're going to use this to kind of go and choose the categories so we're just going to say category list doesn't really matter too much what I call this we're going to choose the check box list we can then choose the data source you can see we've got both native functions inside WordPress but also jet engine functions custom fields and so on so for this we're going to choose taxonomies because we're going to reference the different post kind of taxonomies that we have in our standard posts now we've got the taxonomy we want to use you can see we've got categories tags and so on so again we're going to choose categories from here we're going to leave the union option but you could choose Union or intersection and this kind of sets up exactly how you want the various different filters that apply one at a time to kind of Stack Up and work together do you want to show empty terms show only child or current or group terms by parents we'll choose the group terms by parents and you can see if this checkbox is a meta field in other words using jet engine functions you need to enable this we're not using standard WordPress functions we don't need to worry about that and then we're going to leave everything else there as it is except for the filter label and we're going to just say filter posts and we'll just click on update so there's our first filter created we're going to go ahead and add a second one in this time we're going to say filter by date and we're going to use the option for a date range so we can choose this date range option again we can choose the data source we're going to choose the option inside here which is post date so we're going to use post this is going to be a standard post date as part of our normal post type not again like I say metadata or meta information there could be additional fields that you add in using jet engine then you can see we've got the date format we've got month date and year in the UK we don't do it that way we do it day month year so we're going to do DD mm YY and then you've got your from and your two placeholder so we can just simply put from and to inside there but you can set what you want if you're working in a multilingual site you could set things up inside there and you can see we've got the various different date formats underneath if you want to customize those in a slightly different way we click on update we've now created our tool filter so what we need to do is hop back into the page we created we're going to come over into our filters block now which is our left hand block and inside there we're going to come to the elements option and again like we saw earlier on we can scroll through or we can filter these by using whatever we want filter for example and then you see there's all our jet smart filters available and there's an awful lot of filters inside you so the first thing we're going to do is we're going to use that simple check box option so you can see we've got checkbox filters so we're going to click to add that in you can see that's added in it says now please select the filter to show so we'll create those filters we just need to connect the two dots together so under General we're going to click inside there select our filters so we're going to choose category list which is the one we've just created so then this filter forces are used in jet engine or you're using bricks query Loop in this example we're using the bricks query Loop option you can choose then whether you want to use Ajax page reload or mixed in other words how you want to handle when someone selects something we're going to need Ajax because it's a nice inter attractive way that you make a selection for your filters and it updates everything in real time so it's a nice immediate feedback but you can set that to whatever you want I say when do you want to apply it on value change or click and apply button it's up to you if you want to put a reply button in you could do that and if you hop into style as you can see you've got options for setting up the items themselves if you want to adjust how they actually stack up whether rows or columns you want it to have the check status so for example we might want to set the check State just to go red so when someone checks something the text goes red you can easily change then things like the typography the checkbox the group filter all those options are available to you inside you so you can customize this to get it to look exactly how you want again I'm not going to bore you showing you how to customize it you're probably going to be perfectly fine to do this yourself using all the options you used to okay so there's the first filter setup the only thing I do want to do is come into the option and say we want to show the filter label so can people see exactly what they're actually doing inside you next up let's go ahead and add in our second option so again we're going to do a search this time for filter and what we can do is we can use end user options we want the date range filter which is the second one we created we'll click to add that in again same thing again select it come to General choose what you want to use this is going to be filter by date or post date range whichever option you created filter four in this case again bricks query Loop and you'll see that now pulls everything in force and again we can set how we want this to work the colors of various different options to ensure the filter label we do in this example do you want to set the styling up all those options will get inside here so we now created our filters that'll apply to our designs let's go ahead and save this and let's go and test it out so here's our page there's our filters let's try it out so this is now just filtering out for our design news we want to add another one in for news example you can see that now adds additional options in we can get rid of those we can come into our date range and again let's try the same as we did before let's say from the first of February and we'll go through to something like the 16th of February this time and we'll hit apply filter and again you'll see now there's our dates February 7th February 2nd design news nothing inside there industry news there's only one item inside there so the filters are all working as we would expect them to and this is really just scratching the surface of what you can do combining jet engine jet smart filters and Bricks build together but as I said at the top of this video please do let me know in the comment section down below if you'd like to see me create more content on working with bricks Builder alongside other tools to create more Dynamic websites expanding the functionality showing you how to work with these various different Tools in combination let me know in the comment section as always all applicable links are in the description my name is Paul C this is WP tetson until next time take care thank you [Music]

Channel: WPTuts

Views: 4,683

Keywords: WPTuts, crocoblock jetengine, Crocoblock jetmartfilters, crocoblock bricks builder, bricks builder tutorial, bricks builder filters

Id: QoKLhTUB3xQ

Length: 17min 16sec (1036 seconds)

Published: Tue Apr 04 2023