Lessons

Lesson Info

Creating a Favicon & Editing a Plugin

Next thing we're going to do is we're going to talk about working with father cons because africans are important there's something that we're going to deal with any kind already discussed, why we deal with them is matter of fact. So let's, let's do this, let me let me kind of back up a little bit, and we're going to talk about a falcon now I'm going over to my code real quick. One of the things that we can do with a fabric khan is a fabric con why don't you go into the bonus files actually go into the advanced bonus files and you're going to see there's an image is holder in there, and I got a lot of images. We're not going to use all these, but I've got something and you're going to see that we have family con a I favor kind ping in there. Okay, now fabric on is a really small image. It used to be like sixteen by sixteen pixels, ok? A lot of times they make him like thirty two by thirty two now are sixty four by six, four, two hundred twenty eight by two or I don't know, whatever the...

re's tons of numbers down the size of these things, the fabric on itself is a representation of your sight for shortcuts, for tabs. For for things like that for bookmarking et cetera. So we want to make it so that, you know, it looks pretty good otherwise it's going to be the default little thing, little icon havoc on for the browser, so in order to create a fabric, I'm we needed to start the process here. And you know what? Usually I start with illustrator, if you want to start with you could start with a lot of things you could start with something that's vector ok, you can use photo shop if you want to that's totally fine fireworks. Um, I actually have this is this is kind of cool. I have something called icon, slate icon slates, a cool little program, and I'm actually going to use that I'm going to need that to create when about to create here, so we can we can do that if we want to using icon slate when we open that up, I can see it's pretty cool because you already did this, but I can't slate lets you take a png file, drop it on there, and it creates what's called on aiko file I c e o phile fabric kinds a lot of times are dot profile and that's kind of old school that really is old school it's changing these days, we're using different things but that's, how we can get it started. Ok, now I'm going to tell you right now we're going to plug in. This is a headache. It's such a headache. Because I can I can tell you how many sites I went to and the persons like oh, I went toe wordpress are microsoft operating system blah and there's. No thing with the short cut. And when I create a bookmark, it showing up is blank. What are you doing? You got to fix this, so it takes a lot. We have to create a whole bunch of these things to fit all these different sizes. So we're going to have something do it for us. Okay, my point here is this. You want to create the original artwork in a program like illustrator. So let me do this and they go back over the files. If you guys have illustrator, you can do that. I saved the ping for use, and you can use that if you look in that images folder. But if you have illustrator, go ahead and crack open this fella. Conduct a I that's in the bonus files and you'll see it's just a big old doughnut ok, that's all it is and it's not very big if I take a look at it it's like, oh, actually, this pretty big I forgot I'm so used to old school sixteen by sixteen that you guys going to see the plug in that we're going to use and I'm going to show you the second suggests that we make this, like two hundred sixty by two hundred sixty pixels wide by tall ok, so it's gonna be pretty big that way what it can do is it can scale all of it then what you can do is once you create your artwork and photoshopped illustrator, whatever you happen to have make it like two hundred sixty by two hundred sixty for this plug in that we're using that's pixels put your content in there, make it simpler remember, these things are going to show up like a flyspeck, ok, so don't make it very elaborate, and then what you're going to do is going to save it as a ping png file somehow, okay, so I could go in and do file safer web there's a lot of ways, if you guys, if you use footage shop, uh, you can use the generator so go to file generate assets you can do that well so I'm going to say fur web and it's going to say paying twenty four I'm gonna make sure I make a paying twenty four with transparency taken icing awesome looking and then I'll save it somewhere I'll say let's save it and I already gave you the ping if you want to just use that but I'm just trying to show you her so save it on my desktop and there we go got it set okay the pings out there the ping is out there there it is now what I could do is we can use the plug and I'm talking about to create this fabric on so I'm gonna go over and take a look at the admin and let's go to plug its and what we want to do is we want to add a new one so I'm gonna click and ahead new and we're going to do a search for fabric on and the first one we're going to come across the second when we're going to come across I should say is right here fabrikant by real fabric on generator seventy thousand downloads it's updated regularly to pretty good plug in I'm gonna install that and yes, I am going to install it and then I'm gonna activate it okay there we go now we're going to go look for the setting settings or somewhere okay, so I'm gonna go toe like settings something like that and you're going to see fat icon click on to have a calm never go now is we're going to do it's going to say ok, you want to set up your fabric on let's do this goto appearance fabric on so I'm going to click on that now it's going to say let's get the picture you created and if you could see right here it's going to give you the information to sixty by two sixty I don't really have it so I'm gonna keep this blank so I'm going to say select from media library that's what you should do to and it's gonna go over and say ok, let's, go upload the file if we want I'm gonna go upload file click on select file I'm gonna go out to my desktop and grab that ping file we created okay to sixty five to sixty opening up bam! I'm going to select it good and then I'm gonna generate the falcon now it's going to it's magic. This is pretty cool. It's gonna go through and say, ok, we just created all the stuff you could set tons of settings I'm not going to do this if you can read, you can do it, so we're gonna go down and do that and if you take a look, you'll see ok, this is what it looks like you could set compression to all kinds of stuff how good does it look how bad his look and just generated and if you look creating fabrikant doing its thing that's the best part please wait hold on. So if you think about it having to generate a lot of this stuff yourself would take a long time a lot of code there's a lot of php code you can use you got to put in there, but this is actually it's done so now I can go out and I'm working locally it's a lot of times it won't show this have a calm, but if you're up there on the host and you go and refresh your site there you go it's actually showing right there and there needs to work for your design devices that's pretty awesome there's tons of stuff you could do with that as far as generate your fabrikant tried again pick another picture, go in and generated so pretty awesome. Okay, um just the last little thing we're going to talk about here we kind of talked a little bit about basic wordpress commands in the last section I just want to talk to you a little bit about editing, um doing things like editing a plug in you've got to be very careful I just want to mention that because there are some things that we can and we can't do and we're just going to just take a few minutes here to kind of go through if you go and go to your plug ins needs to go back to your plug ins and take a look and what I want you to do is we're going to install a new plug in okay? So I want you go and you click on that and come to search plug ins and we're going to install a plug in and this is something that we're going to do a little later on too because we're going to dive into it but right now it's one to have it out there go in and search for smooth scroll up you're going to see that if you look over here going to see smoothes grow up a lot of us and this is not having to do with necessarily responsive but this is editing your site we want to put something at the bottom of the page where if you click on it it will just scroll you up nice neat we don't have to do that ourselves it's already there okay there's a lot of stuff like plug ins we can use if you look right here forty five thousand downloads just operated amount that months ago right now so I mean install this somebody click install, go ahead and do that and hopefully you see that it wants against plug ins change things move and you know you can find different things to try I'm gonna activate it now this is one thing about plug ins you have to be careful of because when you do when you do create problems when you have plug ins and you installed and you activate them, they can actually conflict with other things that's one thing you have to be careful of if you get a lot of plug ins going on, you're going to see that some things may kind of break something else, so you have to be very careful of that, but in this case we should be okay, so I'm gonna go to the site and I'm going to do a little refresh here, let me go and refresh, ok? And I'm going to scroll down a bit and you're going to see that it looks like it's not really doing anything right now, so you probably have to set some settings on it. I'm gonna go back over and let's take a look at the plug in itself you're going to see we have smooth scroll up, you're going to see that this plug and actually has a link to the settings so good and click on settings and you'll see ok, here we go it's got some stuff we can do now it didn't show up for me because I was on my home page, and if you look right here, I'm like, oh, that's, why it says, don't show on the home page, so I'm gonna turn it on so yes, so we could see what it looks like. So I have to go to another page, this plug in, basically, what it does is it puts little picture out there and just lets you click and scroll, ok, so if I say yes to show in home page, I'm going to save this, ok? And I'm gonna go back and look at it on the site itself and refresh refresh, see what it does well, school down and you're going to see check this out right down here. I love this watch what happens. I scroll up that's, cool down and she shows up so click smooth school done. That was pretty easy. Okay, now let me go back if you look at the options here, going to find that there's a lot of plug ins that they have options, but they don't have enough. You're looking at it going. You know what, the circle's great, the low arrow is great, but I want to use it, don't okay, we're gonna stick with our theme here and what it looks like so I want to do something different so you say ok, well I could try text could say like back to topple go like old school also back to top tech we can say type let's just go with like a text link they have like a pill in a tab and all this stuff but it's still not what I want there's no way to upload an image I can't say doing image here so I'm going to say let's first of all, I'm gonna put it on the right so it's a little bit over there this is kind of important you guys show a mobile device they're going to find a lot of plug ins will give you this option and you have to watch this because a lot of mobile devices java script jake query this kind of stuff this is what makes it happen well either slow things down a lot or won't load or certain things could happen so we have to test but a lot of times we're going toe, you know, maybe turn off fancy stuff like this okay? Because people know how to use their finger like that right and use menu systems so I'll say let's do a little fade on animation we've got some other stuff we can do here, but I'm just going to save it and now what I'm gonna do is go out take a look and refresh my page and school now you see bam okay, now what I'm trying to talk about here with plug ins is sometimes you can edit them sometimes you can't okay I'm saying that it's hard and sometimes is easy if I go back to the plug I want to change that picture right there I really do okay so let me do this actually I'm gonna go to my my settings here I'm gonna right click and inspect this element just like we've been doing hopefully you're kind of used to that by now tio find your developer tools and inspect things and it's going to say ok there it is right there it's like a little link it the bottom cool if you look over the right if I scroll down a bit you're actually going to see that it's pulling in a background image right there this plug in has its own css file this is where we're going to kind of fall ok we're going to falter because if we go in our child theme in rcs has filed we just were like oh I'm gonna copy this style like I've been showing you pasted in change it it's not going to change anything okay? The reason why is because a lot of plug in style sheets are loaded after your theme style sheets which means they win okay, this is where it gets a little tricky. A little interesting. Your first instinct. You go back to the admin if I go back over here in my plug ins and you guys going to see something called editor, I'm gonna click on editor. Your first instinct is to dive in here and you guys can see all the files for the plug ins. I'm gonna go to smooth, scroll up and click select and if you can find where it is it's the key look sees us in that van there's the image I'm gonna go in and edit that. So I'm gonna I'm gonna make it added to that. So I'm gonna go find my own picture put in the oral and I'm done right. It'll work. But the problem with this could be what? The fact that if I ever update this plug in it's gonna wipe up my changes. Okay, so this is something you really have to be careful. It I've been in a tight squeeze with clients before, a lot of times, and you come down to the fact that client's gonna look at it in ten minutes. You need to get this thing done, you know, you're not doing exactly the right way. But I get it done so they can see it. I've gone in here, made changes and then put it back later. What you're going to find is that sometimes you kind of have to find a little different way, okay with our page itself, what we're going to wind up doing is we're gonna wind up taking this style sheet here copying and make it are making it our own and trying to kind of do something a little different with it, okay, so this is going to be a little little interesting, so what we can do is this if I go back over to my files, let me get back into them and these air in my air up on your site obviously lose their upon my server and I go in, I'm working locally, like I said before you guys take a look at your files, you're going to see it up there on the server, there is a plug ins folder and we're going to see the plug in folder for each plug in, so each one has its own folder, so if I dig in there, I'm going to see something like, ok, is a bunch of stuff in here? There's the css file right there? Well, we can do is we cannot edit that directly, like we're going to do through the admin, but beware that it will wipe out if we change things later and we update the plug in what we could do is we could take that css and put it in toward child team and try and fix it that way okay and that's what we're going to dio so I'm going to take this yes that's file and this is where you guys you're going to have to use dream weaver and ftp program and giving them the folders and copy this css into your child team so I'm going to copy this this is the css file that's obviously not going to be the same for every single thing every plugging you're working on I'll go back to my themes in my child you're going to probably start to organize stuff a little bit you guys I'm not doing that right now but I'll paste this in here and there you go scroll up here is the thing we need to do this is the linchpin if you will we have to and if a plug and has built the right way or a theme is built the right way we can take the style she that they have and detach it and then attach her on okay look crazy well here's what I'm gonna do I'm gonna go back over to the admin here and you guys if we go back over to appearance and we goto editor and he had been you're going to see that what we can do is we can actually go for a child theme go to the theme functions something click on theme functions here is all the stuff we've been adding the extra features right side bars et cetera if you go to the bonus files I have a little file in there let me show you where it's at you're going to see any folder called ad smooth schooler and you're going to see school up dot php I'm gonna open that up and what we can do is we can take this stuff and copied into our functions and were gold okay now I need to mention it just one thing here but this is what this is going to do this code is going to d'oh if you look around up here you're going to see something called de register d q there's register styles of scripts there's q styles and scripts ok there's the register and dick you register okay in q style you guys went back up and q style basically means let's go find this this style sheet or if it says in q script we could find a script file like a jobs could file and let's link it to the page this is a way to link to the pain which kind of engine it's a little bit in the last session d q and the register means unlike don't attach it to page anymore so this is actually going to do this now if you look right here you're going to see all this fancy stuff stuff stuff take a look at this bad boy or hear this number nine nine nine nine so this is actually telling it happen after everything this big number is saying let everything load all the plug ins load and then I want you to do this later on okay so after is loaded we're gonna de register it so it's unhooked serious and I'm gonna do I'm gonna copy this stuff just copy it go back over go into your functions file and we're going to face that where there's nothing remember based over there's nothing and you'll see that we've got all this stuff in here now the only thing you need to pay attention to here you're going to see right here get style sheet directory this is going to go grab the creative life child folder that's what that little bit means go to the child theme folder okay once in that folder you're going to see slash scroll up c l dot css that's the name of the file now what I'm gonna do is I'm gonna ask you guys to rename that css file you don't have to but just so we keep them separate and we know which one's ours I tend to do that so what I'm going to do is go back over to those little files and you're going to see that in our child theme here I've got school up css that a copy I'm going to make sure I call it school up your life in there we go now it's the right name okay does that make sense why I'm actually on renaming it just like that I don't confuse it with the original okay this is my version that's it now what I do because we go to functions I update it's going to say get rid of the one that started do ours if I go back to the page and I refresh now if I go I'm gonna go look at the code for the page ok something go take a look at the code you paid source school down I'm just gonna look for school up and you guys going to see there's my style the scroll of css that was there for the plug in is now gone so we now have total power total control because we d registered d included and we can now go in to start making changes so hopefully guys understand that that makes sense now you go into the css and kind of do your thing which is awesome I could go back over to my vp at name if I look in there if I make a refresh the page rather I'm going to start to see that I've got my scroll up clc s right there I go in there, find myself an image, put the right image, make changes. Two sizes, colors and begun.