‫In this lesson we will learn how theme customizer work.
‫So let's just go ahead and let's get started.
‫But before getting it started, we need to understand a few things.
‫The theme customizer works is the full site editing.
‫So basically in the 2022, WordPress released the full site editing inside the WordPress and inside
‫their 2022 theme.
‫If you go ahead and hit on Activate now, you should see that there will be no theme customizer yet.
‫We have got this editor.
‫So basically they have released the full site editing that is not really appreciated nowadays and so
‫many of the theme developers are actually not incorporating that.
‫So now if you go ahead and reinstall the most popular themes, we are not getting the full side editing
‫inside there.
‫So until and unless people are not actually accepting that, we're not going to be taking a look at
‫that because this full site editing is not being appreciated by the developers and they are not incorporating
‫that on the website.
‫And it will take some time, probably like in the middle of 2024.
‫This is going to be incorporated on the WordPress website and once the theme developers actually accept
‫it, then we will be updating this lecture and we will be working with the full site editing.
‫Until that we will be going ahead and we will be going up with any of the themes.
‫So if you go ahead and you activate that, you can see that there is no editor inside there and we have
‫got the default customize in here.
‫So you go ahead, you activate the 2020 theme, you get that, you activate the 2021 theme, or you
‫go ahead and you go into the ADD new and you install any of the most popular themes.
‫All right.
‫So we've got this.
‫Hello, Elementary.
‫This is the most popular asteroid theme.
‫This is the most popular.
‫And even if you go ahead and install the ocean WB theme, that is the most popular theme, you will
‫see that there is not going to be the editor inside there.
‫So until unless the most popular theme developers incorporate that particular full site editing inside
‫there, that is not going to be accepted by the developers worldwide.
‫All right.
‫So now let's just go ahead and let's work with the theme customizer.
‫That is what WordPress used to come with.
‫All right.
‫So theme customizer is basically a layout presets that the theme developers itself provide us so that
‫we can edit the layout.
‫Now, if you go ahead and we go to the 2019 theme and we hit on Activate.
‫You can see that this team is activated and now if you go ahead and we go to the customize here itself,
‫you can see that this is how it actually looks like.
‫Now, here what we can do is that we can go into the site identity and we can particularly change the
‫website title from here.
‫Also, we can also change the WordPress tagline.
‫So like instead of this church, another WordPress website, like I can say that since I am a WordPress
‫developer, I can add that inside here and that is going to be shown over here so I can change that.
‫Similarly, I've got this website site icon which is going to be appearing right over here, so you
‫can see that we've got a WordPress logo.
‫Now let's suppose that if I want any other custom icon, then I can upload an image at least of 512
‫pixels and that is going to be appearing on top over here.
‫Similarly, we have got the options to change the colors so we can go ahead and we can change particularly
‫some of the colors on the website.
‫Like if I select custom colors and now I go down.
‫Now let's suppose that I want to use the red colors over here and all the colors are actually going
‫to be changed.
‫You can see that I'm getting the red colors and if I change these to the yellow, then the link colors
‫are actually going to be changed to yellow.
‫All right.
‫So I'll be going ahead and I'll be going up with the default one.
‫Now we've got this menus.
‫So we have already talked about the menu before.
‫So like, we know how we can go ahead and how we can create a menu by just going into the themes and
‫then just adding a menu like this is the menu that we actually created.
‫All right.
‫So let's go back now.
‫We've got this widget.
‫So widgets are something that we will be talking about in detail when we will be working with the blog
‫website.
‫All right.
‫So now if you go into the project website that we will be building as our first project.
‫Now you can see that we are actually not using the widgets, but we are actually using some of the widgets
‫right down below in the footer.
‫So when we'll be building the footer of the website, then we will take a look at like how the widgets
‫work.
‫All right, now we've got this home page settings so we can take a look at like your homepage displays,
‫latest posts or a static page.
‫This is the setting that we already did by going into the settings of the WordPress dashboard and changing
‫the settings from there.
‫And that's it.
‫These are the only theme customizing this theme provides.
‫All right.
‫So now what we can do is that we can just go ahead and we can hit on publish and we can click on cross.
‫So this team is a really basic theme.
‫We just install this theme just to actually work with the WordPress basics so that we can learn how
‫to create pages.
‫Now, from now onwards, what we will learn is that we will be going ahead and we will be moving to
‫a most popular theme that we are also using on this project right here.
‫So you can see that we are actually using a theme on this project.
‫So we will be going ahead and we will be moving to that particular theme and then we will be moving
‫forward.
‫The theme that we are actually using on this project is actually the ocean WP theme.
‫So what you need to do is to click on Add New.
‫Now inside the most popular tab, you can go down and you can see that we have got this ocean WP right
‫here in the most popular tab.
‫So if you do not see it, what you can do is you can go ahead and you can search for Ocean WP and you
‫will probably get this team over here with which you can go ahead and you can hit on install.
‫And this theme is going to be downloaded from the WordPress repository and once this gets downloaded
‫I can hit on activate and this team is going to be activated.
‫All right.
‫So now here you can see that it says Awesome everything.
‫So now what we need to do is to just go ahead and visit the website and let's see how does a website
‫look?
‫So now you can see that this is how the website looks like.
‫And we've got the home page about page and the contacts page ready over here, and this is how everything
‫is actually looking.
‫So now if we take a look at this website, all right, this is going to be our first project.
‫And now you can also see it yourself said this layout is actually pretty much matching with this layout.
‫Now, I'll be I basically zoomed in my screen a bit, so I'll be resetting that so that I can actually
‫be reverted back to the default since I'm actually using a ten a HTTP led.
‫That is why this is how it will be looking.
‫But if you are actually using a laptop that most of the students will be, so then on the laptop, this
‫is going to be your screen resolution and this is how it will be.
‫All right.
‫So let's just go ahead and let's set this to the normal width.
‫All right.
‫So now you can see that this is how it is actually looking like.
‫And let's take a look at the theme customizer off this team.
‫So if I just go ahead and add go into the dashboard now, we go ahead and I go into the appearance and
‫now I click on Customize.
‫So now you can see that I've got pretty much options over here and I can style my website accordingly.
‫So like, let's suppose that if I just go ahead and I go into the site identity, you can see that this
‫is how it's looked like.
‫We've got the tagline, we have got a signed title and I can also upload the site icon.
‫Similarly, we have got the colors option, we've got the menus options and we've got the widgets.
‫Now Menus is the one that we have already worked with the default.
‫Now the thing that I want you to know is that let's suppose that if we actually go into the top bar,
‫all right, so you can see that inside the top bar.
‫Let's just take a look at our project over here so you can see that we've got this top bar over here.
‫Now, what I'll be doing is that I'll be going ahead and I'll be going into the general tab and I'll
‫be making some of the changes.
‫Now, there is one thing that I would actually recommend you to do.
‫I would suggest you to not implement what I'm doing right now.
‫All right?
‫Just watch this.
‫Just to get information and how everything is working.
‫And from the next lecture, we will be actually copying this tile and then we will be moving forward.
‫All right.
‫So right now, I would just recommend you to go ahead and just watch this.
‫So now what I'll be doing is that I'll be going ahead and I'll be going up with the background color
‫and I'll be applying let's suppose the blue color over here.
‫And you can see that the blue color is right here.
‫Now what I can do is that I can go into the text color and I can change this to white, and you can
‫see that now this is actually turning to white, which is kind of a bit similar to this that we have
‫over here.
‫Now, what I'll do is that I'll go back and now I'll be going up with the header over here, which is
‫this over here, and I will be going into the general and you can see that here.
‫I can work with these styles and everything.
‫So like, let's suppose that if I want the background colour of this header to be blue as well, and
‫you can see that how this color is actually turn into blue and similarly I can now go back.
‫And now in the menu.
‫Now what I can do is that I can change the link colors.
‫All right?
‫So I can go ahead and I can change the link colors to white.
‫And now you can see that how these link colors are actually appearing.
‫So that's how we can go ahead and we can style these accordingly and we can build a website header.
‫Similarly, if we go ahead and we hit on, go back and we hit on, Go back.
‫Now we have also got this footer over here.
‫So right here you can see that we've got this footer widgets that is going to be appearing over here
‫and right down below we've got this copyright.
‫All right.
‫So inside the footer bottom, we've got the copyright.
‫So you can just add in like your copyright, your website address, website developed by your name,
‫so you can just enter something like that and then you can change the text color to white so that this
‫is pretty much visible.
‫Now, let me tell you one thing about the themes is that any theme you go ahead and you install that
‫on your website that is going to let you edit the header of your website that is going to let you edit
‫the footer of your website, whatever that is in between.
‫Over here, that theme might let you like.
‫You can see that we've got this text over here.
‫All right, So if I just go ahead and I just go into the typography, All right.
‫And in the body.
‫All right, let's suppose that I want to change the text.
‫All right?
‫So I change the text to anything else like this.
‫Now, you can see that the text of the website is fully changed.
‫All right?
‫By just a single click.
‫I can do that, but I cannot design this website accordingly.
‫Like, let's suppose that if I want to use this styles over here, like I've got a background image,
‫I've got this right here and behind that I've got some of the shadow.
‫Not only that, if I bring my mouse, how this image is actually moving up a bit.
‫I've got hover effects and so many more things.
‫So if you want to do these types of designs that then your theme is not going to allow you to do that.
‫However, there are some themes that are available that comes with a page builder inside themselves,
‫so you can use that theme and you can do that.
‫But the generic themes are the general themes that we have nowadays.
‫They will only let you edit the header of your website and only let you edit the footer of your website,
‫whatever that is in between that is actually edited using a page builder and we will be talking about
‫that deeply later on from the next lecture.
‫So now first of all, I would like to congratulate you on actually learning how you can go ahead and
‫how you can create a basic three page website.
‫All right.
‫That was the start.
‫Once you're done with that, you can now design your website accordingly.
‫All right.
‫And from the next lecture, we will be actually copying this header style.
‫We will learn how we can go ahead and how we can design this type of header.
‫Then we will learn how to design this type of footer over here on this website.
‫And after that we will be moving on to the page builders and we will learn how we can go ahead and how
‫we can design these type of page builders as they are being shown over here.
‫So from the next lecture you'll be working up with that.
‫Now what I'll be doing is that I'll be clicking on cross over here so that my changes that I just did
‫are not saved.
‫And now if I go ahead and I click on Visit website, you can see that I'm reverted back to the default.
‫So like there was no issue, like if you were not copying as it is, like what I was doing.
‫All right, so now from the next lecture we'll be working with the theme customizer and we will be starting
‫with the project.
‫We will learn how to just like take a look at this, how to design that, and after that you'll be working
‫with the page builder.
‫Stay tuned and bye bye.