How to Create a Dynamic Restaurant Menu in Bricks

0:00:00
Hello everyone. In today’s lesson we’re going to learn how to create a dynamic restaurant menu in Bricks Builder. Now when I say we’re going to be learning how to create a dynamic restaurant menu, I’m not just saying this because I just want you to learn how to create restaurant menus. A lot of you might not end up creating restaurant menus so you may wonder how is this going to be relevant to me. This sort of lesson is the kind of lesson that you can apply to different things. It doesn’t have to be a restaurant menu. It could just be anything that requires an archive post type, custom product post type. It is the kind of lesson that you can apply in so many ways because in this lesson, you’re going to learn a lot of things. You’re going to learn how to set up custom post type. You’re going to learn how to set up custom taxonomies. You’re going to learn how to do based on data attributes, a dynamic styling based on data attributes. So there’s a lot we are going to do now. Let’s take a look at the example that I have here. Now this is exactly what we are going to be doing. And as you watch this tutorial, it’s going to become clearer the kind of things that you can do with it and how you can apply it in your own personal projects. Here we have a restaurant menu and we have this categorized or grouped into categories. So we have the starter category, we have the launch categories, and then we have the dinner categories. And all these are dynamically pulled in. So, we have a category loop. Under each category, we have the post types for that category pulled in under them. And we also have other features like the featured menu items and also discounted menu items. So if you have an item on the menu that is discounted, we have a feature here where you cross out the original price and then you have this, you also have the percentage, the discount percentage. So this is like a discount batch. Okay now let me give you a rundown of the things that we are going to be doing. So the first thing we’re going to do is we’re going to create custom post type and we’re going to be using MetaBox AIO for these custom post types. So the first thing is to create the custom post types. Then the second thing we’re going to do is to create the custom fields, and then we’re going to create the custom taxonomies for this field. We’re going to hook up these taxonomies to the custom fields so that a user or the client or whoever wants to deal with this is going to be able to choose the categories from the custom fields. They don’t really need to go to the WordPress category options on the side panel to choose it. Then after that, we’re going to create a custom post type archive template in BricsBuilder. And inside that custom post type archive, we’re going to query the categories. And then under each category, we’re going to query the post types for each category. And then we’re going to go ahead to add the normal price and the sales price, cancel out the normal price, and then style the featured card separately. So any card that is set to be featured will have a separate styling. And we are also going to do it in such a way that for each category, the featured card is the one that will come up first. Okay, so we’re going to order it based on whether it is featured or not. So all the featured products, all the featured menu items are going to come before the others. So you can see the possibilities in use cases where you’ll need to do something similar. So first of all, let’s go into the back end of WordPress and start creating a custom post type. So I’m right here and I am using MetaBox. If I go to Post Types, you’ll see that I already have my Restaurant Menu Post Type created. Now, I’m going to open this and then I’m going to show you how I created this Post Type. So to create a Post Type, all you need to do is to click New Post Type and then you’re going to add the name of the Post Type. In my own case, what I had here was Restaurant Menus, okay? So I’m just showing you as an example. I had restaurant menus. Now, I may not recreate this thing all over again, okay, but I’m going to show you step by step on how I created it. So when I click post types, I type in restaurant menus as the plural name and then for the singular name, I wrote restaurant menu and then the slug is restaurant-menu. And then on the labels, I really didn’t need to do anything. I basically left all of these the way they are. And then under advanced, I didn’t really change anything except to change the dash icon. So the icon for my dash, for my site menu entry in the WordPress dashboard, this is what it is, okay? And really do anything. So if you take a look at this, if I go to the advanced, basically everything remains the same. So I didn’t really change anything here. All right, so go to support. I didn’t change anything here and then under taxonomy, what I did was I created a restaurant menu category and then I clicked here taxonomies that will be registered for the post type. I just checked it. So now we’re going to go into the taxonomy. So if you want to create a taxonomy, you click here, okay? And then I’ve already created my taxonomy, which I’m going to show you here. So what I call it was restaurant menu categories. And then when you look at it here, you’re going to see that taxonomy here, restaurant menu categories. And then the singular is the same thing. It’s going to be restaurant menu and then the slug is going to be restaurant menu category. So let me do that. So I’m going to add a new category. So just the same thing, restaurant menu, okay? And then we have the singular name and the slug. Then under labels, we’re not doing anything here. Then under advanced, I didn’t do anything here either and then under post types, I chose the post type that I’ve just created which is the restaurant menu post type as the post type that this category belongs to and that is why it is registered under here. And once we are done with that, the next thing is to create the custom field. So I went here to custom fields. As you can see, I already have my custom field that I’ve called restaurant menu. I’m going to show you what I did here. So that what you do is to add a new custom field group and then you give it a name. And what I did here was I gave it, we have different fields. We have like six fields. The first field is the description. The second, my description field. So if you add here, okay, add a field. So the first one that I added was just a text area. Okay. And I changed it to description. Okay. And that is it. So that is what you have here. Description is the type is text area. I didn’t really do anything to that. And then once that is done, I added another field. The next field I added was the featured. Now, the featured field is a switch field. So, I’m going to do this, okay? Featured, I’m just going to type switch. I want to have a switch field, okay? Sorry, switch. Yeah, the name is not switch, but the type of the field is switch. So the name is going to be featured, okay? And yep. Okay, so the type is switch, just like we have here featured the type is switch and then one thing that I did there was to come down here to the custom on and off label so we come down here custom on now what do you want it to show like I’m gonna show you what I mean so I’m gonna say featured and then for the off I just wrote off now what that does is let’s go to let’s go and check out an example of what that does. I’m going to come to the restaurant and then open one of these. So you can see that if it is featured, if I click here, it’s going to show featured. If it is not featured, it’s going to show off next to the featured field. And then the next thing I did was, I think, yeah, that’s basically all. To be on by default. Okay. So I didn’t really do anything or any other thing for that. And then the next one is going to be the price. Now what I have here is two prices. I have the price and I have the sales price now. So I created a price to be number. Okay. So I add that as a field type number and I wrote price. So one thing with the number field is that if you have a number field like I have here, okay, and let me go here. If I have a number field here, this is my price. If I want to put a price of let’s say 4.25, okay, and then I’ll click update. You see, it’s not allowing me because it says enter multiple of one. Now to be able to have the decimal in the number field, what you have to do is to go into that number field, okay, like here I have my pricing field. So you go into there, where you have step, just write any and then update it, okay. And then if you go back now, I’m going to refresh this page. If I go back there and write 0.25, then I save, you see I’m going to be able to save it. So that’s the trick to have decimal places in the number field. So if you’ve ever tried to use the number field and you have that challenge, put that. So the same thing, I have a number field here in sales price, and on that step, I also have to put any. Now, I left that part because I wanted to demonstrate it to you. So now that is it for the number field for the price. Okay. So I’m going to go ahead and put step any here. Now the next one I want to add is to add a field to show if it is on sales or not. Okay. So what I want to add is a switch field. And the reason I use a switch field is it is very convenient to use a switch field for conditional logic because the switch field returns 1 or 0. I think that is very convenient. So you could write a condition if the switch field is equal to 1 or not equal to 1. That is very neat. So this switch is going to be on sale. So if a product is on sale. I think that’s basically it. And then the custom on field, I want to write on sale. I like using capital for that. And then the custom off is just, I want to say off. So when we go here, if I click here, you can see on sale. So you notice something here is that when I click on sell, it brings out another field to show sales price and I have made that sales price to be not to be optional. It is required because once a product is on sale, you definitely need to put the sales price at the price. I didn’t make it compulsory for some reason. Someone might just want to put out you know an item without putting the price. I don’t know but I just felt that that is optional. This is strictly optional. You understand? But once you put the price and you say it is on sale, then definitely if you say something is on sale, then you should put the sales price. That’s why I made it compulsory. I made it required. So after we have on sale, okay, I’m going to put another number field which is going to be the sales price, okay? Sales price and I’m going to come down to step and put any. Remember why we do that? And then for this sales price, I want it to show only if this sales switch is on. So I’m going to go into advanced. I’m going to click here, on cell, okay, when on cell is equal to one. Okay, yep. Let’s take a look at the one I did here and then go into advance. Here what I did was it’s not equal to zero which I think that is what, that is actually much more reliable using not equal to zero. So we say not equal to zero. For a couple of reasons, using not equal to zero will always avoid issues compared to using equal to one. So if on sale is not equal to zero is what you should use. Okay. Then the next field we’re going to put there is, we’re going to put a menu categories. Now, the reason is this, when you go into WordPress, okay, your users have the option of choosing your category from here, okay. And then you have all these fields here, they want to everything that they’re going to choose is here. So why not just add a category here. A lot of times these categories are not listed. You have to remember them and then start typing them out. What if they don’t know what you wrote? So it’s good to have custom fields that hook into the WordPress category and your custom taxonomies. So what we’re going to do is to create a taxonomy custom field and that you’re going to come here and then you’re going to say taxonomy. Now you’re going to have taxonomy and taxonomy advanced. So you’re going to select taxonomy and then you could just give it a name. Now in my own case I call it menu category so I’m just gonna call it menu category and then go ahead okay go ahead and change this but make sure you don’t have any other slot like this okay so what I did was I went ahead in my own case did that restaurant. Okay, so what I called my own was restaurant menu category. Just make sure you don’t have two of these, so anywhere in your installation. Now the taxonomies, you’re going to go ahead and select the taxonomy that you created, the restaurant menu category, which is this taxonomy here, restaurant menu categories. So that’s what you’re going to select. Now take note that for each of these fields, you have the PHP snippet here. Okay. For the description, you have the PHP snippet for it, for the feature, for the price. Now, this PHP snippet sometimes come in very handy and in our own case, it’s going to come in very handy, especially when we want to create a percentage loop because we are going to be using that in the PHP to calculate the difference between the sales price and the price and then speed up the percentage. Okay. Alright. So we’re done with the custom post types and we’re also done with the custom fields. The next thing now I’m not going to save what I’ve done here. Okay. Because I already have it. Okay. So I’m not going to save that. I already have it. So let me close that. I already have it here. I already have my post type. I already have my custom fields, and I already have my taxonomies like I’ve shown you how to set up. And then once you do that, you’re going to have something like this. You’re going to have your restaurant menus, and then you’re going to have your categories, which you’re going to go in here and then create your category. So I went in here. What I did was I created three categories. I created dinner, lunch and starters. For example, if I want to create breakfast, I can do breakfast. Okay. And then just now, no need to add slog because it’s going to use this as a slog, except you want to add a slog that is different from this. Okay. So if I click add, it’s going to show up here, but I don’t want that. I’m going to delete that. Okay. All right. So now the thing you do is you go into add new to your restaurant menus and then add new. Once you click add new you’re gonna just like normal post you’re gonna have your title here which we are going to be using as a main menu name for a menu item. We’re gonna have description, featured, all the fields right here and what I did was I went ahead to create nine different menu entries and they are some of them are not featured. For example, if you look at this, some of them are featured, some of them are discounted, just like that. And so I just mixed them up. So I wasn’t going to do that on screen. It’s going to be a waste of time to sit down, create all these nine of them. So I already went ahead to create them ahead of this lesson. So we have all of them with the featured image. Let me go into one. You’ve already seen it. We have the featured image right here. So right there, that is the featured image. And then here you have the description, whether it’s featured or not, the price, is it on sales or not, the category. So you just choose one category or, I mean, it depends. I mean, can you have a single menu item in two menu categories? I don’t know. That is up to the restaurant owners to answer. But I just choose one for each menu item. When I say menu item, I mean restaurant menu, not the WordPress menu. Now it is time to create our archive taxonomy. So I’m going to head over to Bricks and then to Templates and then I’m going to create Add a New Template. So my template, I would have just called it restaurant menu. The reason I’m calling it food menu is I already have something called restaurant menu. I don’t want to confuse it. I just want to give it a name. Alright. That is a difference. And then the template type is going to be an archive template and I’m going to go ahead and publish it. Once I publish it, I’m going to edit with Brics and this is where the build starts. First thing I’m going to do is just to drop in a section there and then in the container I’m going to drop in a block. So I’m just going to add, let me just right click and say insert block. Now this block is going to be the parent for all our design, the whole design in this template. So I’m just going to call this menu block. I think it’s a good idea to name your blocks, your elements in the structure panel. It just makes it easier to identify them later when things get really complex, especially when you expand all of

0:19:02
them.

0:19:07
Inside there, I’m going to insert another block and this block is going to serve as a category loop. Remember, we’re going to be creating these category loops and then inside each category loop we’re going to have the post type under each category. Now the reason it’s important to have this menu block is because every loop needs a parent. So whenever you want to create a loop you want to make sure that it has a parent that can be used for the layout controls whether you want to make it grid or flexbox layout, you should give it a parent. Now the first thing I’m going to do is to make this a query loop. So I’m going to use query loop and then I’m going to go into the query loop and what I’m going to use here is terms and I’m going to choose my restaurant menu categories. Remember the categories we created for our custom post type restaurant menu? This is it. So I’m going to select that. Nothing seems to happen here because we don’t even have any content. So I’m going to drop in a heading, okay? That’s going to be H2, okay? Let’s make that H2. And then in that heading, I’m going to insert the term name. All right? So now we have lunch, dinner, and starters. I want starters to come first because typically, the way I created the categories was I started with starters, then I created lunch, then I created dinner. So I’m going to order by ID and that is going to just swap them because this was created first, then this, then this. So any other one that is created later will just come under. But there are many other ways you could order items, so many other ways, but I just want to use ID. So now we have a category loop. It’s as simple as that. Now inside the category loop, we want to have a post type loop. So I’m going to right click and insert another block and this is going to be a menu loop which is going to take care of the menu items. So inside each category, we want to have a parent. Now we can use this as I don’t want to use this as the parent okay of this loop. We want to have a parent that we’re going to use as you know for the layout if you want to make it grid we can use this because this already has a child here so we can run a grid on this you know on this because it’s going to mess up everything. So I’m going to right-click here and wrap with a block and this is going to be my menu loop wrapper. That’s what I’m going to use for the layout, maybe the grid layout. I’m going to come here and then I’m going to use a loop here. Then under the query, I want to query the post and then the post type is going to be my restaurant menu post type. But that is not all. To get this to work, you’re going to go down to taxonomy query. Then for the taxonomy, you’re going to choose the restaurant menu categories and then under field, you’re going to choose the term ID. Then under terms, you’re also going to choose term ID. That is all you need for that to work. Right now, it seems like nothing is happening. The reason nothing is happening is because nothing is in here. Now let me just quickly just add a post title here. You’re going to see, okay, so you can see that each restaurant menu post type is listed under each restaurant’s menu categories. I’m going to go back to the category loop right here and then under layouts, I want to give it a gap, contents gap, and I just want to copy that and put it here. I mean, why am I typing?

0:22:49
I can’t believe I’m typing.

0:22:50
I mean, I could have just right-click here and just say, Content Gap. And I want to come all over here and I want to give it a row gap of let’s say, 4rem. So that separates that launch from, you see, without that, that’s what we have, 4rem. So now everything is separated properly. So the next thing is to build this card. So the menu loop is going to be a primary card. So let me just add the card. I’m going to take away this post title for now. And then I’m going to insert two blocks inside here. This first one is going to be my content wrap. And this second one is going to be the image wrap. So inside the menu loop card we’re going to have the content wrap and the image wrap and that block is going to serve like the header for the menu card. So I’m just going to call it header. That is going to contain the price and the name. Inside here I’m going to insert a div right there. Okay, I’m going to insert a div and inside that div, okay, there’s nothing is there, insert a div. Alright, so I have a div and this is going to hold my prizes. Okay, and why am I inserting a div? Because I want to, there are going to be two prizes here. So I want to be able to group them together. So inside there, I’m going to add basic text. Okay, and the first one is just going to be my price. And then I’m going to duplicate that. The next one is going to be my sales price. And then for this, I’m going to give it a class of menu sales price. I’m going to call it restaurant menu. So RM, sales RM price. But the prefix I’m going to be using is RM, restaurant menu price. And I’m going to have that same. I’m going to copy style and paste style. That’s going to copy that class to here. But then for each of them, I want this to be RM price sales. We’re going to have the sales price and the normal price. For the price, we’re going to put a custom field right there, and that is going to be price. You can see price, she just type price, you’re going to see that restaurant menu price. I’m going to put in a dollar sign right there in front of it so you have that price show up and then for these I’m going to just type also price and the sales price is going to come up and I’m going to put that there. So if it has a sales price you can see it doesn’t show up, only the dollar sign show up but then if it has a sales price, it shows up. Now what we want to do is to make this sales price show only if the sales price is on. So I’m going to click add a condition and then I’m going to set my condition to be dynamic data. That dynamic data is going to be my sales price. Okay on sale. Restaurant menu on sale. Okay on sale. So onSell. If onSell is not equal to 0, then that is when I want this to show. If onSell is off, then it should not show. So I think that should start doing something there. I’m just going to save this and let’s refresh and see if it’s working on the front end. As you can see, the ones that don’t have the sales price, it’s not showing. Okay. The sales price, the dollar is not showing. But if it has the sales price, see, it’s showing. Okay. So you have it showing under here. Okay. So this is the normal price. This is the sales price. But this one is just a normal price and it doesn’t have the sales price. So the dollar sign is not showing the way it is showing here. So it’s working. I’m going to take this div and I just want to change this display to flex and just give it a column gap of one rem just to separate it. Now for SEO, this post title, we want to make this H2 okay and then this, you see this was like a H2 so I really don’t want this to be a heading I just want this to be a regular, you know, a regular text so I’m just going to give it maybe just a div, okay, just change it to custom and then we can style it to look the way we want because we want our, because we want the name, we want the menu items to be the H2 of the page and we can’t have this being an H1 because we’re going to have several of them here and we’re going to have our main post title, for example, just the way it is. Let’s see that example, just restaurant menus. This is going to be a primary, the H1 and this shouldn’t be a heading. Even though in my example, I didn’t bother to change that. Let’s go back there. To style this, I’m going to go into the styling, typography, the font size. I’m just going to make it text, maybe XL. And then for the font weight, I want it to be bold. And then for the font family, I want to use Laura for that. And I want it to be tallic. Okay. Yeah. So next we want to make this list. Okay. This menu item list, a proper menu list. Okay. We’re going to have the UL-LI structure. So what I want to do is this is going to be an LI and this is going to be the UL, the wrapper. So I’m going to change this to an unordered list. So I’m going to change the HTML tag to UL. And once you change the HTML tag to UL, it’s going to give you a default padding of, under layout, you’re going to see a default padding of 40, which I’m going to take it back to zero. But if you want to have that indentation there, you could leave it. It’s optional, but I usually like taking it back to zero. Then for this, it’s going to be a li, so the tag is going to be li. That is going to give us a proper list structure because these are the many lists. So I’m going to save that. And then if we take a look at the front end and then we are going to inspect that to see if it looks OK. So we have H2. So yeah, so we have the UL and LI for each of them. So this is not supposed to be H3. So that custom tag, I didn’t write something there. So I’m just going to write div, save that.

0:30:17
Let’s go there and check it out.

0:30:20
All right. So we have just a div with a text inside. Okay, so we don’t have that H1 there. Was it an H1? Okay, an H3. Yeah, let’s go back and continue the design. So we have the content wrap. Now we have this image wrap and then here we’re going to insert our… we’re going to insert the description. So I’m just going to go basic text and that is going to be our description. So I’m just going to rename this to description and I’m going to add that description. So you see scroll all the way down, meta box, restaurant menu, description, and then that is going to show up right there. So I’m going to select my content wrap and just give it a row gap of 0.5 rem. Let’s separate that a little bit. But for this, I want the price to be stacked beside the name. So what I’m going to do is first of all, I’m going to go to the name. That is the name of the item. I’m going to go to the style. I’m going to go to typography. I’m going to right-click and give it a small font size of let’s say large, text large. That’s good. For this starters, for this one, I think let me just make this XXL, make it a bit larger. All right. Now for this, I’m going to go to content. I’m going to stack it horizontally. I’m going to make it space between and center. Let’s close that. Let’s deal with the image wrap. I’m going to select the featured image for the post.

0:32:07
Okay.

0:32:10
So the items are showing up here. Okay, cool. But I want this image wrap, you know, I want it to be the first item. Just like Kevin has been teaching in the circle on YouTube, you know, we all know that these, structurally, the content should come first, but these should come second in the structure, but you can flip it by using the order of negative one. So that is exactly what we’re doing here. I want the menu items to be displayed in two columns. I’m going to go all the way to the menu loop wrapper. I’m going to set it to display grid. I’m going to give it a variable of grid 2. And then so we have that. The content wrap needs some padding. I’m going to choose that and space M should do the trick. Okay so let me quickly add a fence background to the section because I really want to have an idea okay an idea of what is going on here. So the menu card is going to have a background of white. So I can see what is happening here. So this is my image wrap and this is my content. So I’m going to select my image. I’m going to go to layout and give it a width of 100%. I’m going to give it a height of also 100% so it can fill up the container. Then I’m going to go to object feed and set it to cover. I’m going to select this card. I want to use grid on this card, the menu loop card. So we’re going to set it to display grid and we want a grid 10. All right, that seems to mess up things. I’m going to go to the image wrap. I want this to start from 1 and end at 4. And I want this to start at 4 and ends at negative 1. Okay. So what is happening here is, and the reason I made it 10 grid is it’s usually easier for me to distribute the grid items in terms of percentage. So I want this to take up 30%. So it’s going to be three, you know, three columns. It’s going to take out, it’s going to span three columns. I want this to span 70% so it’s going to take up seven columns. So it’s easier for me to do that. So when I say this first one, the image I want it to start from one and end at, now let’s turn on that grid control. Okay, so you can see the grid control here. You see that line? First line, second line, third line, fourth line. So it ends at the fourth line. So that’s what you mean by it starting from 1 and ending at 4. And then the content starts from 4 and ends at the last. Now, negative one means the last. So always use negative one for the last. So we have that. So I’m going to save what I’ve done so far. Then it’s time for us to add a featured and a sales price, sales batch. So I’m going to go to the image wrap. I’m going to add two basic texts. One is going to be featured, and then I’m just going to duplicate that and the next one is going to be cells okay and then both of them are going to have a common class I’m going to just call it restaurant menu attributes is it on cell or is it you know I just want to call it that, I can’t think of a better name and then I’m going to copy copy that style okay and then I’m going to paste it here to copy the class and paste. And then I’m also going to give it individual classes. This is going to be restaurant menu attributes. That is featured and this is going to be restaurants menu RM attributes sales. And this, I want it to have the word featured. And then for this, I’m just going to put the word sales for now. Now at the end of the day, we don’t want it to have the word sales. We want it to have the word, the percentage, the sales discount percentage. Now I want these two to be absolutely positioned. So we want both of them to be positioned absolutely relative to the image wrap. So we’re going to go in there for the image wrap and we’re going to set the positioning to relative. Now before I position relatively, I’m going to start styling this. And what I want to do is I’m going to style it with the common class that they have and I will use custom CSS to do the styling. The reason I want to use custom CSS is this. When you have an element that is going to have so much styling, so many things going on in terms of styling, it is usually more convenient to use custom CSS to style it because you don’t want the styles to be scattered across the settings. So you go here, look for where did I do this, go here, look for it. Everything inside the custom CSS is just in one place and you can easily see you have an overview. Now, it is not a very ideal coding experience to use the BricsCustomCSS to style this, but I’m going to use it nonetheless. At the end of the day, you feel free to copy this code out and put it on your code editor. Now, if I write the word root, this root means this class that I’m selecting. So I might as well just say.rm-attributes okay and that is exactly what it means but Bricsys is going to convert it back to root if you write that. So just write root now when I write root you have to take note if you want to copy this thing out to your text editor you have to replace it with the selector for that element that had this style. So I’m writing roots. Okay. So I’m going to open and close those. And the first thing is that the position is going to be absolute. And then I’m going to make the font size 1.2 rem. Nothing seems to be happening. Oh, something is happening. Why? What’s going on?

0:39:03
What am I…this, this…

0:39:08
So it’s not updating right here.

0:39:11
It’s not updating on this cards.

0:39:13
I’m not seeing anything update. So I’m going to just delete that. All right. So let’s look at this. You can see that. Okay. So position, absolute. All right. So you can see it here.

0:39:25
All right.

0:39:26
Both of them are position absolute. Font size, I just want it to be 1.2 rem. So now that I have that, I’m going to move to the next one. I’m going to say root.rm attributes featured. So I’m going to target the featured. First of all, I’m going to give it a background. And that background is going to take my primary. Okay, something is wrong. This has to be S. Okay, so that has that primary. And then the color is going to be white. I think we’re going to have white color for both of them. So let me just put them here. Okay, so the color is white there. We’re going to have a padding 1.8 rem. So the top will be the top bottom is 0.4 the left and right is 1.8 rem. And then I want the text transform to be uppercase. Right? They were uppercase before? Right? So both of them were uppercase. Did I type it as uppercase? Let’s see. Oh that is wrong. That is wrong. I wasn’t supposed to do that. Okay. I don’t know why I typed it as upper case, but it is wrong to do that because you don’t want to be typing those stuffs as upper case. You don’t want to hard, you know, code or whatever, type it as upper case. You want to use CSS to control the casing. Okay. So let’s do my text transform again. Alright, so that is uppercase. So I’m going to put it at the top of 0, okay? And that is because it’s absolutely position and then a left of 0. That is already where it is but I just want to make it a 50 viewport width. Okay so we have that. I’m not quite sure why it’s not just reflecting here. It’s only here. I believe it will refresh. It’s going to show up. So let me save this. I’m going to refresh the page right away. So let’s refresh Brics. And of course it shows. Okay. Let’s continue styling. The next thing is to style the cells. I’m just going to copy all of this. And then replace this word with cells. I guess that is it. So let’s see. It’s that cells, right? Okay. All right. Cells, we don’t want the same styling for that. So I’m just going to remove all of this. So we still have our cells there. The first thing I want to do is just to go in there and just put a text where the text is going to be. So let’s say 50%, because we’re going to have percentage, let’s say negative. So the sales, maybe you were having a discount, it’s going to be like negative 50% or negative 18%. So that is how it’s typically going to look. So that is going to help us with our styling. So I’m going to give it a left value. Remember, it’s still position absolute. I’m going to give it a left value of, let’s make it 100% for now. It’s moving it away from there. Before that, let’s give it a background. I want to give it a background of our secondary dark. I see it right there. I want to give it a width of, let’s say, 50 pixels. I have my 50 pixel width. I’m going to give it a border radius of 50 VW. But then I want to have an aspect ratio of 1. Aspect ratio ensures that the top, the border, the width and the height is the same. Now notice that we are doing all the styling on text elements. Remember that the text, even the text is a box, so you could style it as a div, like a box. So everything is a box. Remember Kevin’s class, everything is a box. So you can style them. So you may wonder, why don’t we put them in a div? You really don’t need to put it in a div. It is a box. So you can style it based on the box model. So we have this aspect ratio one. We want this text to be at the center. So what I’m going to do is I’m going to set it to display as grid. Surprise! You can set a text to display as grid and then I’m going to place the items at center. Okay, so that text is being placed It’s supposed to be percent. Now we want this to be at the center, top and bottom. So I’m going to come, now we have the left to be 100%. I’m going to set the top to be 0 and then I’m going to set the bottom to be 0. Okay, so the top is 0, the bottom is 0. Now normally, if the way we have learned this is probably you said that either the top or the bottom should be 50% okay and then you do a negative you do a transform translate negative you know in the y-axis but there are other ways to do that. So we do the top zero and then we do the bottom, not necessarily beta but easier way, zero. And then we’re going to do margin block of auto. All right. So what I’m doing is that I’m making the top zero, the bottom zero, and then I’m giving the margin up and down, which is the margin block of 0. Now we have this but we want to push it in to be at the center here. So instead of making the left a hundred percent which it pushes it across the width of the parent a hundred percent across the width that’s what the left hundred percent means on the left across the width but we want to use a calc function and then we’re going to be 100 negative the half of the width which is 25 pixel. So that pushes it half of the width which is 25 pixel. Now if you want to use CSS variable for this, you could also use it. So you use, let’s say you could declare dash dash width inside it, knowing that it is a very local variable. I say 50 pixel okay and then I would use these as var width okay I use that as var width okay var width and then I’ll copy that var width and I’ll put it here. The reason is now it makes that value dynamic so even if I want to go and change this width from here now but we we are not going to do var width so we’re going to do var width divided by two so I’m going to put a comma here put a comma sorry not a comma a bracket and then I’m going to say divided by two so it’s going to be half of the width okay so if I go up here and change that width to 80 you can see it still remains at the center. If I change it to 30, it still remains at the center. Okay, so I’m going to leave it at 50. Then I want to have a little bit of accentuation here because I don’t want this color to merge into the food color. So I’m going to give it a border of solid 3 pixel white. All right, so that accentuates that shape, you know, separating it from the food. So now as you can see, all these are showing on all the cards. So let’s save this and just take a look at the front end. Let’s close this. Let’s do that again. So, all right. So everything is showing here. We have all this. They are all showing. We want this to show only the featured. The ad, the watch should be featured. We want the featured to show only when it is featured and we want this percentage to show only when there is a percentage. So I’m going to come here and I’m going to go to conditions, going to add a condition, I’m going to choose dynamic data and then I’m going to do the same here. Come here. I’m going to add a condition. So it shows if featured is not equal to zero. What is going on here? I added a condition and everything just went okay. Let’s finish. So I’m going to come here. I’ve added a condition. I’m going to choose dynamic data. I’m going to select this featured and not featured. This time around it’s going to be on cell. On cell is not equal to zero. So let’s save that and check the front end. So it looks well on the front end. So now if it is not featured, you’re not going to see that featured and if it is not on cell, you’re not going to see the cells badge. Now we want a situation where the featured always comes first. So in each of the category, the featured will be the first item. So what I’m going to do is I’m going to go to that loop, okay? The card loop. And then I’m going to come here. I want to order by meta value and the key is going to be the name of the featured field. So that is going to be featured. The name was featured. Okay. That was the name. So let’s go back to the backend. Okay. Let’s take a look at the field I’m talking about. So if you go to MetaBox custom fields, and then we have our fields here, the slug of this field, see the ID is featured. So this is what, so whatever you had here as the ID is what you’re going to put in here. So if we save that and go to the front, and you’re going to see that all the featured come first before any other one. So that is it. Now we can see that our 50%, 50% is not exactly what we want. So there are two things we want to do. The first thing is to make sure that if it has, if it is on sales, the original price is going to be canceled out. So let’s go back. So still on the menu loop card, what we’re going to do is to go to the custom CSS. I’m just going to add a bit more styling to it. I’m just going to say root. I’m right radius L but things are overflowing as you can see we have that radius here I’m gonna say overflow hidden all right and then I’m gonna give it a border Solid 1px, Bar, Shade, Light. Alright, so I have that. Now for the featured, I want it to be slightly different. For the featured, I want it to be slightly different. As a matter of fact, let’s cut this. I’m supposed to give this a card. So I’m just going to say RM Menu Card. So I want to put that there. And all these are supposed to have their classes, you know? RM, RM menu, menu card, contents. Okay? And this is supposed to be RM, M, menu card, image, wrap. Okay. That image wrap. And yep. So first we’re styling this on the ID like that with position relative, but we could just move all these styles to the class. Okay. So this is position relative. relative is nothing no nothing there yeah just leave it leave it like that don’t start it don’t add something to it and this was 1 over 4 I’m gonna take that away from there and then and then I’m gonna say 1 over 4 yeah the same over 1, okay? 4 over negative 1. So I should have done this from the start but I already did that and 0.5 RAM is going to be on the 0.5 RAM. Alright. So if there’s any other style that I had on the ID which is padding here, okay, just that padding, I’m going to add it. All right. So we have that. So these are menu loop card. The custom CSS is going to be there. All right. So I’m going to go here and then I’m going to paste this. So we’re still going to have that styling there. So let’s save this. Somehow, for some reason, sometimes we lose the ability to see the style reflected. Even the refresh. Yeah, okay. That helps.

0:54:04
The refresh helps.

0:54:04
Okay, so let’s continue. Now, we want to be able to target the featured level and the price level based on whether this item is featured or has a sales class. For us to be able to do that, we’re going to go to the attributes, and then we’re going to create two attributes. The first one is going to be data cells, and then the second one is going to be data featured. And then the data cells, okay, the data cells is going to take a value of the cells, okay. So meta box, see meta box on cell, on cell, okay. Is it on cell or not? And then the data feature is going to take a value from, you’re going to write featured, meta box menus featured. So this is a data attribute value of featured. So what we are putting here is the field. Now this field, remember? This field and whether it is on cell or not. Okay. All right. So we have that. I’m going to save that. And then if we go to the front and I wanted to check something, let’s check this. So I’m going to select this card. This card has a data cells of zero. Remember, I said the switch always return one or zero, which makes it very easy. It has a data cells of zero, but it has a data feature of one because it’s featured. But the one that has cells has a data cells of one and has a data feature of zero because it’s not featured. So we’re going to go back to the custom CSS and then we’re going to use that to target everything that we need to target based on whether it is on cells or it is featured. Now I want to give first of all I want to give the the featured card a slightly different style. So I’m just going to say root I’m going to say data featured equals to one. Okay so all the CSS here is going to apply to only cards that are featured. I’m going to change the border color to the primary color. You can see just only the featured should have that see only the featured have that. Forget about this. What is displaying here inside Brics is not displaying the correct thing. Okay, so you can see only the featured have that. And then for the border bottom, okay, border bottom, I want to make it like solid 5 pixel, primary. Alright, so I’m giving the featured card slightly different styling. Now, what I want to do is to target the sales price. Now, if any card has a sales price, then I want the normal card to be slashed off. Then we want to target the price. Okay? So what was the class of the price? So let’s go back to that menu card. Now remember why it tells you you should label your stuff because once you have them expanded like this to be able to tell which one is going to be difficult. So we are going to select all the cards that are on sale and then we’re going to target the normal price okay RM price dash dash normal and and then we want to strike through. We want to cross out that price. So any normal price that is inside the card that has a cell has to be crossed off. So I’m going to say text decoration line-through. Let’s see. Is it working? Okay, yeah. So you can see it’s working there. You can see it’s working there. But we want to increase the line thickness. So line through then give it space and write 2px so it makes it a bit thicker. Alright so you can see it crosses out. So I’m going to take the front end. Let’s see what is happening here. Alright so we see that we have that crossed out. If I want to change the color of my price I’ll just come here and just say root RM price. That’s going to change the color of both of them. I’m just going to say color, bar, secondary, this just says bar secondary. I think that is too bright. I’m just going to say bar secondary dark. Maybe medium. Something like that. I’m going to save that and see the front and everything looks good. So, what is remaining is two things, making this percentage to count and then putting the filter. To make this percentage to count, we’re going to use PHP. I’m going to head over to a code block. Let’s go to the backend. I’m going to go to my code block and then I already have this percentage, sales price percentage. So I’m just going to put here sales percentage. I don’t do PHP, I don’t write PHP codes, but I was able to get this working. One of the ways, what I did was I used AI, I used ChatGPT to get that working. I’m going to show you what I did with ChatGPT. And ChatGPT did not give me the correct thing, it didn’t give me everything. I’m gonna show you what it gave me. So let me see if I can pull that up. So I think I should show you this because this is part of the learning process. You know, this is the age of AI. So a lot of you will be using AI to do stuff. So what I said was I created two custom fields with Metabox price and ID, price with ID price and sales price with ID sales price. And I need a function to return the percentage of the difference in value between the two custom fields I created and then it gave me this function which obviously did not work okay so what it’s doing is that it’s trying to store the price value inside this variable and it’s trying to store the sales price value inside this so that was the only thing it didn’t get you know because it really doesn’t understand how to get you know the right expression to use here. So what I did was this. Now I’m going to take this out. I went to MetaBox where we had that and then remember what I was showing you to the fields. I’m going to go to the field and then for the price, okay just come down here for the price, you can see that okay so this is kind of returns it as a real number not a string so that you can use it in calculating. So what I did was I just replaced this with the value with what MetaBox gave. So I still use the float value and then I replace everything that was inside there with what we had here. So the value is our WMB meta price. So not the value. Just if you want to get the value, you want to display it, this is it. If you want to get it. So I was trying to get it. All right. So I just replaced that here and here and then finish up the calculation. Now what we did was here. So what you’re going to take note is this is the function name and this is the argument in the function. So what I did here was I went back to Bricks and we’re going to do that. So let’s just do it. So here what I’m going to do is. I’m going to delete this and then I’m going to add a dynamic value, but I want it to be a PHP return function. So PHP output function. Then I’m going to come here and paste it there. So that’s the name of the function. Then we want to pass in the arguments. Remember this argument, this postId argument. So what I’m going to do is I’m going to open and close a bracket. And inside that bracket, I’m going to open and close a curly bracket. So open and close a curly bracket and then I’m going to bring in that argument which is the post ID and I’m going to place it there. So that is going to return that value. It’s going to return you know the percentage that it has calculated. The difference between the sales price and the normal price. So I’m going to, it seems not to be showing here, but I’m going to save this and let’s look at the front end and see. Alright, it’s not showing. Something is wrong. Okay, something is wrong because we’re not supposed to use this, that symbol. That symbol is not supposed to be there. So I take it off, alright? And then let’s save it again. So you don’t copy everything. You just copy, just write the post ID. And then we will go there. You can see that we have this showing properly. So this shows 53%, 38%. This is 17%. This is 55%. So what was 50%? Okay, so you can see 10, 20. This is exactly 50%. So it shows that everything is working properly. So that leaves us with just one thing, to filter it. Now to filter it, now this is optional for people who would want to filter it, but I think it’s really, really useful. I’m going to be using GridBuilderWP to filter this. But one thing I noticed is that when you have nested loop items like this, the GridBuilder filter does not recognize the one inside. So it’s going to be able to filter the top level, just like I’ve shown you in my example. So it filters whether it is lunch, only it’s going to show only the lunch, it’s going to show only the starters, it’s going to show only the dinner and all. But it can’t go in and start filtering individual ones inside them. I think that is a limitation, a feature that is not yet there. I hope that is going to be included in the future versions or somebody will come up with a nice snippet to be able to do that. It might require a little bit of custom code which I wasn’t able to quite figure out yet. Okay so we’re going to go to the back and then we’re going to go to grid builder. So I have a grid builder here and what you’re going to do is to create a facet. Now, so I’m going to go to facet. You call this facet or faucet? I don’t know. I already created one here. So I’m going to create another one. So I’m going to create a facet and then I’m going to call it food menu category. Okay. And you can enter a title or not. It’s not necessary. I’m going to come here to the behavior and I want it to filter. I want it to be button. And then under here, I’m going to choose WordPress field. And then under WordPress field, I’m going to choose term field. And then it’s going to be term name. I don’t want it to show empty choices. I don’t want it to show count. And then I’m going to save this. And that will mean that when I get to Bricks, I will have to refresh Bricks Builder. And once I refresh Bricks, I’m going to come all the way here. I think I want to add another container at the top here. So I’m going to insert a container. Sorry, did I do wrap with container? That is wrong. Insert a container. I’m going to move that. So this is going to be my filter. I’m just going to drop in the facet okay from gridwp. So you have to have grid builder to you have to have it installed. So if you come all the way down here you’re going to see grid builder okay grid builder you have that. Okay so I’m going to select that now the name the one is fine it was food menu and then I want to select the element that I want to filter which is the id of my category loop. My category loop is UCYDSD. I’m going to come here and select UCYDSD. And it’s showing up here. All right. So I just want to move this, make it centralized it like that. I’m going to save it and then we’re going to go to the front end. And it should be showing up. So let’s close this and open that again. All right. So it’s showing up here. So if I click Dinner, it’s going to filter and show only dinner. If I click Lunch, it’s going to filter and show only lunch. If I click Status, it’s going to filter and show status. So I guess that brings an end to this video. Like I said in the beginning, this is not just about restaurant menus. It’s about understanding what you can do, the possibilities, all the things that you’re learning here. You’re going to be able to use them, okay, in any other type of project that requires you grouping things in categories, styling things based on the field value, using data attributes. Like I said, if you want to move this stuff, if you want to move the styling like this loop, like I have stylings here, okay, I have stylings here, if you want to move them, so I can copy all of these out to an external stylesheet but when you copy them out you’re going to replace these roots with the selector in this case the class name here RM-menuCard you’re going to replace so any any style you copy out for it to work in an external code editor an external stylesheet or your code manager the word root has to be replaced with this this selector that you had this style on so every other thing here that you had a style on that you use root, you can safely move it away and then change that root to that selector that you were styling. So that’s all. The reason I styled it right here is because I don’t want to be going back and forth. It’s just my style. I don’t always like going back and forth with stylings. I want to do everything right where I am. So if you have any question, you could ask it in the comment section. I’ll be checking by to see if I have any response to them. So let’s recap the things you’ve learned. The last thing that you’ve learned is, so we have learned that you can use chat GPT to get help with what you need. Personally, I wouldn’t be able to write that script that brought out this percentage because I don’t do PHP. I was thinking of using JavaScript to do it, but I thought that PHP is the best way to use to do it. So I decided to use Chats GPT to check and then checking that documentation in MetaBox, where I was able, it’s just this information really helped. Without this information, it’s really nice that MetaBox included this. If I did not have this information, I wouldn’t be able to know that this is what I should use you know to replace the values that chatgpd gave me. You’ve also learned how to group post items. So this works for post products if you’re building a WooCommerce website you could group your products based on the categories just like this. You could group them based on the categories. If you are doing a post you know a WordPress blog site you could group your categories. You could group your post as your article based on the category. So this applies to everything. If you have custom fields, you could style your different articles whether they are featured, you have featured products, you could style them based on the custom fields whether they are featured or not. So this is very handy for different kinds of projects. And I do hope you’re going to be able to use it to do something very soon. And if you do something with this, I’d like you to post it in the comment section. So post a link to the project that you used the knowledge you got from this video, this tutorial to make. Post a link to that project and let’s all see the kind of things, the wonderful things that you can do with it. So until next time, have a great day. So until next time, have a great day. Bye.