‫Welcome back, my dear students.
‫And now in this lecture of the course, we will be working with our categories, uh Archive Dynamic
‫Page Design.
‫So let's just go ahead and let's get started.
‫First of all, you need to make sure that you are in the theme customizer.
‫And if you visit any of the category or the destination, anything you can see that we have got uh,
‫our post being shown.
‫Similarly, if you go into the category and you choose any of the category, then all of the posts that
‫are inside that particular category will be shown to you.
‫Let me select activities so that we get some more.
‫All right.
‫Now what we need to do, we need to go ahead and we need to design this.
‫So first of all you need to go ahead and click on the categories.
‫And now we are in the categories right here.
‫Now here it says the page title.
‫So let me just open the categories right over here as well.
‫So I'll be opening the activities category so that I can also see what I'm doing.
‫All right.
‫So first of all we need to say that if you if you want to show the title or hide it, if you want to
‫hide it, you can hide it.
‫But it's not recommended because otherwise how will the people know that which category they are they
‫are on, or which destination they are on.
‫So you need to make sure that you do allow it.
‫And now you can see it says category activities.
‫So there is no difference.
‫Like people should know that this is actually a category and the category name is activities.
‫So how you're going to do that you can click on the arrow.
‫And then we have got this uh title.
‫So if you click on here it says Archive label.
‫If you want to hide this like the category you want to hide this and you want to only show the name,
‫the title of the category or the destination, then you can hide it like this.
‫And it's only going to show the activities.
‫However, I do not like it this way.
‫I want to show it, but I want to use this type two design and if I do it, then you can see that category
‫is now smaller.
‫However, this activities that you see over here is now a bigger, so that person can actually see it
‫and understand it easily that this is actually a category which is activity.
‫Now let's just go ahead and let's go down.
‫We have got the description.
‫So if you will add any of the description to this category, like if I were to edit this category and
‫if I were to add any of the description over here, that is going to be shown.
‫But I do not want to add it, nor I want to show it, so I will hide it.
‫All right.
‫It's up to you.
‫If you want to show it, you can show it.
‫Then we have got the breadcrumbs.
‫If you click on here, it's going to show people like you.
‫Or you can go back to the home page as well.
‫So I'll be keeping it to the eye over here.
‫So that person can actually see that if they want to track back to the home page, they can do it from
‫here.
‫Or they can click over here.
‫It's up to you if you want to show it or not.
‫Then we have got the horizontal alignment which is set to text center.
‫You can keep it to be left.
‫I'll be keeping it to be text.
‫Then we have the vertical alignment which is also set to center.
‫You can set it to top, middle and bottom.
‫I'll be keeping it to be middle.
‫Then we have got the container width which is set to the narrow.
‫Now if you want this horizontal alignment to be left, you can also set the container width to be default.
‫And then you can keep it to be left.
‫And this is going to be fully left.
‫All right.
‫Like before when it was set to narrow.
‫This is how it was being shown.
‫All right.
‫So it's up to you how you can play with it.
‫However I want to keep it to be default and I want it to be center aligned narrow and center aligned,
‫which was the default.
‫All right.
‫Then we have got the minimum height, which is going to decide like how much of the height is going
‫to be for this particular, um, activity, uh, this title.
‫So what you can do, you can increase it.
‫This is going to be increase.
‫You can decrease it.
‫This is going to be decrease.
‫It's up to you how you want it.
‫So I'll be just keeping it to be default.
‫I think it was 200 or whatever.
‫This seems fine.
‫Now let's just go ahead and let's go into the design tab.
‫So in the design tab I just only want to work with the container background.
‫So I'll be clicking on here and I'll be keeping it to be.
‫And I also want to change the link.
‫This is the one.
‫This is the link initial.
‫I'll be going ahead and I'll be keeping it to be black full black, dark black, the font color.
‫I'll be keeping it to be a light one.
‫And the link color I'll be keeping it to be that on hover this can become same light gray.
‫Now we are fully done with this design.
‫So now what we have to do, we have to work with this, which is the cards.
‫Now the cards are really similar.
‫You can watch the previous lecture and you can do it uh, similarly you can also work with the structure
‫as well.
‫Like let's suppose it on the categories and destination.
‫You need a different structure.
‫You can do it.
‫I'll be keeping it to be default.
‫In the previous lecture we selected the enhanced grid the number of posts we'll keep it to be ten,
‫the top and the bottom spacing.
‫We will definitely add it.
‫It's really good.
‫And then we have got the sidebar.
‫If you want to add it you can add it.
‫We have a dedicated lecture for the sidebar where I will be explaining you how sidebar works and everything,
‫so we're going to be talking about that later.
‫Let's click on the card options and let's work with it really very quickly.
‫So first of all I need to bring the featured image right here.
‫I need to click on here.
‫And then I need to set this to 16 by nine which was set by the D which was set.
‫We did it already in the previous lecture.
‫Then we have got the title I need it at the top.
‫Then we have got the post meta.
‫Now here um, you can also show the destination as well.
‫So what you can do, you can click on here and then you can clone this.
‫And then you can bring this taxonomy up over here one level click on here.
‫Choose the destination.
‫Click on the style and select button which is going to also show the destinations as well.
‫And then you can.
‫Hide this post.
‫Mentor.
‫I want to hide this and this is our card.
‫Ready?
‫We didn't do any of the change in the cards gap and the inner spacing, so we'll head over to the design
‫tab.
‫Now we are in the design tab I need to work with the button font which was this.
‫And I'll be selecting this to be a light gray.
‫And on hover I'll select this to dark gray which was this the link color uh title font color.
‫So on hover I need this to be full black, which was there by default.
‫So let's keep it to be a light black on the hover.
‫Then we have got this link color.
‫So the meta font color which is this initial and the hover.
‫So let's change the hover to be full black.
‫So there you have it.
‫Everything seems to be working perfectly fine.
‫After that, we have got the card background color.
‫So let's work with the card background color, which was set to, I believe this one.
‫Then we have got the card shadow you'll click on here.
‫We will change that to black and increase the shadow a bit.
‫And this is by far amazing.
‫Similarly you can also apply the border radius I think I may be forgotten.
‫I may have forgotten that if you need it in full square you can click on zero.
‫It's going to be fully square if you need um, like 20.
‫If you do 25 pixels, it's it's going to be actually uh, give a rounded effect.
‫Now similarly you can do some other stylings as well.
‫Like let me show you.
‫So I'm going to unlink the values.
‫Top is going to be 25 right is going to be zero.
‫Bottom is going to be 25.
‫Left is going to be zero.
‫Now see it.
‫This is curved from here.
‫All right.
‫This is curved from here.
‫And this is curved from here.
‫Now from this side and this side it's now like this.
‫So if you need this kind of design and you want to play with it, you can do it, uh, like that.
‫So now this, uh, thing brings this lecture to the end, because now we are fully done with our archive
‫pages as well.
‫Let's hit on publish.
‫Let's visit the website and let's see how it looks.
‫So now this is our home page which is looking good.
‫However, we still want to do some changes which we will do later on in the upcoming lectures.
‫After that we have got the other archive pages, dynamic pages.
‫If we go into our activities, this is how it's looking.
‫And if we go into our destination like any of the destination, the main destination, and this is how
‫it's looking if we go inside the Europe, like if I were to go into Chicago, then you can see it's
‫like this home America, Illinois, Chicago.
‫So this is how it's being shown.
‫It's and it's giving a great effect.
‫Now there is one thing that I want to add here.
‫You can see that inside the destination it's just destination slash Chicago in the URL which but we
‫are actually inside the Illinois America, Illinois and in Chicago.
‫So if we go into the categories and if we go into stays and we select like Airbnb, now you can see
‫it's actually category slash stay slash Airbnb.
‫However with the destination, if I go into Chicago it's just destination slash Chicago.
‫So it should be like a destination slash America slash Illinois slash Chicago.
‫So how are we going to implement this.
‫So that in the URL as well it should be like this.
‫Because this is really, uh, important in terms of SEO.
‫So how are you going to do it.
‫You can uh, go into the dashboard and then you can go into the CPT UI, click on Add Edit taxonomies.
‫This is the taxonomy.
‫Remember this is the taxonomy that we added in our previous lectures.
‫You can click on the edit Taxonomy destination.
‫Go down and you should see this rewrite hierarchical which is set to uh false by the default.
‫So you need to click on here and you need to set this to true.
‫That's it.
‫You don't have to do anything else.
‫Click on the save taxonomies now when you will visit the website.
‫And now when you will click on the destination you will go deeper.
‫Let's suppose we are in the Chicago now.
‫It's destination slash America, slash Illinois, Chicago.
‫There is one more thing that you need to do.
‫Make sure that you go into the dashboard settings, and then you go into the permalinks and make sure
‫that this is set to post name and click on Save Changes.
‫Otherwise it's not going to work properly.
‫So now we are fully done with our destination and categories pages as well.
‫From the next lecture of the course we will be working with our single post design.
‫So stay tuned and bye bye.