 Nisha k Number 1 we're going to be changing this logo That is here And using Classic Press right now which is a Focado Word Press However, it works in the same way What we're going to actually work in the same way Welcome back to the channel Last time, we managed to make our admin area a little more clean and less crowded And were able to change also our posts type of posts into news today i just want to use our activated plugin that we're using which is an editor's guide and what we're going to do is we are going to log out of here and we're going to change this logo for wordpress and classic press which is a fork of wordpress so they both work in the same way and if i actually expect this element we're going to realize that this is just a link that has a background image here that you can actually change and you can change it in the css however when i quickly google for how i can tap into this using code there's actually a part in the wordpress codex that tells us how we can customize this login form and make it ours and they actually give us a code sample of what we can use here so what i'm going to do is i'm going to copy this information that is here and i'll just drag our folder here that is our plugin and then when i go inside here i'm actually going to just press this code block here and then i'll explain what goes on so we actually tap into a wordpress hook that's called a login queue script and this action is going to run our function here and what our function is going to do is that it is going to it is going to add some style which is css and it's going to target this particular css code is going to look for the login id login for the header tag and then the link that's embedded in there and then the next thing that it's going to do is that it's going to change this particular background image and we can actually just make this any image that we can come up with for example if i just quickly run here and go to maybe pixels.com where they are loyalty free pictures i don't want to have any issues with our copyright infringement so if i quickly go to um someone who's let's just use this i so i'll just get the link to this image so i'll get the link to this image and what i'm going to do is come here and i'm going to change this background image by deleting this and then i'll put this link and click save and if we quickly go back to our login page and reload we actually see that we get a big image here of this eye so there are a number of things we can do to this to make it a little better and we can actually still add style using our code block that we have actually added here so the first thing was to change the image next is to change um the particular styling but i want to go for a different angle now when we log into our wordpress usually when we log into our wordpress and then we go into our customizer we actually in most cases will have themes that are supporting a logo to be added so i want to use this logo that is added maybe from our theme uh maybe it's a particular company of business that has added the logo there then the next thing we're going to do is that we're going to use this same logo that we are having here and then we'll use it on the back end of our login page so the first thing that actually we're going to deal with is uh trying to add this logo supporting our theme let's say if our theme did not support that logo uh addition via the customizer so when you come to wordpress this is already embedded or in classic press so you would use this in your functions.php or you can use a plugin to add this so you can add theme support and then you add custom logo and then what you can do is you can add a bunch of properties to that custom logo maybe the height the fixed width however this will only work if you're adding it in the theme in the when you tap into the hook that's called after theme setup in your particular theme so what i'm going to do is that i'm just going to pick this whole block of code here so that even if i add it through my plugin right here right above this code and paste it i know that i'll tap into the after after setup theme support hook and then i'll run my particular function and then i'll add theme support for that logo to be so so this is all the information you need to add to your logo so since my theme already it supports the logo already i don't need to add this block of code so i can just i'm just going to comment this out since i don't need it anymore and then i'll just focus on this code so let me just write this down and just put it at the bottom since i don't need it but you can always refer to it and i'm going to come back to our block that we do have here so the way we tap into this information that is already in the customizer is we use a function called get theme mode uh to get the information here but again since this is already embedded in the classic press or the wordpress core there is an easy way of getting this information again if you scroll down this page we were in on the codex the codex of wordpress.org slash theme underscore logo you find that we can actually put that particular logo by using this function which checks if there is a custom logo then we can throw the custom logo back in here or if we want to actually tackle the html and make it our own we can actually just go and get only the url or the link that goes to that particular image so we shall get theme mode which is going to go and tap into the customizer itself and then look for the idea of custom logo as we set it up using our after theme uh after using this function that is tapping into the after theme setup theme and then we'll save the information that will save this id and then just drop it to get the attachment that is this particular image here so next we will go and say you know what there is something that's being thrown out we're going to dump all this information so you will see how this actually comes out and so we'll get the first item that comes back from our array because when we query uh wp get attachment image source we'll get a bunch of information that's attached to that particular image that we've uploaded so we can actually just choose through the array just use php and then we'll find the image link so let's jump right into that so what i'm going to do first here is actually go and upload an image that i want to use as my logo so i'm going to look for this this image that i made for uh that's just a funny guitar logo and then i'm going to just add it and immediately you see that since this theme supports images and it supports the logos coming out it already shows you the customizer so we're going to save this here and what i'm going to do next is actually i'm going to log out of our our administration area and then we shall be able to see what's going on here so we still have our image that we're using to test to test and we're now going to jump into that code so what we're going to do now is actually we're going to test uh this particular code that we we've got from that we're going to get from now colleagues i'm just going to copy the whole thing we'll inspect it to see what what is displayed so we'll see so what i'm going to do is uh i'm going to compute out each line and then i'll use the php line to overdamp whatever we are getting we look for some information so i'm going to get the custom logo id that we've been saving here and then i'm going to use the wqdi row so i'll use wqdi to just stop whatever is running now if we go back to our page and reload so when we dump the the information from our code here we actually see that we get an integer of 30 and that is basically the id of their attachment and now that remember that attachments are also custom post types in our wordpress now we're getting the id over this from our customizer and we're going to pass it into this function of wordpress that says we need to get the attachment id source that has the id of 30 but we want to get it in full uh we want to get the full size of it so what i'm going to do is i'm now going to change what we are dumping out so i'm going to save this and then when i reload our page here we actually see that we get back an array that has four pieces of information and the first piece of information is a string which is a URL of our image the next piece is giving us an integer of 240 and we have 240 here and we have a booleon which is false now if i if i was to actually go into the codex and find out what does this function actually do so i'm going to open my browser and put this into google and find out what it does so if we go to the codex again we're going to find out what information is given back so when we pass in the id the attachment id and the size of what we want we actually get back this is what we get back we get an array that has a URL which is a link we get the width we get the height and we get whether it is intermediate this is the information we get back remember when we were setting our our particular when we were using this code here to set the height and width it's different for every theme so you can set your particular width and height that you want to get so the next thing that we're going to do now is that we saw that in our array of the information we were getting is we had item zero or the first item in our array was the string and that is what we want so what we're going to do is just use php again and say um we just want to echo only the first item in what we've said this is a variable that we said we just want to get only the first item which is item zero and so i'm going to just get this i'm just going to add these brackets and add zero and then we're going to see what we are actually damping so i'll just save this again reload and we'll see that we are only getting this string so this is the information that we need and that is what we can drop actually in our background here so what i'm going to do is i remove the die and echo so after cleaning out the space that is here what we're going to do next is we're going to replace whatever is here so the first thing we're going to do is we're going to get this link that is here we're going to copy this function uh that is here and we're going to place it into php quotes here and say we have our php here and our function now what we also need to do is we're going to get our integer or our id of our post type of the attachment post type id and we're going to query it from here so what we're going to do we're going to say let us echo whatever we get out of this function being queried and once we've passed in all those parameters so i'll just remove this since we don't need it here so after saving this here we're going to go back and we reload and we actually see that there is nothing here so what i'll do is i'll quickly inspect to find out and we'll see that in our background image we have an array here so that was our error we forgot to actually add that we want only the first item because the array starts from zero all the way upwards to one to three so in position one we have zero position two we have one position three would be number two so once i save this again we're actually now just going to have the image coming in as the URL sorry this shouldn't be here it should be actually at the end because we want to get the array at the end of this so once i save this and then go back here and reload we actually see our image that we uploaded from our browser and it actually comes here and we have it sorted here so the next thing that we can do is actually we can decide to make this better looking and give it a lot of CSS to make it look nice oh that saved an image that is actually maybe with these dimensions that we have here this is how we make our login page better and there are a couple of other things that we can change for example we can change the URL so that it's not going outside so that it's not going outside to any other place and we can even change the title over this particular link when we hover over so that it's not saying maybe bad by word so by classic press so if we go back to our codecs and scroll all the way down there are also other functions that you can tap into and these ones are filters remember filters are also hooks into wordpress but filters expect information and often also find information so that's why you see that once this we can use the login header URL filter it's expecting to return this is a function in wordpress that gets the URL of your particular where your domain and then if you look at the second filter it's saying we can change the login header title and we can give it anything that we do and for example this is your site name and information so once we save this or we can actually say let us make it very dynamic so I'm going to use a blog info which is a function of wordpress and I'm going to say now instead of this I want to add the name of my website once I save and reload and come back here we're actually going to see that our URL has changed which is a you see this is blog gallery which is here and our title is empty because we actually echo indeed here you can see this same live box gallery so what I'm going to do is just go back here because I made an error blog info actually echo we can use the title of our blog or we can even use the description which is usually the tagline that we give to our particular blog so we can also change that and make it just another wordpress like we want or we can even make a blend of both so it's up to you to do what you want to have there so I'll just join up this too but I at this point we've actually made what we wanted to do so this is just doing something extra I'm just joining two pieces of information here so I save this so that we have live box gallery which is just another wordpress site well good and done with this tutorial I thank you for watching and staying with me over this long period of time and I hope you like the video if you like it please give it a thumbs up and share it with your friends and also don't forget to subscribe if you haven't subscribed to the channel we have a number of things that are going to be coming out next and we always do these small small challenges also coming in so feel free to leave a question leave a comment give direction or give us how would you want to do this in the comment section and just to note that a classic press in itself is dealing with this thing just to help websites better brand themselves a classic press is actually making this part of the core right now they are they are working on how to change this to be part of the core so that whenever you upload a logo in your theme it automatically gives you a logo coming up here the other thing is that it will default to the classic press logo if you don't have a theme supporting the logo but now you know so you can do it for yourself thank you for watching bye bye