7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 1.5 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Create the Second Row of Tours

We’ll now complete the definition of our custom post type by adding a second row of “tour” categories. We’ll also finalize the addition of content into our custom “landing page” entry.

3.3 Create the Second Row of Tours

Hey, welcome back to building Gutenberg template layouts without JavaScript. In the last lesson we finished setting up the first row of tour categories that are gonna appear in our custom post type, now we're gonna add in the second row and then we'll be ready to insert the content into this post. Because we were sure to setup this template quite neatly and readably, it's not gonna be very difficult for us to duplicate the first row that we created and then just tweak it to create a second row. So we can see that our tour categories, row one array is here. So I'm gonna copy this whole lot of code. So I'm gonna remember to add a comma and I wish it wouldn't change up my indentation, but there you go. And now I'm going to paste all of that code in here to create another row, change the comment to row 2 so we know where we're at in our template. This time, we're gonna increase the number of columns we're gonna have to three. We change this comments to say, tour category rather than feature tour category, and same thing down here. We know we wanna have three categories in this row, so let's just copy all of this code including this comma and paste it in here. Now we're gonna need to change up our class names, so this is gonna be our third entry. So we're going to say tour_cat_three, tour_cat_four, and tour_cat_five, and that, assuming we have no errors, we'll save. Yay, no errors, that is our completed book template. So everything is in there that we need to drive what we're trying to build on the front end. Now let's jump back into our custom post. We're going to refresh once again. Reset the template. And there's our extra three rows. So now we can go ahead and transfer the content from here into this post here. So if you were building this out for a client, or a friend or whoever, to use, this is what they would see. And from this they can get a pretty good idea of what they're supposed to insert in each of these areas. So we can go ahead and start uploading the images that we wanna use, so we wanna go into the images directory of the coded up HTML page from the previous course, Figma to HTML. So I'll go through and show you the images that you need to upload, we need Rome, in the first slot, barcrawl in the second slot, then Paris, arttour, and Iceland. Then you can go ahead and copy over the text from each of the sections, so first one needs to say 15 tours. So click on the button. We're just gonna put a hash as a placeholder button link. Then we can add in our text and just say 15 tours and copy over the text from here. And then go ahead and do the same thing for each of the remaining categories. When you've done that, you should end up with content that looks like this. So with each of our little bits of text explanation, with our buttons filled in with the correct text, and with all of our images saved. So I'm gonna update that to make sure we don't lose what we've added. Now, you can see that what we have in our backend is a very nice parallel to what we're gonna have on our frontend. As I said, it's not exactly the same, but it's certainly clear enough to make sure that if you're building this for someone, so that they can come in and they can change out the images, they can change out the button text, and they can change out the description text, they're going to be able to look at this and see which piece of content correlates with the frontend. So now that we have finished our template of Gutenberg blocks, and we've finished styling up how everything appears in the backend here, we're ready to start outputting it on the frontend. Right now, we just have a bunch of messy content. So we need to go ahead and create our filter so that we can output this content in the way that we want to with the mark up that we want to, the CSS styles that we want so that we have control over how this content looks in the front end of our site. So in the next section of the course, section four, we're gonna filter this Gutenberg content with our own custom filter, and we're gonna start by setting up a default filter that we'll apply equally to all of our blocks before we go ahead and do specialized filters for different purposes. So we'll start building up that filter in the next lesson. I'll see you there.

Back to the top