 Welcome back to the channel. In the last video, we were able to add our theme into our website. And now we're just going to fix a couple of things to make it more legitimate as a theme. We're going to add a version number. We're going to add who created this theme. We're going to add a description right here. And we're going to do that with a very simple comment inside our styles.css file. So let me open up my editor. And inside here, I'm just going to paste this little code and I'll explain to you what it does. So we have our theme name, sticky food. We have our theme URI, which is the URL or the web link for where the theme is going to be. We have an author who is me. Of course, I have put my author URI. And I've also added a description, added a version. And I've decided to go for 4.9 as the last or the least version of WordPress that I will support. I'll also add the PHP version, which is 5.6. Now these two are new features that have been added in WordPress much, much later. Initially you didn't need them, but now you have to put them so that you can show what you support and block other people from downloading or using the theme in the event that you don't want to support the version of PHP they are on or the version of WordPress, which they are on. Depending you could be using particular functions that are only in later versions. So that's why you would restrict these few pieces. Then of course, we add the license and the license URI so that someone can read it. And then we're going to add our own text domain, which I'll call techie food. And of course, I'll add some tags, which is restaurant and food. And these are helpful so that when someone comes to themes and maybe they want to add a new theme and they are searching in here, they should be able to look up something. Let's say you're looking for restaurants. They should be able to find your theme. Let's say if you listed it on the repository and they'll be able to click and install and have it in there. Now, the other thing that I wanted to share with you is that when you're choosing a theme name, you need to make sure that this theme name is not available already on the repo because what will happen if you have a theme and that same theme with a similar name on the WordPress repo is updated and let's say it's in version 2 and while you have version 1 WordPress is going to tell you there is an update for your theme and you might mistakenly or your client might make a mistake and click the update button and that will overwrite your whole theme and that will cause you problems at the end of the day. So make sure you get a unique name for your theme and then you can write it. So let's save this. Now on saving this, I'm going to come back to our themes and you'll see that now our theme actually has proper details like the tags, it has a description, it has who is the author and you can click on that to go and see who the author is or where they're located and we have a version number. So since we have this ready, now we are ready to start building. When I open up my mock up of the site that I'm going to be developing you realize that we have some parts of this that are going to keep on repeating themselves and these particular pieces are good to have in the header and this is just like how HTML works. Now, don't get a misconception. What WordPress does is that it uses PHP, it uses all those different languages so that at the end of the day, it basically just delivers HTML which is the language of the web. It will add CSS, it will add dynamic content using the PHP which is a server language but at the end of the day, it's just HTML and CSS that's going to show up. So we have these parts that are repeating and I think I'm just going to have these in one particular file. Now PHP offers us a very good platform for us to have a repeated file that we can always call in over and over again and what WordPress has done is that it has used that technology to build what we call a header file that we can always put inside our code. So we have what we call a header.php file and the way we are going to call this let's say in our index file and in our page and in our single is we are going to use something that's very simple. So I'm going to remove this and I'm going to use a function which is called getHeader and then I'll put a semicolon. Now inside our header right here is where I'm going to put our PHP tags. I'm going to add a comment here and say all our header stuff comes here. So since this is going to be our header I'm going to echo the header in here and save this and then what I'm going to do is that instead of having this only in the front page I'm going to copy it from here put it in our 404 put it in our single.php and then I'm also going to put it inside our index. So I'm going to do that then I'm going to choose to save all and I'll add these simple lines to define my pages for the single we'll have single template we'll have the 404 on our 404 page we'll have front page on the front page and we'll have index for the index page so that we can be able to make them very distinct. Now on saving this let me preview in my browser so I'm going to reload here you'll see that we get our header on this page I'm going to put in a random link let's say dash contact us which does not exist and you'll see that we get nothing here so I'll check my themes and you're going to realize inside these files here we have the different templates and the reason why this is so is because my editor is not synchronizing so let me just copy what I have here and then just paste it in my editor here so we'll add our code from here and click update and if we come back here and reload we should be getting a header 404 of course the 404 coming from our page and also the header announcement coming from our get header so from this point on we're going to start adding particular things that we have in HTML and just add them to our header so the first thing that I will do is close up this PHP then I'll start writing some HTML we'll start off by writing our dog type and say we're going to write HTML and inside here we're going to have our HTML I'll open this will automatically close but we're going to close this inside our footer so we'll have our HTML showing up here then we can have a title which is next and of course we need to close off our title and our title could be taking food and then of course in our HTML we can add our language the language that we want since we're using WordPress and we can determine the language that we're going to be using for the website inside our settings in the general we can use PHP to throw out our language so I'm going to add PHP tags here and we shall be using a function called language underscore attributes and we'll add a semicolon right here and save this so when we save that and come back here I'm going to inspect the page so that we can see the HTML that's showing I'm going to reload this and you'll see that now we have HTML, we have a language which is en-us and if by any chance went into our general settings and changed our website let's say from English US and changed it to doish which is German save this of course now our whole website changes into German and if we reload here we're going to see that it changes to a .de .de language and of course we have our header here with the title but at least we are able to see that we can change the language so I'll change this back to US save that and then we'll continue editing now those little details using PHP to add dynamic content to our pages is what WordPress is really good at and that's why it's a CMS so even our title we don't have to have it static because if we leave our header like this it means every single page we're going to load is going to have only this but we want to use things like just SEO we want to have dynamic titles we can use different plugins for SEO so that means we have to have a dynamic title actually showing up here now for us to use dynamic title here we're going to remove this title and we're going to assume that WordPress is going to provide us that title and we're going to write some PHP here and we're going to start off with the function now after opening up with our PHP we're going to choose a function from WordPress which is called wp-head and save now this wp-head comes with so many things let's first reload here our code and see what happens and you will see that it brings in all our link tags it brings in the javascript that we have and cued we have styles from the different pieces and all of this is coming from WordPress and it loads by default you will see in here we have wukamas and we are seeing wukamas styles that are being brought in here now this particular code is very powerful and if we left it out of our theme I'll just enlarge this so that you can see it if I leave this wp-head out of our theme we're going to miss out on what we have here from our WordPress and from the different plugins and how they load the scripts correctly so we need to add that theme so that we can have the meta tag generators we can have the CSS and some javascript that's loaded inside the head we need to use the wp-head function right here after doing that I'm going to go inside our theme functions and I'm going to start writing some PHP right here and the action hook we're going to tap into is actually called after setup theme and we're going to add in a function in here and we'll use the named function and we're going to call it take a press theme setup so with this we're going to copy it and then start off our function here so we'll do that and we'll add our theme and in here we'll add our supports for our theme so first of all let me make this full proof I'm going to check if this function already exists then we should escape so I'm going to wrap this inside an if statement and say if this function does not exist so function exists so if this function of take a press theme setup actually exists then what we are going to do is escape everything that is in here but if it doesn't then we are going to run this code now inside this function of take a press theme setup we're going to add a theme support so I'll tag this and say add theme support and inside this theme support we have so many options but the one that I'm going to look for first is actually called title tag and what this line of code means is that what press is going to provide us with our title tag from the different pages now that will allow the different plugins that we have for such engine optimization to also throw a particular tag on each page so if I reload this here you're going to see that this page is not found we're having dynamic titles now and if I go back to our front page and reload you're going to see that we have food theme development and the next piece is my word press blog so we have food theme development my wordpress blog so by default wordpress gets the name of the company and then it also gets the tagline that you put in inside your settings here so that's what you have here the site title and the tagline showing up as the home pages title so we are making things more dynamic but with very little code in here and this will allow us to enjoy the full functionality of wordpress now with add theme support this is not the only tag that is available so I'm going to copy this and look it up in the wordpress codex so I'll just google this and say add theme support and we'll go to the developer codex and you're going to see that we have so many features and there are different arguments so we can have the title tag we can have a custom logo which we are going to use so it's good for me just to copy this or we'll type it so we will add theme support for a custom logo and it will require a height and a width for that particular logo we have post formats we have thumbnails we have headers, we have custom background we have a custom logo we have menus, we have automatic feeds html and all these different things now the other ones that we do have here are line wide dark editor style disable custom colors font sizes color palettes and these are new things that have come in with Gutenberg now what I'm going to do is just copy this and then I am going to set them inside my page but I will comment them out so I'm just going to comment this so that whenever I need to pick anything I'll be able to just pick it from my comments now to better understand what each of these features does or what arguments that are needed along in the add theme support function you need to look further down in the documentation to understand it better so we can also see that we can add support for thumbnails so in our code we'll add support for post thumbnails in here and we can specify the kind of thumbnails that we want, we can add thumbnails for posts only for pages we can add it for maybe posts and a custom post type that's called movies and we can add for the different post types that we want we can just generically add thumbnails for all our different posts now you'll see that we also have support for a custom background so let's say in our design we had some particular pieces that were added in our background and they were repetitive or it was singular we can add support for a custom background now let me add this to our code and you'll see what it does I'm going to save for custom background and when I go into appearance we have now a background that is active so when we click on this we're able to add a custom background to our site and we can use that inside our website so we have it available in our customizer and we can select an image but look at this if I commented this out and updated our file reload you'll see that now we no longer have the background showing up because we've told WordPress we don't want to have your custom background inside our theme we don't need it, it's not going to be working for us so we can either add it inside our theme or we can remove it now give or take depending on how you're going to use your theme you can either add the background or remove it now in our case I'm going to look for the theme supports that we are going to use in our particular case so I see us using a custom header because we want people to be able to change this big image that we have here we don't have to do anything different we don't have to write extra code for it so we can use the custom header in this case so I'm going to add that here and then I'll scroll down we shall need a custom logo so I'll copy this and I can add our custom logo right here but of course I want to use it with particular dimensions now I've made a little logo here from a free logo design that's going to look like this it's a bit square in terms of size but of course I can always make it rectangular in terms of nature so I'm going to just copy the example that we have here and it will allow us to have attributes of height, width make it a flexible height or a flexible width and then we can add the header text to it we can have our site title and description added behind in terms of the old text so let me show you what that looks like so I'm going to overwrite what we have here and then I will tab this so that we have this square 400x400 I'll reduce it to 200 so that it is a little bit smaller and then I'm going to update this file so before I reload here you will see that in the site identity we have a site icon only but if I reload this you're going to see that now we have a header image which we added originally and when we come to the site identity we have the site icon but we also have the site logo so at this point I'm going to add our logo and I'm going to pick it from the desktop and our logo is here I'm going to upload the logo now you can see the 200x200 that we put inside our code is actually showing up right here so we know the suggestion for the image is what we have inside our code here now we can do it differently depending on how our theme is set up let's say if we wanted to have a shorter but longer width so we could have a width of 200 and then we could have a height of 150 for example if I update this and then I'm just going to reload this you will see that if we got site identity go to logo it has now changed to 200x150 so I'll just upload this image leave it in its entirety skip cropping and then I'm going to publish it now we don't have this logo showing up inside our site here because we have not reflected that particular logo inside our webpage now how do we get this to work in our webpage now for us to understand how we put this on the front page we need to look at the custom logo for wordpress so I'll google this got custom logo and we're going to see how we can apply this so we are showed how we can add it into our theme setup so if we get this code here and just paste it inside our particular theme so I'm going to go to the head I'll open this in the new page and inside our head just below our header.wp I'm going to open some new PHP tags and then I'm going to run our code and close off the PHP I'll save this if I reload this page you'll see that now we have our logo showing up right here so even if we changed this logo and put something that's different let's say this image we'll skip the cropping and publish you're going to see that this logo is going to change into what we have here let me reload this you'll see that now we have a new image of our logo right here so we can either use this function to get all the code showing up here so let me inspect this and you will see that we are given a whole bunch of code we are given an eta, we have an image in here but if we have our own custom design of the logo we don't have to pick this we can decide to just get the URL by getting the code that we have here so I'm going to go back into our editor and instead of having this if function I'm just going to dump the code here that's going to get a custom logo ID and it will get it from this function of getThemMod that's picking the logo from our customizer and then on picking the ID it will pass it into this WordPress function that looks for the image source and we are going to get the full size of it now after getting this variable having the link to our particular logo we can then check if we have a custom logo supported by our theme then we can pass in our own markup I'm just going to clean this out a bit we can pass in our logo then we can pass in the alt tag log name that is the name of the website or else we shall just pass in an h1 tag if there is no logo actually inside our page so I'll save this and I'm going to reload here and you will see that we are getting our HTML to show up because there is a logo in here but we're not getting the source of our image so let me check what the issue is right there so I'm going to some troubleshooting here to see why we don't have our logo I've added some var dumps in here and I've saved that so when I reload this page you will see that we have a string showing us the ID of the logo but we have an array of data coming in through here so I'm just going to add on the square brackets with the zero on this so let me save this then when I reload here you will see that our image actually shows up right now and now when a good site identity and go to the logo and we click change logo and we click our new logo click select, skip cropping and click publish so just add our new logo right here and then I'll clean out the var dumps so that we don't have them I'll just go back into our header on a new page and then I'll take out the var dumps I'll tap this and then we'll know this is part of our header so there are many things that we can add in our theme support like for example adding automatic feed links to our posts and comments in the head so I can copy this and just add it in there we're also going to add support for HTML5 for example the comment list, the comment form and all those other pieces we're just going to add HTML5 support so I'll paste that in there and then of course we'll have customizing selective refresh for widgets we want to be able to see when we add a new widget in the customizer we should have a refresh of that and we can see an instant preview so you can read more on the documentation about these different pieces of theme support and see if they are viable for your particular theme so right now this is what we have here I'm not going to be using the comment list and comment forms for now but I can leave them there so that when I make a single post I should allow people to be able to actually comment on that but in this particular case we're not going to use any custom background so I'll leave that out I'm going to now save this now one final thing that I'll share with you is that with our custom with our custom background or a custom header we're able to define the default color and the default images so let me just go to that and you'll see in here that you actually have these different pieces so you can define an image you can define the width and height the header text a video and because you can define a default image or the user of your theme forgets to add an image they could be able to pick the one that you have set up inside your own theme so you would set up an image in your files in your files that you have here let's say you open a folder called images and you keep an image inside there and then you would set it up inside your theme with your theme support and just link to that particular file so that would give you a default image and also you can add a default background color so next we are going to make a website more real life like we are going to change our front end and add more to what we have here in our logo so we're going to look at our mock up we're going to add the different colors and the different items that we have here of course there will be dynamic and we're going to make a website start flourishing if you want to see that stick around, subscribe to the channel make sure to turn on the notification bell so that you get all the updates all the new videos that are coming out and let your friends know share the video with them let them walk with you this journey because the best way for you to learn is to have someone walking alongside you otherwise thank you for sticking with me and enjoy your day