Brizy WordPress 101

Lesson 19

Creating Dynamic Templates

In this lesson, we’re going to take a look at working with templates, alongside dynamic data and some of the tools that Brizy Pro gives us to get creative with our WordPress websites. So let me just quickly give you an example of what I’m talking about now. This is currently an archive page. This is being custom designed in a template using Brizy Pro.

You can see we have a header section telling us which archive we’re in and we’ve also got a selection of posts. We can easily then go ahead and take a look at the posts and then we’ve got a single template. That’s custom built inside Brizy again, so I’m going to show you the tools that I’ve used and just give you an overview of how these features work and how you can start getting creative to start off with. Let’s take a look at accessing the templates to do that, we simply come over to the Brizy menu in your dashboard and open up the template section inside there. You can see I’ve already created two templates, a single post template and a blog archive template.

Let me just show you how some of these work first of all, let’s open up the blog archive, let’s choose to edit this and before we hop into working with Brizy itself. Let’s take a look at the display conditions and how they work. You can see that we’ve got four different options inside your currently now we’ve got four because they’ve got WooCommerce installed, so this gives us the product and the product archive options as well. We’re only going to concentrate on the single in the archive just want to make you aware that they’re in there, when you install WooCommerce, so you can see I’ve set up our first set of display conditions. Well, I don’t want to go into too deep how these display conditions work.

Let me just break down the three components. First of all, you’ve got whether you want to include or exclude the actual set of conditions. So we’re going to leave this to include, but you can choose either. Then you’ve got what condition do you want to check against? In our example we’re using categories, but you could use tags author pages lots of different options inside you and then finally, you’ve got what you want to check against.

So, for example, we’ve got all for everything, but if we wanted to, we could actually drill this down. To a specific category, a child of a category – and this gives us tons of options on how we can filter exactly where this template is going to be used. Okay, so that’s a basic overview: let’s go ahead now and take a look at the template itself and what I’ve used inside there. Let’s edit this with Brizy – and this is our template – you can see it looks pretty much exactly the same on the dashboard as it does on the front end of our site. So what we’re seeing at the moment is the basic overview.

So now what i can do is i can come in and i can show you all the different tools I’ve used before we do, though, let’s just open up the left hand panel and inside there you can see. We’ve got an archive option. Now. This element is specific to working with an archive template if you open up a single post template which we’ll do in a moment, there’ll be different options and I’ll demonstrate that in a moment. So let’s just remove this, so i can show you how this all works.

Let’s go ahead and add the archive element and once that loads in you can see it gives us basically a couple of different posts to work with. So now we can go ahead and start to style this if we want to and also set up a range of different options and parameters. So anything we do in this first option or the second or the third will reflect across all instances. So, for example, let’s just say we choose this image and i want to just customize this a little bit. I want all my images to be in black and white.

We can open the image up, go to the filters and we can simply grab the sliders for our color and we could reduce the opacity completely and you see now all three instances display that effect pretty cool. We could also do things like make things a link, and this is where the dynamic information comes in really handy. Let’s just make sure we’ve got the image selected, one more time, we’ll select the link icon and you can see. We’ve got our little database icon. Let’s just select that and now we can do is we can choose the post URL.

So now what we’ve done is. We’ve basically said these images are clickable links that will take us to the post itself in exactly the same way that the remote button works. Now the same kind of thing goes for styling: let’s choose the button, we’ll select that we’ll change the color. Let’s take this to be more of a blue color and you see all three buttons now update to reflect the changes. So it’s really quick and easy.

We can also go ahead and make changes to the way that this actual element works. So, let’s select the element and you can see. We now get some additional options. Let’s choose this archive, and this now allows us to set the filter, the navigation and the archive layout, columns, rows spacing and so on. So let’s say we wanted to put four inside here.

We can select four in the columns and that will then update and show us four items. If we want to change the number of rows, we can do that and adjust the spacing. If you want to filter this, you can do that. We can apply offsets lots of really useful things. Finally, we’ve got the navigation option and this allows us to set up the pagination.

You can see that’s already inserted underneath. So, if you wanted to, we can adjust the spacing and we can enable and disable pagination. Should you need to and that’s basically the simple overview of how you set up an archive page? Let’s update our changes and let’s take a look at how the single post template works, so we’re back to the template page. So, let’s open up our single post.

Let’s take a look at this again, you can see, we’ve got the conditions and you can see I’ve set this to include all of our posts. But again, we’ve got different options inside here, so we’ve got things like products pages, those kinds of things specific to working with single post templates; okay, let’s open up in Brizy and take a look at the different elements that we’re using so again. This is our template. Using a range of different elements, now speaking of elements, let’s open up the elements panel on the left hand, side and, as I said, you can see now, we’ve got different sets of elements specific to working with a single post template. So things like the featured image.

The title, excerpt content and so on. So that’s exactly what we’ve done here. I’ve simply built this page up by using these various different elements. So, for example, let’s just remove the title from the top we’ll delete that from there. Let’s come back over to our elements and, let’s just grab our title: we’ll drop that into our design, we’ll style this.

The way that we want we’ll set our alignment, we’ll change the color of this and we’ll also change the typography to make this a heading. One simple: as that: we’ve now used dynamic data inside our template to create something truly unique. So you can let your creativity flow as much as you want so by combining various different elements. For example, we’ve got the title and so on, but also I’ve also got a post section underneath which allows me to show related posts. This is just a standard element, we’ve got, you can see, there’s the post element and all I’ve done.

I’ve set up the filter for this? So, let’s select this open it up and you can see we can go to the filter option and all I’ve done is set this to be the source of posts and to include it by category. So this is automatically filtering to show posts that related to the category, we’re looking at currently and that’s a basic introduction to how to get started with working with templates inside Brizy Pro alongside dynamic data elements. So before I wrap this lesson up, there’s one final thing: I want to show you and that’s that we don’t need to do anything when we add new posts. They’ll automatically use the templates that we’ve just created, so let’s go ahead and add a new post.

We’ll give this a name we’ll add some content, we’ll go ahead and set a featured image and finally, we’ll just apply a category, we’ll publish our new post and finally, we’ll just simply preview it there we go. There’s our new post using our custom design. Everything is set up the way we want. If we go back and take a look at our design section, you can see in our archive there’s our new sample post included in there as well.