Unlocking the Power of Dynamic Data in WordPress with Bricks Builder

now when you're building WordPress websit you'll very quickly come to realize that you have to start working with Dynamic data to get anything beyond the basics now if you're thinking what exactly is dynamic data and why should you care let me just quickly give you an example of a page that we are going to create and just reference that Dynamic data so this is the page we're going to create you can see we got this filter across the top we've got our featured image for our posts our title the author the date was posted and excerpt and so on this is all Dynamic data and all dynamic data basically means is that information is being pulled from your database that's the core of Wordpress and being output in a certain way so we're going to be able to pull that data in and build things up using that data that's basically all it is but it opens up so many possibilities so using this example we're going to recreate this and I'm going to take you through the whole process of how where and when you can start to use Dynamic data inside WordPress using bricks Builder now we need to do a few things before we can work with Dynamic data in bricks effectively so first of all come into your dashboard into bricks and into settings from there choose the Builder tab scroll right the way down and you'll see you've got this section called Dynamic data ensure you've got render Dynamic data text on canvas enabled and the same with the show Dynamic data key in drop-down then hit save changes and we've set things up to start off with so now we're going to go into our templates in this example and we're going to create a kind of casual archive template to display our post in the way that we want to now you're not restricted or limited to only working with Dynamic data with archives or templates inside bricks you can use it basically anywhere inside bricks full stop anywhere you can access that bricks editor you can use Dynamic data in a multitude of different places and ways but I want to keep this simple to demonstrate how to get started so what we're going to do is we're going to add a new template we'll call this catch all archive we'll choose the template type and set that to archive in the top right and then we'll click publish we'll choose to edit this with bricks we've got a couple more things we need to do let's come over to the settings section open up the template settings under conditions we're going to add a condition to say where and when we want to use this we're going to choose this to be archive and we're going to set this to be all archives we're also going to the populate content and choose what content we want to display if we don't do this we may not get the content we want we may not get any content at all so what we're going to do is we to choose the content type we'll set this to be archive posts choose the post type to be posts and click apply preview now this becomes more useful when you're actually creating custom post types and things like that but I don't want to go into that if you want to see how to do that alongside bricks Builder check out this video it'll take you through the entire process and get you up to speed in about 30 minutes or so we've now got our blank editor ready to start building so let's add in a section there's our section with our container and what we can do we can start to build things out now there's two ways in which we can approach this there's the simple way which is kind of restrictive or there's a more slightly complicated way but gives you basically total freedom so I'm going to demonstrate the simple way very very quickly and then we'll take a look at some of the limitations but then we're going to move on to doing it the best way to do this we're going to select our container come over to the element section and we're going to search for posts choose the posts element and that now creates a post grid for us or a post Loop so you can see we've got a basic starting point pretty cool now if we come into the layout for example you can change the layout this is currently using grid but we can switch this over to list we switch it over to masonry Metro kind of get the idea let's set this back to grid you can adjust the number of columns we may say they want this H in three you can choose the spacing in between it's all quite cool you come at your image and you can adjust things like in the image ratio aspect ratio and so on come into your fields and you can add additional fields in So at the moment we've only got the image title and the exerpt add another field in we can get rid of what's written inside there and then we can use our Dynamic data lightning bolt now I'll come on to this in a lot more detail as we go through but this allows us to access that Dynamic data so let's click that and from there let's just choose something like the post date change this over to something like P tag and you can see now we have some Dynamic data we you can rearrange this if you want to and adjust where it's positioned and you kind of get the idea this is quite useful but we're still semi-limited we can't choose whether we want to show or hide things based upon various different conditions like someone's logged in or logged out you know it's okay it's an okay starting point I don't want to use this though so let's delete that and let's build this now from scratch to give us maximum control first thing we going to do is we're going to add in a block and this block is what we're going to use to be the IND idual card design so if we jump back into our example what I'm talking about here is this is a card design so we've got the featured image title author date and so on so each one of these is part of the loop and each one of these is basically just a template being repeated over and over again with different data inside it and that's what we're going to create so the block selected let's put the first item in which is going to be our featured image and then I'm going to show you how we can start to create our Loop to have this to Loop through all our posts so with our block selected has come over to our elements and you'll see we've got these archive Elements which are specific because we're working with an archive template we're going to ignore those for now we're going to scroll down we're going to add in a plain old vanilla image we'll select that and there's all the options you used to see in now we can't select an image because if we do that that's just going to Simply open up our standard Media Browser which isn't what we want we want to be able to reference that Dynamic data so you'll notice next to the next area we've got our little dynamic IC data icon we select that you can see this is what we saw in the previous example but we have more control if we scroll through you can see there's an awful lot of dynamic data that we can reference and this is just standard WordPress data there's nothing else inside you don't be overwhelmed by this it's all broken down into logical different sections for this example we're working with the post so we'll just stick inside the post section and we'll choose the featured image now you'll notice that it tells us the dynamic data is empty you may be wondering why exactly is that we've kind of set everything up well the reason is because it doesn't know how to pull the dynamic data in yet we haven't told it this is going to be a loop now a loop just basically means as you'd expect it Loops through all of our posts there's our first post our second post third fourth fifth and so on so this just Loops through showing the same data pulled in from each individual post so the featured image the title and so on so to rectify that we need to create a Loop and it's always easier when you have at least some Dynamic data inside you so this is why we've put the featured IM image in because you can visually see the loop being built out just a little bit easier coming back up to our block because we want this to be the item that's going to Loop we'll select this and we're going to come over to the left hand side under content and choose use Query Loop open this up and now we can use the query Loop now if you want a more detail tutorial on this you can check out this video where I go through in more detail how to use the query Loop so what we're going to do is is we're going to create our first query we'll select the query icon and now we can choose what query type and so on now again don't be overwhelmed by this you only need to fill out the information you need to display the content you don't need to fill all of this out so first of all choose the post type is posts just the standard WordPress posts post type again choose posts from there we're going to order them by published date we'll set them to be ascending and we're going to say we want eight posts per page cool so now we've created our basic Loop now let's say we don't want this to be the publish date in as send in order we want descending let's just change it set it to be descending and boom there you go we've now flipped things around so we're going to leave the query Loop there this is all we need to do so once we've done that we can now come over we'll save this to make sure everything is in place and you'll notice that we now have all the images being displayed down the page it looks terrible but the basic is there so before we put anything else in let's just set up our basic layout then we can make sure that everything looks the way we want and is positioned the way we want so for this we're going to come back to our container and we're going to set this to be display grid and I'm not going to get into too much detail with this we're going to keep this super simple we're going to do 1fr 1fr we now get two columns pretty cool all done we going to come into our gaps and I'm going to use my core framework to adjust the Gap inside you let Set this to medium and we now have our basic grid set up obviously it still looks terrible because the images are all different sizes so easy to fix come into our image and from there what we're going to do is we're going to set the aspect ratio so we're going to set this to be 4x3 now all our images look the same although they look a little bit squished in some places easy to fix change the object fit and we're just going to say cover boom we've Now set things up the way that we want so there's the first part we've created our first lot of dynamic data just for good practice making sure the image is selected we're going to change the HTML tag and set this to be a figure and when we're at it we're also going to come back up to the container going to set this to use the HTML tag of UL for unordered list and we're also then going to come into our Styles and we're going to get rid of the little extra space we've got on the left hand side so we're going to come into our layout and we're going to do is we're going to link all these together and set them to be zero boom there we go job done now come back to our block come into our cont content and we're going to set the HTML tag on this to be Li for list item so semantically this just makes a lot more sense now don't worry too much if you don't know about that I would just say just copy what I've done there that simple Okay so we've got our Basics let's just save this and take a preview and as you can see we've got a loop with our featured image and everything is looking pretty cool okay next thing you want to do is start adding some more data in so we make sure we got our image selected and we're inside our block which is part part of our card design which is inside our Loop so now when we add any new elements in they're going to be looped through so the next thing we want to do is we're going to pop in the post title so we'll just choose the archive option choose post title boom there's our post title and each one of these now has the post title added looks absolutely terrible but that's fine we can just select it set this to be H3 to again to be SE semantically correct and we can come into our styling now normally I would get into working with global classes and so on but I want to keep get this really simple and not bog things down too much so I'm literally just going to just style things on the ID level but just bear in mind this is not the best way to work so let's just come in we'll set our typography set our font size we'll set this to be large there we go and we've got the basics set up so we're going to do the same thing again we'll come back into our elements we'll choose the exerpt option let added the excerpt in let's just change this to be something like 25 characters long so there's our excerpt all sorted out now these are all very simplistic examples because these elements these kind of already created for us so what we're going to do is going to come back in and this time we're going to choose to insert some rich text when we've got that let's get rid of this completely now we want to build up some inline content we want to use a couple of pieces of dynamic data so let's say we want to say when this is posted and who was posted by this is pretty cool this is where you really start to see some of the power that you have when it comes to working with Dynamic data so let's just say posted colon going to come over to a little Dynamic data icon click and wo there's a lot of options inside there so for this example we're going to say post and we're going to say post date and you can see it puts in the little short code that says this is dynamic data and replace it with the relevant information pulled from our database and display that on our screen let's just say we also want to put in who was posted by and this this is where one of the cool things comes about it we can put this inline information and we can build it out in however we want so again we're going do the same thing we're going to click this time we obviously want to make sure we have who it was posted by so we'll come down to the author and we'll say the author name so you can see again it does the exactly the same thing and now if we want to we can style this so we can just set this to be bold and you can see that updates in real time on our page showing us the date that these were posted and who posted them really cool really simple and really easy way to work so again let's just quickly save this and you can see we're now starting to build things out we've created our Loop we've inserted Dynamic data we've used built-in elements with Dynamic data and we created inline Dynamic data using the rich text and any of those little short Cates so this is just what you'd end up doing you'd kind of repeat this same process for all the different elements you want to include in your designs so building Loops in a custom way is very very simple but we can again go way way further first of all though before we do let's just quickly tidy things up so we're going to do is we're going to add a new Block in we'll position that below the image cuz I want the image to kind of be full width and then we're going to put the post title and the other elements inside there and for Good Housekeeping we're going to just call this content block and we're going to rename the main block and we're going to call this post loop block so we're going to select our content block and we're going to do is we're just going to give ourselves a bit of space so now we got some basic styling and some organization in place the next thing I want to do is have the ability to link this through to the actual post it's going to display so how do we do it again we're going to reference that Dynamic data so for this example let's just keep this really simple and logical we're going to choose the image again this is not the best way of doing it but for ease I want to show you before we get into really deep in the weeds of setting up cards to be totally clickable and so on it's beyond what I want to cover so we're just going to focus on the image in this example so we come to the left hand section we're going to come down to the link two open this up and you can see we've got some options so we want this to go to the URL so we're going to say other URL there says select the link type so we're going to say that this has to be dynamic data because we want to pull this Dynamic data from our post listing click the post Dynamic data click our little Dynamic data icon and what we're going to do is we're going to say post URL simple as that but again we're using Dynamic data so now each one of these will Loop through the image and the link will be looped through to the post as well again hope that makes sense so now we've created a much more usable card design we've got everything we need in place now we could very easily leave it at this point and you've seen how to get started with Dynamic data in bricks but there's so much more we can do so let's take a look at some more examples on how we can leverage Dynamic data let's add a filter to filter through these to show only the ones we want to see from the various different sections or categories to do that we're going to come to our section and we're going to add in another container and this container let's position it where we need it this container is going to contain our filter so let's just rename this now at the point in time the filters are an experimental feature inside bricks so you are going to need to enable these if you want to follow along to do that all you need to do is come into bricks and into settings under General scroll down and you'll see we've got query filters experimental check this hit save settings and you'll have these additional elements if you don't see them this is probably the reason why you won't okay so go back into our filter container come back over to our elements and just to a search for filter and you can see this at this point in time has seven different filter options we're going to use the filter radio for this example and you see that drops it it we'll select it we'll choose the target query so again this is using Dynamic data the query in this example is the query Loop of our posts so we just need to take tell it what filter applies to what post Loop so we just connected the two dots and this is why naming things just makes life so easy so choose the select option and there's our post loop block and if you take a look on the structure panel on the right hand side we've got post Loop blog which is our post Loop we'll choose that option and now we can configure this so we do is we say this is going to be on input we don't want to have them to have to click on a submit button the action is going to be the filter the source is going to be the taxonomies then the taxonomy is going to be the category for our posts so if you scroll up you can see that now shows us all of the different categories for our posts now what we can do is we can choose to hide the empty ones you can hide the count if you want to you can set them up a hierarchical and what we're going to do is we're going to change the mode from radio and set this to be button because it just looks a little bit better let's un hiide the empty for now because for some reason it's not showing all the different categories but they are there so now we can configure the button and the button active for this example let's keep it super simple we're going to add a border we'll just do two pixels at the bottom style is going to be solid we'll set this to be like a gray color or a pale color there we go and you can if you want to adjust the typography you do the same for the active button so we're going to do the same thing we're just going to change the Border color and we'll set this to be the sort of peachy color or pinky color and we can also come in choose our pseudo classes and set this to be hover control button and we're going to adjust the Border again on there and we'll set this to be the darker green okay come back at the pseudo class let's just save this and test it out in the front end and you see there's all of our different filters so let's for example we want to take a look at AI there we go there's our AI client updates for example all categories kind of get the idea it's pretty pretty cool and pretty simple so now let's just come back and say hi empty we'll just come into our style and set our position there we go so that's added in the basics for our filtering again pretty cool now final thing I want to cover is let's just say you want you want to show or hide certain things based upon the user role in this example this is where conditional logic alongside Dynamic data comes in really handy so what we're going to do is we're going to come down into our card design and we're going to drop in a new Rich text what we're going to do here is we're going to just post in something it doesn't really matter what it is we're going to keep it super super simple we come into our content we'll remove this from here and we'll just say posted in choose our lightning bolt one more time and from there this time we're going to choose the terms and we're going to come down and say categories postterm category so we can list out what category or categories any of these are posted in so you can see that pulled in our Dynamic data let's just highlight this just make it bold okay so there's the information now what we're going to do is we're going to add some conditional logic to this so making sure we got our element selected our R text they're going to come up to the option for conditions we're going to add a new condition in and you'll notice that when we add a condition if we take a look at the right hand side on our structure panel it shows us the little conditions icon so we can see at a glance any conditions to set our condition again we've got our Dynamic data we can reference so again we've got all the same things inside here for post and so on but what we want is user login so we choose this option then you can choose how you want to check against it so it's is or is not so we're going to say is logged in so only logged in users will see that so what we need to do now is put something in there that if you're logged out you have a message to tell you to log in or register to see it so to do that we're simply going to add in another Rich Text field change the content in here and we'll just put in the message you want to display and all we're going to do now is set conditions add a new condition set this for user login is logged out simple as that so we'll click save let's preview this and because we're logged in you can see we see the post industry media and so on which category is actually posted in now let's open up an incognito window paste the link in and as you can see you need to be registered and logged in to see this information so we've set up conditional Logic on Dynamic data checking against the cookie in this example this is just scratching the surface of what you can achieve by using Dynamic data inside bricks Builder from WordPress now if you want to go even deeper and find out how to work with tools like ACF check out this video next it's a great reference and also check out learn bricks builder.com for all of my bricks tutorials [Music]

Channel: WPTuts

Views: 4,360

Keywords: WPTuts, bricks page builder, bricks builder, wordpress dynamic data, bricks dynamic data, bricks tutorial, bricks builder wordpress, bricks builder tutorial, getting started with bricks builder, bricks wordpress, wordpress tutorials, bricks, wordpress, web design, bricks builder templates, how to use bricks builder, wordpress tutorial, bricks wordpress tutorial, how to build a website, website

Id: UqI-AL8JdSM

Length: 21min 32sec (1292 seconds)

Published: Wed May 22 2024