1
0:00:00
Welcome back to Page Building 101. I am really excited about today’s lesson because it has the power to fundamentally change your workflow for every website you build going forward. And it’s about taking it from inefficiency and disorganization and not being scalable, not being maintainable, over to absolute sanity when it comes to managing content. And that’s exactly what we’re talking about today. Dynamic content management, proper content management so that you can have a more efficient workflow, increased scalability, increased maintainability, all the things that we care about as a professional, it’s all covered in today’s lesson. So let’s go ahead and I’m gonna share my screen and I just wanna say right off the bat, if you’re putting all your content into posts and pages in WordPress, you’re doing it the wrong way. If you are building element by element by element by element, like cards in a grid or lists and things like that, and you’re not querying these items, if you’re manually statically putting them onto the page, you’re doing it wrong. These are the bad practice ways of doing things, and there is a better way and I’m going to show you first by doing it the wrong way and then by doing it the right way so that you can clearly see what the advantages are and how this is going to make your life so much better. And guys, this is a, I have to apologize. I have to apologize because this is one of those things that once you learn it, once your eyes open to this, you’re going to be like every site that I’ve built up to this point, I hate it. I don’t wanna manage it, I don’t wanna touch it, and I’m sorry, it’s just how you’re gonna feel. And you’re gonna wanna go back and try to fix every website that you’ve built before this, and I wanna encourage you not to do that, because that’s not profitable. Just take what you learn in this episode and apply it going forwards. That’s all you have to do. Then you’ll love your life going forwards. Okay, so the common but bad practice approach. That’s what we are going to start with. I’m gonna show you the way that most people handle this. So I want you to get your imagination cap on you. We, we together, we’ve been hired to do a website for a martial arts gym. And they have classes, like different kinds of classes. They have locations. They have team members, instructors, right? So we have to think about organizing all of this content. And again, what most people do is they take all these things, the instructors, the classes, the locations, and they just dump them all into the pages area in WordPress. And this is not leveraging WordPress as a content management system. This is basically like treating WordPress as a junk drawer. Just throw everything in together and it is what it is. And this creates an absolute content management nightmare. And it severely limits what you’re able to do with dynamic data throughout the website, templating, and on and on and on. So I’m gonna show you the bad practice approach. Again, we have our imagination cap on. We know what we’ve been hired to do. I’m gonna do a piece of it right here the wrong way, and then we’re gonna talk about doing it the right way. So, the first thing that I need to do is the most straightforward, simple thing of they have different kinds of classes, we need to represent those classes visually on the website using cards. I don’t really know what I want my cards to look like, I have a general idea, but I’m going to build them the kind of the wrong way right here now I’m going to add a container to get started. This is going to be our grid I’m going to call this my classes grid because these are the classes that are offered at this martial arts gym And then I’m going to put a block Inside of here and this block is going to be my class card So this is for one single class right I have my classes grid, and I have my class card. I’m going to go ahead and put a class card class on that card right there. And then right now it’s 100% wide. I’m just going to go ahead and put a grid structure on my grid so that we can see what the actual card size is going to be. And I’m going to do this by creating a three column grid. So I’m going to say repeat three min max zero one FR, and now you see that this is only taking up one third of the grid. We’ve already done all of this in previous lessons, but I love to reiterate what you have already learned. So you can see it again and again and again and again. I also want to put a grid gap variable in here so that I can gap out the cards when I add more of them, so they’re not all touching together. Okay, now I know that for this grid right here and the idea of making sure that you see concepts over and over and over again. In the previous lesson we talked about images and one thing I showed is how to take real images which have contextual value and make them appear as background images. And we get a lot of advantages in doing it that way versus using a CSS background image which doesn’t actually exist in the DOM. If you haven’t watched the previous lesson on images, absolutely go back and watch that because all of this that you’re about to see is going to make total sense, okay? All right, so I know that I need an image for my card, a real image. So I’m going to pop in an image element. I’m gonna select an image from here. These are all images that, they’re just stock images. I pre-optimized them, I uploaded them. And I did wanna take this second to say I did forget I made a little bit of a Lapse in my content in the last episode. I forgot to talk about naming your images, okay It’s something that should be fairly obvious You don’t want generic names like XYZ dash blah blah blah number two three four like you want real Contextual names for your images that make sense so for this Muay Thai image, for example, or actually we’ll go with the Brazilian Jiu Jitsu image first. That’s going to be their main class. As you may know, I do Brazilian Jiu Jitsu. I have for a very, very long time. And so this, you know, this is my world right here, right? So I named the image Brazilian Jiu Jitsu, okay? And I’m going to go ahead and insert that image. And Bricks likes to put in the caption that goes along with it as well. I’m gonna just say no caption, and it’s gonna give us that raw, clean image just like that. Now there’s a number of ways to build visual cards like this. What I’m thinking about doing is having the name of the class and just a really short description overlaid on top, but toward the bottom of every image, and spaced away from the edges a little bit. And then in order to enhance readability of that text since it is overlay text, I’m going to put a darkened gradient down there so that the bottom area where the text is is darkened and then it goes to transparent so that we can see all of the image the way that we want to. I’m just going to play around with it. I don’t have a design that I’m working from. I’m just playing around and kind of dialing it in to get it to where I want to go. But I added the image, I need to add a class to this image. So I’m going to call this class card double underscore image. And I’m also going to make sure that this is in a figure tag and I don’t need it to be that big, right? I’m going to bring it down to 768 pixels. And that’s pretty good for now. The next thing that I want to do is add a heading for this card. So I’m going to say I am a heading. We’re going to make this an H3 and I’m just gonna name it what it is, this is Brazilian Jiu Jitsu, okay? So Brazilian Jiu Jitsu, that’s the name of the class and then I’m going to give that a class as well. So I’m gonna call this class card double underscore heading because that’s exactly what it is. Then I’m gonna add text and I’m gonna say that this is class card double underscore description, okay? So this is like the description of the class. I’m gonna make this a paragraph tag and we’re just gonna say that Well, I’m not even gonna worry about writing. We’re just gonna go to website ipsum Don’t be alarmed. We’ll just get up to here. All right, I don’t want to waste your time, you know Writing descriptions and thinking of what to say for these services. So let’s just put in some filler text Okay I know that I probably want this text to be a bit smaller. And so what I’m going to do is I’m going to go into typography and I’m going to use one of our variables for making our text smaller. This references those clamp functions on the back end. We’ve talked about all of this before. So you know, you’re just seeing it over and over and over again. And then the next thing we need to tackle is actually getting this text to show up on top of this image right here. Now I’m going to the way that I’m about to show you is one way of doing it. There are multiple ways you can accomplish this. They’re all correct. This is just one of the ways. It happens to be the way that I showed in the previous lesson, which is why I’m going to do it again so you see it again. I’m going to make sure that my class card, which is the parent container, is set to position relative. This is gonna contain the image, which is gonna be absolutely positioned. So I’m going to grab my image here on the class and I’m going to come down to position absolute and you can see that automatically things start to change. I want this to be a hundred percent width and a hundred percent height. I want to make sure that I anchor it to the top and the left of this card and you can see that it is now conforming itself to the card container. And then we can see also that it’s very ugly because it’s stretched out but I can fix that very easily by changing the object fit of this image to cover and now it’s going to start really behaving as if it is a background image. Now I need to put it in the background specifically so I’m going to use Z index to do that again this was all explained in the previous lesson so if you’re completely lost you probably need to go watch that lesson for the first time or watch that lesson again. Okay so I’ve got the image in the background now and it’s not stretched anymore but I do have a problem with the height of my card because the height is only controlled by the amount of text that is in the card right now and I don’t want that to be the case. So what I’m going to do is I’m going to go with a minimum height. I want to set a minimum height on this card. I’m going to try 30 rim and that’s a decent starting point. We may be able to go a little bit bigger than that, but that’s a decent starting point to try to get to maybe 30, maybe 35 rim. Decent starting point to work from. And now you see that it is, it is 35 rim. Now why did I use minimum height instead of regular height? We’ve talked about this in the past. If I set a fixed height, it’s very dangerous because if I do end up having a lot of content, it’s going to overflow out of the container. You can actually break your container when you set a fixed height on it. Minimum height is very safe because it says be at least 35 rem, but if something forces you to get bigger, don’t break, just go ahead and get bigger. So that’s a much safer approach to take. All right, so I’m going to take my class card now and notice I don’t want my text touching the edges. That’s no good, right? So I want to give a little breathing room in there, a little bit of padding. And so I’m going to use one of my variables for spacing. I’m just going to try maybe a space M and I’m going to put that on all sides. And now you can see that my text is not touching the edge of the card, which is absolutely fantastic. The next thing that I want to do is I said, I want this content actually positioned towards the bottom of the card. So I am free to use Flexbox to do that. So look, if I align that to the center, it’s going to be in the center. If I align it to the bottom, it’s going to be to the bottom. It’s fairly, fairly easy. The only problem now is I can’t really read the text. Number one because it’s dark and number two because it’s blending in with this photo right here. So one thing that we can do is we can start to fix the color of the text. We’re gonna go up to typography on the parent and I’m just gonna go ahead and set this over to white. So I’m just gonna type in white as my color and now we can see let’s go to the front end and just check out how things are progressing here. Doing very very very well on the front end. We just have the readability problem where we can’t really read the text. So what I’m gonna do is add that gradient. Now, there’s a couple different ways to add the overlay gradient. Again, I’m gonna use the technique that I showed in the last tutorial just so you can see it again. So I’m gonna go ahead and add a div element in here and this is gonna be my physical overlay, okay? I’m going to name this class card double underscore overlay and then again I have to Position this absolute just like the image was position absolute the trick that I use here is top right bottom And left will make it the full size of the card and then watch if I give it a background color It’s going to yeah, it’s it’s bit. There you go. It’s going to be an overlay, right? Now that’s not actually what we want, but it does get us somewhere. And it also reveals a problem that we are running into. The problem that my overlay is actually covering up my other content. And so just like I did with the image, I want to use Z index negative one to bring it to the back. So it’s still on top of my image, but it’s not on top of my text anymore. And you can see where this is, you’re really starting to take shape. So if I, just imagine in your mind, if I started to drop the transparency here, the opacity, we get a darkened overlay effect. Now I also have the ability, instead of a solid color, just one color with transparency, I can actually create a gradient here. So I’m going to go down to the gradient area and I’m going to set this gradient on the background of this overlay div. And then I’m going to add two colors in. Now if you’re not familiar with gradients, they can be a little bit intimidating maybe to work with and you really don’t understand which color is going to be where and what the percentages are and all of that stuff. So one easy thing, you know I’ve talked about border checks when you’re writing custom CSS. Like put an ugly red border on something to make sure you’re targeting the right thing before you start doing all the fancy stuff. That just lets you know that you’re actually working on the right element. I’ve also said like with pseudo elements, just get something on the page like a big red square. Even if it’s ugly, it’s a starting point that you are going to be able to work from. So you at least you can see where you are working and what you’re working with. And the same kind of thing applies to gradients right here. What I’m gonna have you do is just choose two crazy colors, just two obviously ridiculous colors that we’re not trying to work with here, just so you can see what’s doing what. So I can see that the second color that I’ve added is the bottom color, and I can see that this other color, color one, is the top color. Now we can just start to imagine, hey, if the orange part was transparent, that would be much better, right? That’s actually what we wanted. We didn’t want a color up here. Now before I do that, I wanna say that my blue, imagine this, is a dark color and it’s a little bit transparent so I can see through it, but it’s dark enough to make my text very readable. So while it’s this ugly color right here, it’s very easy for me to dial in like the ratio of the gradient. So you can see that the blue here is not covering up the text enough. So I can drop this back to 70, 60, 50, 60, maybe 55. Okay that’s getting there. Maybe 60 was perfect. So it’s still slightly dark up there. That might not even be enough. Let’s go down to 50. That’s probably gonna be quite perfect. The only thing that’s left to do here is I’m going to replace the colors. So this color right here, I’m going to go to raw. I’m just gonna write the word transparent and now it is fully transparent. And the only thing left I see is the blue, which I am going to change to my dark color. And then I’m gonna drop the transparency on that. Perfect. Now that text is much more readable. It’s still not as readable as I would like it to be. So I’m actually going to move that gradient up just a little bit more. And then we are going to darken that a little bit more. Uh, sorry, I am working on the wrong one. All right, so we’re going to clear that out. We’re going to go back to having that be you, sir, or transparent. And then I’m going to come down here to my actual darkened overlay. And I’m just going to darken that up a little bit more. Okay, perfect. The next thing that I wanna do is on my class card, I wanna set a border radius, and we’re just gonna go with like one M on our border radius, and notice that, oh, what’s going on here? We’ve got the radius actually taking shape on the card, but our image and our overlay are sticking out the corners. They are what’s called overflowing the container. And we need to know that that’s a term, overflowing the container. Because what we can do is come down here to overflow and we can set that to hidden, which says hide any overflow that might be happening on this container. And then we can go ahead and hit save and let’s just refresh. And now we have a service card with overlaid text, rounded corners, this is a real image in the background. Now, we haven’t even started talking about today’s lesson. Today’s lesson is what I’m going to do next. And what I’m going to do next, because I’m doing this the wrong way right now, what I’m going to do next is I’m going to start duplicating this card. So there’s my class card, and I’m gonna duplicate this five more times, one, two, three, four, five. This is how most people approach this, okay? And now what they do is they start manually, which is, this is a static approach to content management, okay? I would go create pages in the backend. So I’m gonna go to associate with all of these things. So I would go back here, I would go to pages, I would hit add new, and I would say services, or actually this is classes, right? And I would publish a classes page. And then what I would likely do is I would go in here and say Brazilian Jiu-Jitsu. And I would say that this is going to be under page attributes, it is going to be a child of my classes page, which is right here and I’m going to publish this and then when I actually go view that page in the URL we see slash classes slash Brazilian jujitsu okay and this is how people most people that I see this is how they manage content in WordPress and once they create all their pages like this they go to create their grids and they create a card grid just like we’re doing now, and then they just start naming things statically. Okay, so they come in and say, the next one is gonna be no gi jujitsu. This is jujitsu without the pajamas, okay? And then we go over here and we call this Muay Thai kickboxing. And then they come over here and this is gonna be mixed martial arts. And then they come over here and this is going to be What else do we have we have a group fitness? classes and then over here we have cardio Kickboxing, okay So I’ve got all my names of my services in here or the names of the classes that are going on here And now what I have to do is I have to go to each one and I have to select a new image So I’m gonna go here, this is the no-gi jiu-jitsu one, which I’m gonna grab from right here. And then this is the Muay Thai kickboxing one. So I’m going to select my image, and I’m going to select this Muay Thai kickboxing. That’s perfect right there. And then I’m gonna go over here to mixed martial arts, and I’m gonna select the image, and I’m gonna choose, which one is MMA? MMA, where did you go MMA? One, two, three, four, oh there he is, okay. So I’m gonna insert, I don’t know, my brain wasn’t seeing that. All right, then I’m gonna hit image here, I need the group fitness classes, which are right there, and cardio kickboxing. And people will be like, Kevin, what is wrong with this? I mean, this seems just fine, this is like the life of a web developer. You just come in here and you make things happen. Okay, and that’s exactly what I’ve done. I’ve got my grid. Now we’re not gonna talk about linking all of this stuff. That’s not the point of this tutorial. We’re not gonna talk about hover effects. We’re not gonna talk about beautifying this. What we are talking about is dynamic content management in WordPress. This approach that you just saw right here, let’s go ahead and refresh. This is not the best practice approach. This is an extremely inefficient approach. And now what we have to think about in our mind is that these cards are going to exist on multiple pages of the website. Imagine that on the Brazilian Jiu-Jitsu page, right, which hopefully I’m somewhat templating that page as well, and hopefully pulling content dynamically for that page, but a lot of people don’t do it. A lot of people don’t do it. They use Gutenberg. That’s like the extent of their templating and dynamic content. Again, I’m going to show you a better approach today, but imagine that we have a Brazilian jiu-jitsu page. You’re talking all about Brazilian jiu-jitsu, and at the bottom of that page, you want to say, oh, and are you interested in the other classes that we have? Here they are. And so you’re going to have another grid down there. At the bottom of every… How many? We have six service pages. So at the bottom of six different pages, you’re going to have another grid of your service cards. And you might even want to put them into a different format. Maybe you want to put them into a carousel or something fancy, right? You don’t want them to look exactly like this. Maybe in one place, you want to just list your services in a normal list. You don’t want to even show them in cards. You’ve got a lot of places where these services are now showing up, okay? And if you’ve added all this stuff to the website statically, which means manually, even if some of the areas are templated, you have created a bunch of disconnects in the management of your content. And if things have to change in the future, again, we run into scalability issues and maintainability issues like crazy. And what I’m about to show you is not any additional work. It’s actually more work to do it like this. It’s more work to do it the wrong way. To do it the right way is actually, it’s either the same amount of work or less work. I’ve never actually timed either way or really like, and again, we have to talk about maintainability and scalability inside of that time aspect. Because a lot of people will say well I get to you know the finish line faster this way but they never account for all the extra work it forces them to do later on it’s actually way slower later on when we have to change things and iterate on things and scale things and maintain things and all the stuff we really have to do on most websites. Okay so I am I showed you the wrong approach right now I’m going to show you the right approach. Before we do that, let’s talk about this junk drawer concept, right? Like I said in the beginning, if you are putting all your content into posts and pages, you’re making a critical mistake. If you’re creating lists and grids of content manually, like we just did right here, you are making a critical mistake. A better way to approach web design is to take full advantage of WordPress’s content management features and organize your content using posts, pages, custom post types, custom fields, custom taxonomies, loops, queries. It keeps the database more organized and it gives you far more power with templating and dynamic querying of data. And this is also important for the dry principle. Don’t repeat element after element after element. When you can dynamically display those elements with a query loop. That is what we’re going to cover in today’s lesson. So let’s talk about the default junk drawers that WordPress gives you. They give you three different kinds of junk drawers for your content. Posts is number one, pages is number two. The media library is number three. Now in the last lesson, you learned how to clean up and organize the media library and make sure that your media is managed properly. So that is off the table. We’re left with two, jump drawers. Posts is the first and primary jump drawer. This is the default area of WordPress for blog posts. Don’t use it for anything else. It’s okay to use it for blog posts. I would recommend to not use that area for anything else. Let me show you this area right here. So it’s under posts and you would just add new posts and it’s even says hello world. And what is it? What does WordPress give you by default? Like an example blog post. And that’s what WordPress was in the very beginning, even though it’s been a content management system this entire time, it was primarily for blogging. And so you have posts, here are your blog posts. The other junk drawer they give you is pages and this is where people tend to put absolutely everything and that is like I said a critical mistake. So pages are the default area of WordPress for core pages but I personally hardly use it for anything. Why? Because pages don’t support taxonomies, they can’t be logically organized or grouped together easily, they can’t be queried easily, and they can’t be templated easily. Media is the default media library that we talked about, but that problem has already been solved. So let’s move on and talk about the next thing. And this is something that we have to add to WordPress. It’s called a custom post type. And I will say that most professionals, people that really know what they’re doing and care about scalability and maintainability and best practices they Organize their content in custom post types a custom post type basically allows you to create a new Drawer right instead of a junk drawer. We can have many drawers and imagine those drawers have labels on them And so it’s like instead of having all my tools thrown into the same drawer, I’ve got a drawer for hammers and a drawer for wrenches and a drawer for this thing over here and I’m not a mechanic. Okay. I’m not, I’m not going to go into every single type of tool that there is, but you get the point, right? It’s it would probably be terrible to just have a giant drawer with every tool imaginable in it versus having a nice organized drawer system. And that’s what custom post types gives you a organized system for managing your content. This keeps all your content separate from all other content in the database, makes it easy to query specific types of content dynamically, makes it easy to categorize specific types of content, makes it easy to apply templates for displaying a specific type of content. And by the way, it’s much more powerful than a WordPress page, because you can categorize and tag custom post types. For example, services, locations, team members, reviews, I can say, you know, my team members can be categorized into managers, instructors, like for this gym kind of thing, assistants, right? So we can have categories for our team members. You can’t do that with pages. So automatically we just have more power available to us from an organizational standpoint. Posts in a CPT can have children, just like pages. So you saw a minute ago when I made our classes page, I could make children. Well, you can do that with a custom post type as well. And a post in a CPT, very, very powerful right here, can be bi-directionally related to a post in another CPT. So imagine here we have classes and locations. What if this gym has 10 locations and 7 of them offer all of the classes, but 3 of them offer a limited set of classes. Like they don’t do Muay Thai, they don’t do group fitness, they don’t do, they’re literally just the Jiu Jitsu classes. Being able to bi-directionally relate them means I can control all these locations with and I’m not just telling visitors, hey, yeah, every location has every service, which is not accurate. This location only has these services, and this location only has these services, and I can choose from the backend, not from inside of Bricks, manually moving all this stuff around, but simply from the back end. I can say, you, you piece of content, you are related to this other piece of content over here. And this is, like I said, once you understand and wrap your head around this type of content management, you are going to hate every other website that you built. Every website that is a junk drawer of content. You’re absolutely going to hate yourself when you, and I, and that’s what I apologize for early. I’m so sorry that that is going to be your life, but you have the opportunity to do way better moving forwards. Okay. So let’s, let’s make a custom post type. Like, cause you might be thinking in your mind, Kevin, I get it. How hard is this going to be? How hard is this going to be? Well, it turns out it is not very hard at all. So while you weren’t looking, I went in and I installed two other plugins. MetaBox, well it’s one plugin, but one is like the free version, and then there’s the all-in-one add-on to this, which by the way gives you all of the panels and stuff, it makes it very, very easy to use. MetaBox, I’m gonna tell you this right now, because people ask me all the time, and we have to address this, we cannot move forward without addressing this. Kevin, what’s the difference between MetaBox and Advanced Custom Fields, also known as ACF, and then there’s some other plugins that you can add that do similar types of things. Here’s what I will say. At least in the United States, the two primary methods for doing this are Advanced Custom Fields and MetaBox. Now, I used to use advanced custom fields way back when, and I didn’t like it because you needed multiple plugins to accomplish what we’re trying to do. You needed advanced custom fields, which was only for custom fields. You needed a, what was called CPTUI, custom post type UI for adding the custom post types, unless you knew how to write the code to actually do it yourself on the backend. So there’s two plugins. And then if you wanted relationships, you had to add a third plugin. So this was three plugins that I needed, and they were all different UIs. And yes, they all talk to each other, but it just felt very, I didn’t feel as clean in terms of a workflow. So as soon as MetaBox all in one came out, MetaBox was like, hey, we’ll do custom post types, custom fields, custom taxonomies, bi-directional relationships, all in one, all in one, fam. And I was like, that’s pretty enticing. And I started using it and I was like, I actually like the workflow, the design a little bit better. Now that was when I made the switch. Since then, ACF, Advanced Custom Fields, has completely redesigned ACF. And it’s much more all in one. Now you can create custom post types with ACF. You can create custom taxonomies. You can create custom fields. All that stuff is good. And they’re about to release bi-directional relationships as well. And I actually prefer the UI of advanced custom fields over MetaBox now. And I am in a transition of sorts where I am seriously considering transferring back over to advanced custom fields. Now, if you’re like, Kevin, which one do I choose? I will tell you this, I don’t think you can go wrong with either one. If you wanna go with advanced custom field, I will say advanced custom field is probably the bigger standard, okay? So if you wanna go with advanced custom fields, it’s fine. If you wanna stick with MetaBox or go with MetaBox, I don’t think you can go wrong with MetaBox. There’s nothing wrong with MetaBox. So either one, this is one of those things that there’s not an objective winner. It’s like, whichever one you prefer, go with that one. The point is, are you managing content properly in WordPress? Are you creating dynamic content on your website versus adding everything manually and statically. That’s what you want to be avoiding. Don’t let the, this is like an Apple versus Microsoft thing almost, okay? Don’t worry about that side of things. So I’m gonna use Metabox in this tutorial. You may see me using ACF in the very near future. It doesn’t matter, okay? Pick one and rock and roll with it. Both of them integrate with Brics seamlessly. You can’t go wrong. You can’t go wrong with this, okay? All right, so what I’m gonna do is I am going to go under MetaBox and we’re going to go to post types. And you can see that it’s blank right now because I haven’t added any post types. We’re going to add two post types right now. And these are the two post types we’re going to work with for the remainder of this lesson. So I’m going to add a new post type and this is going to be called classes. It asked me for a plural name. I’m going to zoom in here so you guys can read better and make this easier for you. Plural name classes, singular name class. It defaults to the singular name for the slug. I prefer, because there’s always multiple posts in here, I prefer to default to the plural name for the slug, so I always change that to classes or the plural version of whatever I’m doing. You’re gonna notice that all these labels are pretty much made for you and they all work out of the box. So in this labels area, you don’t really need to do any work. So how hard has this been so far? You’re like, you’re literally putting a label on your new drawer of content. And for here, it’s, it’s doing all the labels for you. Then I go to advanced and you really only have to make a couple different decisions in here. Number one, is this a hierarchical post type, which means can a post have children and grandchildren? And in our case, yes, we probably want that to happen. We may not use it right now, but there’s no harm in activating this. Now the next thing that I want to do is I want to come down and maybe choose an icon so that all my custom post types don’t have the exact same icon. Now I’m not going to bother with choosing an icon right now because you don’t want to sit here and watch me scroll through here and choose one, but I would recommend that you go in and choose a unique icon for every single post type. I’ll leave it as the default gear for right now. The next thing is, do I want this to have an archive page or not an archive page? This is something that we’re not going to tackle right now. We will tackle it when we get to our lesson on templating. All right, but that’s a little bit beyond the scope of this particular tutorial. And that’s pretty much it, guys. I’m going to go over to support here and I’m just going to explain this area. Often there’s not much that we have to do here, but we’re gonna say, when you open and create a new post in this drawer, in this drawer, right? I’m using the drawer analogy, just hopefully that helps make more sense in your brain. Do you wanna be able to give it a title? Yes, yeah, we wanna be able to give it a title. Do you wanna use the WYSIWYG editor or the Gutenberg editor? Yes, we wanna be able to use that editor. Do you want an excerpt capability? No, I don’t think we really need that. Does it matter who the author is? No, not really. Do you want a thumbnail? Yes, or like a featured image? Yes, yes, that would be probably nice, okay? And then do you want any of this other stuff? I don’t need comments. Do I need revisions? I mean, that’s up to you, right? Do I need page attributes? Page attributes is something I probably need, okay? And that’s that selector for, you know, what is the parent of this post and so on and so forth. And then that’s really all I need. I’m going to hit publish. Guys, I’ve added a custom post type. I mean, really, really, how hard was that? And if you watch me do this in real time, I add these in seconds. Okay. So the people who think this might take a lot of extra work or anything like that, it really does not. And it gives you a tremendous amount of flexibility and power going forward. So even if you could do it faster the manual way, like I said time is something we have to calculate over the course of time. And this way hands down, it’s not even, people who don’t do it this way probably have never done it this way and then they just can’t imagine how it could be bad. Like it doesn’t make any sense. Their arguments don’t make any sense. So we’ve created our first one. I’m gonna go ahead because it’s so easy, and I’m just going to go ahead and create my next one. So I’m going to go to post types and I’m going to say, and we’ll do this one a little faster. Locations, location, locations. There we go. I’m going to go to advanced. I’m going to say, yes, they need to be hierarchical. Then I’m going to go to supports and I’m going to say page attributes. Oh my gosh. Wow. Was that mind-blowingly difficult or something? No, this is so easy. Now look what’s over here. I’ve got the ability to create classes and locations in separate drawers. That’s really, really, really organized. And then you’re going to see the power that’s going to come out of this. So I’m going to go into pages and we want to delete these two things. We did not need this. Let’s move this to trash. Let’s go to the actual trash and let’s delete all of these permanently. Okay. All of that stuff is gone. So now what I’m gonna do is go to classes, I’m gonna add new, and I’m gonna say Brazilian Jiu Jitsu. And really all I have to do now is add my classes in. Now I’m gonna do this the chump way. There is a way to bulk add these items, but again, that’s a little bit beyond the scope of this tutorial. So we have Muay Thai Kickboxing right here. I’m gonna go ahead and publish that. And then we’re going to go add new. We’re going to say cardio kickboxing. Perfect. I’m going to go ahead and publish that. I’m going to add another class. I mean, look how easy this is, right? I’m going to add another class. This is going to be called group fitness. I’m trying to remember them off the top of my head, but I may need to go back and reference our grid. Brazilian Jiu Jitsu, cardio kickboxing, group fitness, Muay Thai, we need our no-gi jiu-jitsu. All right, we’ve got our no-gi jiu-jitsu in here. I’m going to go back and we’ve got one, two, three, four, five. We’re missing one of them. What is it, Kevin? What is it? Let’s go back here. Mixed martial arts. Yes. All right. So we’re going to add mixed martial arts. Perfect. So now what I’ve done is I have added this content into its own specific area. Now, let’s go back and let’s see if there’s anything else we need to talk about. And there is. Before we go any further, custom taxonomies. Remember earlier I said that we could organize specific things, like team members can be managers or assistants or whatever. Now with classes, I can’t really think of a taxonomy that I would need to associate with my classes but if I needed to I’m just gonna quickly show you how easy this is so we can go to meta box again and we can go to taxonomies right here now I will take this moment to explain under posts you’re gonna see something called categories right this is a taxonomy this is the taxonomy that that WordPress gives you by default. Once again, it is a junk drawer more or less. Now, I’m not gonna get too much into detail, but there are times where you may want to organize your taxonomies here and then share them with your custom post types. But many, many, many, many, many times, you are going to want to make a new type of category and assign it to a specific post type or a specific set of post types. And that’s what I’m gonna show you right here. So MetaBox taxonomies, I’m gonna say I wanna add a new taxonomy and this will be class types, okay? Class types, class type, and then I’ll say class types, okay? So I’ve got my own little taxonomy set up here. Again, labels are all created for me. I’m gonna go into advanced and I get the same things. Should the categories be hierarchical? Should it’s a lot of the same kinds of questions. Then I’m gonna go to post types and instead of it being connected to the junk drawer of posts, I’m gonna say, no, no, no, no, this is for classes, okay? I’m gonna go ahead and hit publish here. And then when I go to classes, you’re gonna see I’m gonna open a class called Brazilians, look at this. I can say there’s types of classes. And so maybe this would be like kids, and then we would say another one could be adults, right? I’m just making stuff up as we go here. So this can be Brazilian Jiu-Jitsu. Oh, we only offer that for adults, okay? So I’m gonna go ahead and hit update. And now you see this custom drawer of content also has its own category system. Can you start to imagine how organized this is going to make your content? And then on the front end, the ability to say, you know what, I wanna query all of our adult programs onto this page right here. Oh, I wanna query all of our kid programs onto this page right here. Or I want the ability to say, I wanna query all of our programs and I wanna create a label on every card that dynamically says whether this is an adult program or a kids program. The amount of, create templates, create templates, the amount of control and power that this gives you is phenomenal. You don’t really have any of this at your fingertips when you do it the old manual static way. Okay, so let’s go back here. We’ve talked about custom taxonomies. Just to reiterate, WordPress provides you with categories and tags by default, but they are junk drawers of their own. Certain types of content require custom taxonomies. Usually this means adding a new type of categorization, like you might want to categorize team members by their position in the company. Okay, so we just made a custom taxonomy, and I showed you how fast that was, how easy it was to assign that to a custom post type that you’ve created. Now we’re going to talk about custom fields. So we’ve created our separate drawers, separate categories for our drawers if those are needed. They’re not mandatory if those are needed, but you can also collect different types of information and only collect certain types of information when creating a certain type of post. And we do this using something called custom fields. This allows you to map content to specific types of other content. For example, we might want to display how long each team member has been with a company, or we might want to link a Google map to a specific location. Or in this case, we want a description of our classes. And so what I’m going to do is I’m going to create a custom field for this description area right here. Now let’s go back into classes for just a moment. I’m going to open Brazilian Jiu-Jitsu and you’re going to see I already have a Gutenberg editor. Look, I can type, I can do whatever I want to here. And you might say, well, Kevin, just put the description right there. And that would not be a good thing to do because then my whole Gutenberg editor is not usable for anything else. I want to create a custom field for this class description. And then I’m free to use the Gutenberg editor maybe for the body some of the body content of the service page when I make a template for it. That would be a good use of the block editor for that kind of thing. Okay, so I know I need to create a custom field. Let’s go back and let’s see how easy this is. So I’m gonna go to MetaBox and I’m gonna go to custom fields. Look, same kind of format, same kind of workflow. I think you can imagine what’s about to happen. So I’m gonna go to add new, and I’m gonna call this classes, because this is a field group. I wanna associate it with where I’m going to assign it. I’m assigning it to classes, I want these associated with classes. And then it says there’s no fields. Click add a field to add a new field. So I’m gonna do that, look at all of the different types of data that I can collect and assign to a specific type of posts. And then I want you to realize that all of this data is queryable on the front end. I can also use things called conditions to maybe show or hide an element based on the data in a specific custom field. The amount of power that this gives you is so tremendous and you can see how easy it is to actually get it set up. Okay, so I’m just gonna add guys. This just needs to be like a text area field I don’t need anything crazy here. All right, so I’m gonna say class Description just like that and then I’m gonna go to advanced and I’m gonna see you know There’s not just for a simple text box like this. There’s not a lot that I have to do here So I’m gonna go ahead and I’m gonna I’m gonna publish this The only thing left to do is I have to assign where these custom fields are actually gonna show up. Because you can see that I named it classes, but like how does it know that that field right there should really only show up on these posts over here? Well, I go to settings and it says location. Like how, could it get any easier? So post type, I don’t want it assigned to posts. I just open this up and I say, you know what? I want it assigned to my classes. And then it says where, do you want it after the content, on the side, what priority do you want it in? Don’t worry about any of that right now. Just hit update, let’s just go to classes and see what happened. So I open Brazilian Jiu Jitsu, guys, there’s a box right here just waiting on me to put in my class description. So I’m actually going to say, write me a 60 character description of a jiu-jitsu class. And you know, I don’t normally use ChatGPT for writing content, but I think in this particular instance right here, and I’m not even going to care what it’s saying. I just want some content that’s unique to each class. So I’m going to drop that in right there. We’re going to hit update. And then I’m going to go over here. And there is, by the way, a cheat code. If you watch my plugin blueprint video, there’s a cheat code for being able to enter content into custom fields right here in the admin without opening every individual post. I’m not gonna cover that in this lesson, but go watch that other training and you’re gonna see it happen. So I’m gonna go into cardio kickboxing and I’m gonna say write me a 60 character description of A. We’re gonna say cardio kickboxing class. All right? And then I’m gonna do the same thing for that what’s the next one so group fitness class perfect and then I’m gonna come over here and I’m gonna say mixed martial arts class awesome and then I’m gonna go over here and I’m gonna say Muay Thai kickboxing class. Did I already do Muay Thai? No I didn’t. Okay. Muay Thai kickboxing class, okay? And then I’m gonna come over here and a nogi jiu-jitsu, of a nogi jiu-jitsu class. Okay, perfect, so I’ve got all my descriptions right here. I’m gonna grab this, this is gonna be my cardio kickboxing, so I’m gonna open that, drop that in our description, I’m gonna hit update, I’m gonna go grab this one right here. All right, this is gonna be for our group fitness class. So I’m gonna open group fitness, I’m gonna drop that in. I’m gonna update there. I’m gonna grab this one for mixed martial arts. Let’s go back, mixed martial arts. Drop that in there. And then I’m going to, and guys, you’re about to see the magic take shape here, okay? Powerful strikes, I’m gonna go here. That’s for our Muay Thai kickboxing. Drop that in. And then I’m gonna go here, submission grappling for no-gee. All right, perfect. Let’s go back, no-gee, drop that in. I’m gonna go ahead and hit update here. We have now created custom fields. Now that we’ve created the custom fields, we assign them to the correct post type and we put content into them. But there’s one thing left to do because if we look at our grid, what have we covered now? We’ve covered the name of the class, we’ve covered the description of the class, but my friends, we have not done anything with the image yet. Now I could put an image custom field in for sure, or I could just use WordPress’s default featured image. It’s really going to depend on what you’re trying to accomplish and how you’re trying to display this data. But for the sake of making this as easy as possible, I’m going to use the featured image that’s already available here. So no giju-jitsu, I’m going to go in, I’m going to go to my, Oh look, they’re all organized. Wow. Imagine that. I’m going to go in and I’m going to grab my, my short term memory is so awful. I already forgot which one we’re on. No Gi Jujitsu. Okay. So we’re going to go in and I’m going to choose my no Gi Jujitsu. I’m going to set the featured image. Now I will say this, if you’re doing a featured image like this, you must make sure you write your alt text inside of the media library. That’s going to automatically make sure your alt text is associated with the images in your grids and things like that. So I’m going to go just so just I’m not going to do all that right now. We talked about that last lesson. Just pretend that I’ve entered alt text for all of these images. And you already know why that’s important. Okay, so I added my featured image. I’m going to go ahead and update here, and I’m going to go one, two, three, four, five. I just opened them in new tabs. Come over here to cardio kickboxing. We’re gonna grab that one, set featured image, hit update. Come over here, group fitness. We’re gonna grab that one, hit set featured image, hit update, come over here to mixed martial arts. Set that one, MMA, there he is, okay, update. Go over to Muay Thai kickboxing, you are right there. Set featured image, update. Go over to Brazilian Jiu-Jitsu, grab that one right there, set featured image, update, and we’re gonna close all of these. Guys, I’ve made my custom post type, I’ve made my custom fields, I’ve put my content in. Now we have to see what we’re actually trying to accomplish here. Okay, so efficient content management, let’s open that up. There is our grid, now we can zoom out. Okay, so what I’m gonna do is I’m going to open my grid and I’m going to delete all of my cards and you’re like Kevin what are you doing you just deleted all of that work that you did earlier and it’s okay my friends it’s absolutely okay. Watch what I’m going to do now. I’m gonna take that now this is a different workflow in every page builder. Some page builders don’t even have this capability so it is important for you to use a professional page builder. Now most of them are catching on by now. Some of them are lagging behind. Most of them have caught on that this is an absolute necessity. Okay and so they’re adding it in as fast as they possibly can. But the bricks of the world, the oxygens of the world, they’ve had this from the very beginning. Okay so we have a class card right here. I’m going to turn this into what is called a query loop. So I’m gonna I’m gonna turn this on and by the way, they all work differently. Bricks is fantastic at this. It is better than oxygen at this. Objectively, the query loop is way better in Bricks. So I’m going to open the query now and it’s going to open this little panel. It’s going to say, what Mr. Kevin, would you like to query right here? And so I’m going to say, well, I definitely want to query posts, but I want to query a specific type of post. I would like to query my classes and that’s going to say, how do you want to order them? And I can say, Oh, we’ll order them by their ID or order them by their title or order them by their date or randomly order them. Think testimonials. If you do this with testimonials, which I highly recommend, you can create random testimonials. Every time the person loads the page, they get new testimonials from a specific category. You can relate testimonials to specific products and services. Guys, this is the way to manage content in WordPress. Okay, so I’m gonna go down. You can even say menu order, which allows you to manually order them on the back. I’m not gonna get into the details of all of this. We’re just showing you the power that is now available to you, okay? So right now, I’m not even gonna care about the order. And then you can, by the way, choose which direction the order goes in. How many posts do you want on this page? You want to ignore the sticky posts that are associated with this. There’s so many things you can do, but guys, I’ve already, I’ve already done what I need to do. I’m just querying post classes and that’s all I wanted to do. So I’m going to go ahead and hit save. And you can see that my one singular card, guys, there’s only one card in this grid, but it has become six cards like that. Okay. And now I don’t have to in the editor go card by card by card by card, uh, manually changing content page by page by page by page. I’m letting the dynamic queries do the work for me, but you’re saying, Kevin, this doesn’t make any sense. They all say the same thing. They all have the same, but how does this, how is this helpful? Well, watch. So I’m gonna go in and under Brazilian Jiu-Jitsu, I’m gonna say, nope, we’re gonna use dynamic data. And I’m gonna say, go grab the title of every single post. And I put that in and now, oh, look at this, you see. Nogi Jiu-Jitsu, group fitness, cardio kickboxing, Muay Thai kickboxing, Brazilian Jiu-Jitsu. I’m gonna come down here, I’m going to query this. Now, what are we going to query here? Don’t we need the class description? I’m going to say description, I’m just searching, and it’s going to find my MetaBox custom field that’s associated with classes, and it’s letting me know right here, that is your class description. I’m going to insert that, and it’s going to load in my class description. Now, this is showing short codes and can show improper content here. There’s settings in Bricks for how you want dynamic data to display inside of the builder. And I haven’t set that up really yet, so it’s going to leave like the short code right here. But over here you can see, and on the front end, let’s just go to the front end real quick, you can see that everything is perfect. Mixed martial arts, Nogi Jujitsu, group fitness, cardio kickboxing, Muay Thai, Brazilian Jujitsu. Now I actually want to order these in the other order. I want that. Well, I don’t even know which ones I added first anymore, so, but we can choose look ascending and it’s going to reorder them. So let’s go to the front end. Now Brazilian jiu jitsu is first. Look at that amazing, right? Okay. So what I want to do here is now switch the photo. Obviously these do not need to have the same photo. So I’m going to go to my image and I’m going to remove the image and then select dynamic data. There it is Featured image there it is. I’m going to go ahead and hit save look how my grid Populates dynamically this also by the way gives you options to easily add filters If you ever seen those little facets up here where you can say show me kids classes show me adult classes You can dynamically filter this section right here. But this is guys, this is absolutely phenomenal stuff, okay? So I have just created a query loop. I mean, was that really, really difficult? You didn’t maybe know how to do it, but how difficult was it? Like I said, make it a query, I mean, let’s go review. Here we are with the class card. I said, use query loop. Then I said, query the classes and set their order. And then I hit save. And then I went in and just swapped out content with dynamic short codes, dynamic content tags. And by the way, you can set limits on the text. It’s gonna show up here very easily with Bricks. Again, I’m not gonna get into all the details. The tremendous power that this gives you cannot be understated, okay? So now I’m gonna scroll down and see what else we need to talk about. Ooh, bi-directional relationships. Oh, we also skipped a step. So I already showed you the query loops, and then you can imagine how we can create templates that also query data dynamically using the exact same approach. I’m going to cover this in the templating lesson, don’t worry. But I want to talk about bi-directional relationships. So I’m going to create one more, just so we can speed through the workflow. I’m going to create one more custom post type, or I think we already did, locations. But what we need to do is we need to add our location. So we’re gonna say Atlanta, go ahead and publish there. So hey, they have a gym in Atlanta. They have a gym in Savannah. All right, we’re gonna publish there. We’re gonna go back. We’re gonna say they have a gym in Alpharetta. Okay, perfect. Now I’m not gonna do all of them, right? And imagine I go in and I create my own custom fields for these locations. It can say what is the link to the map? What’s the link to the GMB? What are the hours for this specific location? There’s anything you can think of relative to a location. You can even create an entire photo gallery that’s specific to locations that pulls from the media gallery in the back end, or even a gallery custom field on the actual location page. So you can say, hey, here’s all the photos we’ve taken of all of our classes for this location. And then this other location page has a completely different gallery. But instead of doing all this manually and statically, it’s all managed dynamically. It’s absolutely beautiful. But now let’s say I wanted to associate some classes with a specific location, how would we do that? Okay, so I’m gonna go into a MetaBox and I’m gonna go to relationships right here. And I’m gonna create a new relationship and I’m gonna say classes to locations. This is my classes, locations, relationship. And I’m gonna say the post type of classes should be associated with the post type of locations. And then I’m gonna go to MetaBox right here and I’m gonna give them a title. And so this is associating classes and I believe it’s the reciprocal. I always get this confused, but it’s easy to fix if you get it confused, it’s okay. So I’m gonna say related, this is classes. I’m gonna say related locations. I think this is how it wants you to set it up. I’m dyslexic, so I can literally never, when it’s a binary thing, my brain can never remember which one is right, because I get it like backwards so often that I can never trust myself. So I have related locations and related classes, and I’ll show you how to fix this, okay? So I’m gonna keep this on the side, and we’re gonna go ahead and publish this. And I’m just gonna go to locations, and it’s called bi-directional, because I can go edit a location and create associated classes, or I can go to classes and associate locations, and they work back and forth. So I’m gonna open Alpharetta, and over here you see related classes. And so I did it right. There you go. Flip a coin. Sometimes it works out. So related classes, I can say at this Alpharetta location, we have mixed martial arts, we have no Gi Jiu Jitsu, we have group fitness, and we have, let’s pick one more, cardio kickboxing. And we can hit update. So those are the classes that are associated with Alpharetta. And you can see, like, what if your client calls you up and they’re like, hey, dog, we added a new class to our, actually, we added a new class to our offering, but it’s only offered at this location, this location, and this location. Well, in the manual way, you’re like, oh my God, where did I put all the classes grids? Okay, I’m gonna have to go add a card to every single one of those grids and make sure I don’t miss any. And then I’m going to have to go to each location page and make sure that that that class shows up on those pages as well. All right.
2
1:00:13
And then I’ll be done.
1
1:00:14
Or what you can do is you can come in here and you can say, watch this. This is the power of this classes. Look, they’re going to add a new class. So I’ll say new class. All right. And then this is the description for the new class. And then we’re going to obviously add a featured image. I’m just going to use one we’ve already used. Okay. And I’m going to hit publish, publish. So I’ve added a new class. And by the way, while I’m doing that, I can just come down here and say, by the way, this is only offered in Atlanta. Okay. Right now, it’s going to come to other locations, but right now it’s only offered in Atlanta. I’m going to hit update. And then I’m going to go here. And I’m going to refresh guys. The grid made itself. It added a new item with a new description. It’s all done for me. I don’t ever have to touch the actual page builder. And then if I had an Atlanta location page, guess what would have shown up on the Atlanta location page? This class right here. Guess what would have not shown up on the other location pages? This card right here, because it’s not associated with those other pages. So you guys see how, like, look how quick I, and I didn’t need to remember. Where are all my location grids? So I can go add a card manually to them. You know, going to, where are my templates stored and how is everything built? I don’t care. I fill out custom fields, I create a new post in the post type, I hit publish, I make sure all the fields are filled out, and the website is taken care of on its own. All of the content is dynamically generated, so I don’t actually have to touch the website. I’m managing the content within the database, okay? And so I show you, I’ve done many tutorials on querying, bidirectional relationships, on templates. Tons of this stuff is in the inner circle. I will be doing more of this in PB101. I wanted to show you in this lesson the old way, the bad practice way, the new way, the professional way, the immense power that doing it this way gives you versus the old way. I wanted to show you the potential. I wanted to give you the basics. We will expand on it a little bit, but there is a lot here that you can do well beyond what I’m showing, what well beyond what I’m alluding to. And that just requires you to gain more experience, become more advanced in what you are doing. And if you want that kind of support, let me go back to camera. That support is always available to you within the inner circle. So I want you to know that this other resource is available to you should you want it and should you find value in that type of thing. But this was dynamic data management inside of WordPress with custom post types, custom fields, custom taxonomies, query loops, dynamic data. Very, very powerful stuff. Drop comments below and let me know, were you doing it the old way? Or if you weren’t doing it the old way, if you were already doing a workflow like this, had you done it the old way at some point? And tell me the clear difference you’ve experienced since switching to this dynamic method of content management in WordPress. I would love to hear your stories. I would love to hear your reasoning for why you made it. Like who got you to make the switch initially? How long has it been since you made the switch? Because there’s going to be other people watching this who are like, I don’t know if I should go that route. Like I’m really comfortable just doing it manually. I’m really comfortable doing it statically. Is it really going to be that much of a benefit for me? I don’t know if I want to. In their head, they’re on the fence. They’re on the fence. So drop your comments down below and let me know. And then of course if you have any questions I’m happy to jump in and answer those. You guys know I respond to pretty much every single comment that gets left on my channel. That’s it for this lesson. I’m out. I love you guys. I’ll be back very very soon with another lesson in PB101. Until next you guys. I’ll be back very very soon with another lesson in PB101. Until next time, peace.
