‫In this lecture of the course.
‫We will be now working with the widgets for our sidebar.
‫So let's just go ahead and let's get started.
‫Now as you can see that in the previous lecture, we incorporated the sidebar on all of our single post
‫pages that we will be creating, like whatever the new page that we will be creating for the post that
‫is going to incorporate the sidebar functionality.
‫Now in this lecture of the course, we are going to be designing the sidebar by using the widgets.
‫So let's just go ahead.
‫Let's go to our widgets page and let's create our sidebar.
‫Now in order to do that you need to go into the widgets.
‫And now once you are on the widgets page, you can see that this is now the main sidebar.
‫So now let's just go ahead and let's design some of the things.
‫Now, whenever you want to design your sidebar, make sure that you do it group wise so that each of
‫the group can be considered as a widget.
‫Now for that, what you can do, you can just click on Add Block and once you are in here, you can
‫click on group.
‫And this group is going to be added.
‫Now what we will do is that we will select a one single container.
‫And inside this group I will click on Add block.
‫And now I will select heading from here.
‫Now you can see that the heading is added.
‫And I will say about me.
‫After that I need to hit on enter.
‫It's going to take me to choose another block.
‫For this time.
‫I'm going to be choosing an image block.
‫And then I need to click on the media library.
‫And after that I'll be going ahead and I'll be dragging the image that I have and I'll be dropping it
‫right here.
‫Now let's suppose that I want to add this image.
‫I will click on select and this image is going to be added.
‫Now once this image is done I will hit on enter so that it takes me to a new line.
‫But since this is another type of block I cannot hit on enter, I can just click on plus and then I
‫can click on heading and the heading is going to be added.
‫Now I will enter my name and after that I will be adding a little bit of paragraph.
‫So now you can see that this is my About Me section which is ready.
‫And now if I just click on the navigator then you can see that this is a group.
‫And inside this group I've got a heading image, uh, the heading, another heading and a paragraph.
‫Now what I want to do, I want to style this.
‫So what I'll be doing for that, I'll be selecting this group and then I will go into the styles.
‫I will select the background and I will be applying a background, uh, color to it.
‫So let's just select this color.
‫Let's see how does this look.
‫How does this look.
‫You can choose any color you want.
‫So let's suppose that I want to go with this particular color for the About Me section.
‫Now once I'm done with that I'll be going down and I will be working with the block spacing.
‫So I will be decreasing that a bit.
‫Not much.
‫Just keep it to be one.
‫And the image.
‫Now if this image is much more bigger in size, you can work with the width resolution to make it smaller.
‫All right.
‫So now once you are done with the image sizing and everything and you have got the perfect size, then
‫I'm going to be going into the styles.
‫I will select this to be rounded.
‫And it's going to be converted into a rounded like this.
‫After that I need to align this image in the center.
‫So I will be clicking on here Align Center.
‫This is now Align to Center.
‫Similarly I'll also be working with this heading.
‫I will change this to heading three and I will align this to the center.
‫And I will also be changing the text color.
‫So the so the text color is going to be white.
‫Similarly for this particular paragraph as well, I will align the text to the center and I will work
‫with the white color per paragraph over here.
‫So now you can see that everything is done.
‫We just need to work with this particular heading.
‫So I will also change this to white.
‫And now let's go ahead and let's hit on update.
‫All right.
‫So now once the page is updated now if you go ahead and you refresh this you can see that this is how
‫it looks.
‫We've got a heading about me.
‫And this is everything about our self.
‫Now if you want you can add much more things.
‫If you want you can add the social icons over here.
‫It's really very easy how you can do it.
‫So let's suppose that you want to add the social icons.
‫You can just hit on enter, type slash and then type in their social.
‫And there is a social icons.
‫All right.
‫So you can click on that.
‫Here is click plus to add an icon.
‫So I'm going to click.
‫And let's suppose that I want to add the Facebook.
‫So now this is the Facebook that is added.
‫And if I click on here I can enter the address like my Facebook profile link.
‫So let's suppose that I want to add a dummy link.
‫I'll just hit on hash and that is going to be added.
‫And after that I want to add another icon.
‫So I will just click on outside.
‫And now let's suppose that I want to add the Instagram.
‫Just click on here it's added.
‫And now I can add the address of that.
‫Similarly I also want to add the LinkedIn.
‫It's added.
‫And now I can click on here add a hash.
‫This link then is also added.
‫Now once I'm done with everything, I can just click on the social icon block.
‫And now I can align this into the center.
‫So instead of working with here you can see that we have got this justification.
‫You can align or justify the items in the center.
‫And you can see that this is how it is.
‫Similarly you can work with open links in new tab, show the labels.
‫If you want to show the labels you can show it like this.
‫Then if you go down there is the icon background color, the pill shape logos only.
‫Bill Shea.
‫Whatever you want to go with, you can work with that.
‫All right.
‫Now, if you go ahead and you hit on update and if you refresh the page.
‫You can now see that this is how it looks.
‫So you kind of get the idea of how it's going to be working.
‫Now, since I do not want to add the social links, I'll be going ahead and I'll be getting rid of it.
‫Now, if I were to actually get rid of the name, like the Facebook and Instagram, like the labels,
‫and then I hit on update, you will see that it will look much better compared to what it was looking
‫before.
‫So now it looks good.
‫If you want to use it then you can use it this way.
‫However, since I do not want to use it so I'll be removing this.
‫All right my dear students.
‫So now we are fully done with the About Me section.
‫So I'm going to be going ahead and I'm going to be clicking on this group.
‫I will click on rename and I will change this to About Me.
‫And now after that I will click on save.
‫And you can see that this is now done.
‫Now once I'm done with it I will just exit out of this.
‫I will click on About Me and after that I will click on plus.
‫And now I will search for group.
‫Now this is a group.
‫So I will click on here and the group is going to be added.
‫Now after that I will click on a one single container.
‫And after that I will be adding the things in here.
‫So first of all I want to add a heading which is going to be the latest post.
‫All right.
‫And after that, I want to show the latest post right over here.
‫Now how you can show the latest posts.
‫There are a few things that you can use.
‫So first of all, you can just click on here and you can go down.
‫And here in the widgets you should see this latest post.
‫So if you click on here you can see that the latest post is now added.
‫And now what you can do you can just click on here display featured image.
‫It's going to show the featured image as well.
‫Display post date display the author name.
‫It's going to show that display the post content.
‫It's going to show that.
‫So you can do it like this like how you want it to be.
‫And then there is the image alignment.
‫Like you can set this to align left.
‫So you can now see that this is how it works.
‫And you can make it look good.
‫Like let's suppose that if you need this heading and you want this heading to be much more bigger in
‫size.
‫And so I'm going to be going into the style.
‫So let's select large.
‫You can see that this is how it is.
‫So you can go ahead and you can create and design your post like this.
‫Now let's suppose that if you do not need it like this, or you need it the custom way, then how you
‫can do it for that, you can just click on this options, click on delete and then click on plus.
‫And after that you need to go down.
‫And you should see this advanced post of the blog see.
‫So you can just click on here.
‫It's going to show you like whether you want to inherit from the customizer.
‫So if you inherit from the customizer it's going to show you that layout which is not going to look
‫good.
‫So if I just click on inherit from the customizer, you can see that this is how it's looking.
‫So these three aren't that much looking good.
‫So instead what you can do, you can say that I want to show only the two post.
‫Then it's going to look good.
‫But on the website it's not going to look good.
‫So if I were to save this and if I were to go back to the page and if I were to refresh, you can see
‫that now this is how it's actually looking, which is not looking good.
‫So what I want to do, I want to design this my own way.
‫So how can I do that?
‫For that you just need to.
‫Delete this.
‫So let's click on delete.
‫And now let's hit on enter.
‫Let's search for post the same advanced post that we want to add.
‫And instead of inheriting it from the customizer, we will be saying that we want to create a custom
‫layout.
‫So we will say that we want a custom layout.
‫Once that is done, this is something that is going to be already added over here.
‫So text everything and we can customize it the way we want.
‫So now let's suppose that first of all we say that we do not want the heading.
‫So we will select the sorry the date.
‫So we will select the date and we will click on this options.
‫We will go down and we will hit on delete.
‫We also do not want to show the description the excerpt the post excerpt.
‫So we will click on that and we will delete that as well.
‫We just want to show the headings for now.
‫And this is how the heading is.
‫All right.
‫But also we want to do some more things.
‫So what we will do is that first of all I will click on plus.
‫And then what I will do is that I will go down and I will say that I need a group, but of this group,
‫I need it to be based on this horizontally.
‫I need them to be assigned horizontally.
‫So I will click on here and this is going to be converted into a row.
‫Now what I will do is that I will click on this plus.
‫And in here I will be adding the featured image.
‫Now the featured image, whatever the featured image of this is going to be, this is going to be.
‫It cannot be just like added by adding the image and then just saying it.
‫There is another way of doing that.
‫So you need to just click on browse.
‫All go down to this block see and you can see that we have got this dynamic data.
‫So you just need to click on that.
‫And it's going to be added over here.
‫This is our dynamic data.
‫Now once you're done with that you can just select this content source from title to actually the featured
‫image.
‫If you click on that it's going to be now converted into the featured image.
‫And you can see that this is the title, this is the image which is now being shown.
‫And this is how it looks.
‫So now what I need to do I need to click on this image settings again.
‫And then I need to work with the.
‫Width and the height.
‫So first of all, what I will say is that I need the width of the image to be smaller, so I need it
‫to be 30% of the entire widget space.
‫So like this is the widget width.
‫Now I need the image to be of the 30% of that, and after that I need the title.
‫So what I will do is that I will select this width instead of the pixels.
‫I will click on that and I will say that I need it in percentage.
‫And now I will say that I need it to be 30% of that.
‫And now you can see that this is now 30%.
‫After that I need the heading that is in here.
‫I need it after this.
‫So what I will do is that I will click on here.
‫This is actually a row and this is the dynamic title.
‫Now if I just bring this dynamic title right after this then see how it works.
‫So if I just bring this dynamic title and I just add it right in this row, and now you can see that
‫how it's it designed and how is it looking now the reason for that is because our row is stalked horizontally.
‫If I just say that this is a group, then this is how it will be.
‫If I say this is a row, this is how it will be.
‫If I say this is a stack, this is how it will be.
‫So I'm saying that this is actually a row and that is why this is how it looks.
‫All right.
‫So now once you are done with that then we will select our dynamic title.
‫And we will say that we need this to be actually a heading level three or a heading level four.
‫And now let's hit on update.
‫Let's just go up to the website and let's refresh.
‫And now you can see that this is how it looks, which looks kind of good by the way.
‫So now once I am done with this I'll be going ahead and I will be applying the links.
‫Because now you can see that if I just click on here, nothing happens.
‫It's just a text.
‫If I click on the image, nothing happened.
‫It's just a text.
‫So what I will do is that I will say that this particular dynamic title that we have in here, I need
‫that to be linked to the post.
‫So if anyone is going to click on that, he should be taken to that particular post.
‫Similarly, the image that I have, I need that to be linked on the post as well.
‫If you want, you can open it in a new tab.
‫Whatever you want, you can work with that now.
‫Similarly, instead of 30%, let's just increase that to 35%.
‫Let's update.
‫And now let's just go ahead and let's refresh.
‫And now you can see that this is how it looks.
‫If I just click on here it's going to take me to that particular post.
‫So now this is our latest post section that is also ready.
‫And now if you were to go ahead and if you were to unlink this group or just collapse this group, then
‫this is our full group.
‫Now what we will do is that we will select this group.
‫We will.
‫So let's select the group, go into the style, go into the background and I'm going to be selecting
‫this to be white color.
‫After that I'm going to hit on update.
‫And now if I were to go ahead and if I were to refresh this, then you can see that this is how the
‫color is.
‫And it's going to be like this now.
‫So if I refresh, you can now see that this is how it looks.
‫So if you want you can also do it like this as well.
‫Now since the headings are much more bigger in size as well right now.
‫So I'll be going back to the website, select the dynamic title and I will say that I need this to be
‫the heading level five.
‫I will hit on update.
‫And now if I refresh this you can now see that this is how it looks now.
‫Similarly, it is not necessary that you should be selecting white.
‫The reason why I've selected white because this is the one that is gray.
‫This is the one that I need the user's attention on.
‫However, this is the one that that is normal.
‫So if the users see it, it's okay.
‫If the user doesn't see it, it's also okay.
‫So if you want if you want to choose a different color, you can do it by going to the group.
‫Go into the styles, select the background and let's just select this one.
‫And now let's hit on update.
‫And now if you were to refresh this.
‫So now you can see that this is how it looks.
‫All right.
‫Which looks good by the way.
‫So I'm going to be going ahead and I'm going to be switching back to the color.
‫Let's just choose a different color which is going to be a grayish but a light gray.
‫Kind a bit like this and I will hit on update.
‫And now if I refresh.
‫You can now see that this is Aridus, which looks much more better, much more professional, considering
‫that we are using the black and white and gray theme throughout the website.
‫Now, before adding another one, let me just share with you something.
‫So now you can see that the images are like this, not aligned.
‫The text is like this, like whatever the bigger text is, it just just making it bigger.
‫And the image is shifting right here.
‫So how we can go ahead and how we can make sure that everything looks align for that.
‫What you can do is that the image sizes, we have defined it, but we haven't defined the text size
‫like how much the text should go.
‫So what you can do, you can go back to the widgets, select your heading or the link which is a dynamic
‫title, and then you can go into the styles.
‫And after that in the dimensions you can say that this is actually fixed.
‫And now, once you are done with that, you can specify a width, not in pixels but actually in percentage.
‫So for the images we are actually using 35%.
‫Now for the text we are going to be using 100 -35%, which is I believe going to be 65%.
‫So let's enter 65%.
‫And now you can see that everything looks aligned.
‫And now if you were to hit on update and if you were to refresh this page, you can now see that this
‫is how it looks.
‫Everything looks perfectly.
‫Now align the images and also now the text.
‫Now we are fully done with this particular widget.
‫Now let's just go ahead and let's move up and let's create another widget.
‫So for that you're going to go ahead and you're going to first of all rename this group.
‫So let's rename this to the latest.
‫Post and now we are going to collapse this.
‫After that we need to create another group.
‫So let's first select this group so that whenever we create another group it just it is created right
‫after this.
‫So I'm going to be clicking on this plus select for a group.
‫Select the group.
‫This is going to be added.
‫And now I will be selecting the container.
‫So let's suppose that I need this one which is going to be added.
‫After that I need to add a heading.
‫So the heading that I want to add is going to be destination.
‫So let's add the heading which is right here I'm going to click on the heading.
‫And I'm going to now search for the dist or sorry add the destinations which is the heading.
‫Now once this heading is added.
‫After that I need to add the destinations.
‫So I'm going to add this.
‫I'm going to just enter this.
‫And then I need to click on this particular plus.
‫And now let's just go ahead and let's see if there is a destination widget that is available.
‫So on searching for destination there is no widget available.
‫And if I were to go down then I believe there is going to be the categories list.
‫So if I just click on here, the categories list is here.
‫Now let's see if there is an option to change this category into the destination.
‫Because the destination and the category both are taxonomies.
‫Now, unfortunately, at the time I'm recording this lecture, there is no option for us to convert
‫this categories, which is a taxonomy, into a destination.
‫So what I will be doing is that I will be deleting this and instead I will have to create another menu.
‫Now let me share with you what I mean.
‫So I cannot add the destinations, but I can actually add the menu.
‫So if I were to hit on enter and if I were to type slash and if I were to search on menu, you can see
‫that there is a navigation menu that I can add over here.
‫I can click on select menu.
‫And let's suppose that if I select menu one.
‫And now if I hit on update.
‫And now, if I were to refresh this website, you can now see that I've got this home about categories
‫and which shows activities.
‫And then it shows the destination.
‫So let's suppose that instead of actually adding this as well, what if we create our own separate menu
‫where we could show the destinations like this from here till here?
‫How we can do that?
‫It's really simple.
‫All you need to do is to go into your menus and once you are in the menus, here is the menu that is
‫created already that we created.
‫Now we will say that we need a different menu.
‫So we will click on create a new menu.
‫We will say that this is the destination menu and we will hit on enter.
‫After that the menu is going to be created.
‫Now what we will do is that we will select the destinations.
‫If you do not see it, you can click on the screen options.
‫Make sure to check this destination.
‫All right.
‫So now what I will be doing is that I will be clicking on view All so that I get the destinations in
‫order.
‫And then I will click on Select All and I will click on add to menu.
‫And you can see that the destination is added.
‫Now since this is a child this is a sub child of child.
‫This is a main one.
‫This is a child.
‫This is a child, this is a child.
‫This is a main one.
‫This is a child, this is a child and this is a child.
‫Now this is the main one.
‫This is a child, this is a child, this is a child.
‫This is the sub child of the child.
‫All right.
‫So this is our now destination menu which is set up.
‫Now we're going to go ahead and we're going to hit on save menu.
‫All right.
‫So once you are done with that then you can click on the widgets to go back.
‫And now once you are on the widgets now you need to go down and click on this menu instead of the menu
‫one.
‫Select the destination menu.
‫And now you can hit on update.
‫And now if you go ahead and you refresh this page, you can now see that we have got the destinations
‫being shown in.
‫This is how it looks.
‫So everything is now perfectly designed.
‫Now what we need to do is that we also want to apply a background color to this as well.
‫So I'm going to be going ahead and I'm going to be first of all clicking on the latest post group.
‫Go into the styles.
‫Click on background, copy this color code.
‫Go back to this one.
‫Go to these tiles background.
‫Select the color and paste in that color code.
‫After that, I'm going to go ahead and I'm going to hit on update.
‫And now if I refresh this page, you can now see that this is also designed.
‫Now after that, let's suppose that I want to show the categories.
‫So what I will do is that I will just quickly go ahead and I will duplicate this group.
‫So now I've got two groups.
‫And in this group I'm going to be changing this from destination to actually categories.
‫All right.
‫And then I'm going to remove this particular menu widget.
‫So I'm going to click on here click on delete.
‫And instead of that I will be now adding the categories.
‫So let's search for categories which is the categories list which is added.
‫And now I will say that I need to show it based on hierarchy, which means that I also want to show
‫the subcategories as well.
‫Now, if I were to hit on update, and now if I were to go ahead and refresh the website, you can now
‫see that the categories are also being shown.
‫How cool is this?
‫Everything is now perfectly designed and our sidebar is now almost ready.
‫So this is how you can go ahead and you can create add a sidebar on your website.
‫And this is how you can design it and make it look good.
‫All right.
‫So now let's suppose that you want to add the advertisement as well.
‫Like how you can add the advertisement.
‫So for the advertisement like let's suppose that you apply on the Google AdSense your Google AdSense
‫account is approved.
‫Then what you can do is that you can click on this plus.
‫All right.
‫And then in here you can search for the HTML, click on the custom HTML.
‫Now Google AdSense is going to give you an HTML code.
‫Whatever the code that they will give you after your profile is verified and everything, you can paste
‫that code in here and that particular advertisement will automatically appear right here.
‫So this is how it is kind of going to work.
‫All right.
‫That's how you can go ahead and you can work with the sidebar.
‫And that's how you can go ahead and you can create the sidebar like this.