Brizy WordPress 101

Lesson 18

Intro to Dynamic Elements

In this lesson, we’re going to take a look at how to get started, working with dynamic content in Brizy Pro, so the first thing we’re going to do is create our first post. Now a post is what we’re going to use to fill out the actual templates themselves. This is just a great way of being able to see how all these things link together. Things like the title, the content, the featured image and so on. So, let’s just create a very quick post, we’ll give this a title: we’ll drop in a little bit of content and we’ll go ahead and add a featured image.

Okay, cool once you’ve done that. We’ve now set everything up. We need, let’s publish this post and let’s take a look at how we can actually create the template and include our dynamic content. Okay, so now, let’s create the design, that’s going to use the dynamic content from our posts. Okay, so let’s start from scratch, so we’re going to create our own section and the first thing we’re going to do is pop in the featured image and the title right at the top a great way of drawing attention to exactly what the article is all about.

So we’re going to do is we’re going to click on the plus and that’ll open up all our elements. On the left hand, side now, you’ll notice that we get these additional new elements such as featured image, title content, posts and so on. These are unique elements when working with dynamic content inside templates, so we can use these elements to very quickly and easily build up our page using dynamic information. So, for example, let’s just pull the title in to start off with we’ll drag the element over and you see there’s our sample post for Brizy Pro what we just created next up. If you want to include the featured image, we can do exactly the same thing.

We’ll just drag the featured image over drop that in place, and now our featured image and our title are all set up now we can go ahead and start to style. These configure them any way that you want to at the moment. Everything just looks a little bit too big. So, let’s just tweak that we’ll come into our section in the top right hand, corner open up the options and inside there we’ll open up the cog, and now we can adjust the height the width, those kinds of things. So let’s say we want to set this to something like 80 percent we’ll set that inside there.

That looks a little better, quite like look at that. We’ll select our image and we can make any adjustments to the image if we want to so again, we can come into the cog icon and we can adjust the height inside here. So we’ll just adjust this and we’ll just make it a little bit smaller. Maybe something like 60, that looks much better, so it’s not so overpowering okay. So that’s the image and the title pulled in.

We can go ahead and repeat this process now for any of the additional pieces of information using these elements. So, let’s pull the content in and drop that underneath and there’s our content and finally we’re going to come down and we’re going to say we’re going to pop in some navigation to allow us easily go through all the different posts we have. And finally, let’s go and use the post widget to give the ability to easily go and choose kind of related posts, so once that’s loaded in we can now make changes to that. So we have lots of control over the various different elements inside here. So, let’s just choose one of these elements.

Select this now we can make changes, this position, settings and so on background, colors, all those kinds of things or we can make it to the entire element itself. We can come in and we can adjust things inside you. So we can see, we’ve got posts, we can adjust the number of posts and so on the filter, which is where we can go ahead and set this up to show exactly what we want. So you can see, we’ve got source is posts, but you can change this to pages if you’ve got something like WooCommerce installed. You’ll have things like products and so on.

We’ll leave this set to posts for now on and if you want you’ve got navigation inside here. As well so you could add pagination and tags those kinds of things in the cool thing is this: isn’t the only way in which we can create dynamic links and dynamic content? We can do lots of other pretty cool things too. So, let’s take a look at another method, this time we’re going to go ahead and we’re just going to add a text field underneath our image and before our content, we’re going to use this to kind of drop in some meta information about the author and so on. So what we can do now is we can just select all this text delete it from there and now we can start typing directly inside here, so we can say written by and now we want to drop the author’s information in to do that. We’re going to simply use the hash symbol, and once we use that you can see that pulls up a context, sensitive set of options inside there now we’ve got things like post title content, excerpt date time so on lots of useful pieces of information.

So we want, in this example the author name, so once we select that you can see that now drops in the little short code for the author’s name. Now, when you preview this or you look at this on the live site, that little placeholder will be replaced by the actual information, so just bear that in mind. So now we can repeat that procedure to add extra fields in so we might want to put the date in same again. We use the hash symbol and now we’re just going to say post date. There we go repeats it with the short code, so we can keep on using these to build up something really unique all in context inside our content, which is really cool.

Now, if you don’t want to use this sort of inline inserting of these short-codes there’s another way in which you can use it, let’s remove what we have by here. Keeping the normal text field open we’re going to click on the typography option and you’ll see that we’ve got this little database icon. If we select that you can see, we now have several of those same fields inside you again: custom text, post, title post, content, post excerpt and so on. So using this method we can simply choose what we want from the list. Again, let’s choose something like the post time, this time, we’ll select that and that will then insert it this time.

The difference is you don’t see the placeholder text, you see the actual results. The downside is, though, we can’t actually click inside you and make changes. This just simply drops in the relevant value, but that’s how you get started with inserting dynamic content into your WordPress pages using