Lessons

Lesson Info

Editing Code for Non-Geeks

we're going to dive into code editing for non geeks. All right, so this is Ah, big thing that a lot of people ask me, You know? How do you You know, I need to change something. How in the world do I go about doing it? You know I don't have Dreamweaver. I don't have code. I don't have any of this stuff. How do I do it? The good news for you is that there is built into WordPress, a code editing application built into the WordPress back end. Okay. And so when we're looking at WordPress, I'll collapse all these up. So we're not distracted by any of this mess underneath the appearance tab. You have an editor. Okay. Remember yesterday I said, editor Bad, That's what. Plug ins, right? For themes editor. Good. Okay, Editor, good with plug ins are with the excuse me confusing myself. If you're author is a nice guy. Your theme author, they have well documented code. Well commented code. In other words, Jason is a great person for this. Check this out. In this theme, he tells me step by step, whe...

re everything is and what file it effects. So here It tells me here that the basic set up it pertains to all theme files. So if I want to change the heading across the entire theme, I think you know what the heading is too big or the font is not the right font size. I find the basic set up and see how it's numbered. 012 Where there's zero. I'll scroll down until I find one. There's the basic set up. It's affected all theme files. Remember I said, I don't like the textured background. There's the background right there. I know just because I've studied Web design for a long time. That ah pound sign, followed by numbers and letters, means colors. Okay, pound sign followed by numbers and letters means colors. A lot of people don't know that. That is how we read color on the Web. We don't read it red, blue and green. We read it number Sign F f f f f f f. So it's very difficult for a lot of people to make that distinction. But I also know what a u r. L is right. It's a u R L. It's a a place on the Internet and I see here. Oh, images. If I want to get rid of the image that's in the background and I'm looking at the background and there's an image, chances are if I take this and I don't really understand what this means, but I'm assuming that it's attached to the image right and back over. It shouldn't back it up. OK, now, here's a good little tip. Before you delete that, copy the line. Okay, So take this whole line and copy it to your clipboard, then get brave, then scroll down and update the file. When you go back to your site. Refresh. Now, you notice what happened. Everything went away. Do you know why? Because I didn't do my homework. And that background image was actually an image that covered the full page. So I'm gonna go back. I'm going to paste, and I'm gonna fix it back back in. Okay. We're gonna fix that back, so I'm gonna paste right over it. I'm gonna fix that back. So and this is a lot of what I did when I first get it. Got started. I just went in and picked it apart. If you break something no big deal. You've got the downloaded files. Just re uploaded, right? Always keep a fresh backup. Always. Right now, if I refresh, everything should come back to normal. So I have now determined that this is one big honkin thing that goes across the whole thing. So what am I gonna have to do? Well, I'm gonna have to open up that image in photo shop and change it, or I'm gonna have to figure out how to change this on my own. Using CSS. That's up to you. How you go about it. Okay. If you want to just change in image for a lot of people, especially people who are photographers, that no photo shop changing the image is probably the easiest thing. Dio. Right. So let's go in here and let's take a look at this. Who Photoshopped. Everybody's friend. All right, so this is recaptured. Correct that. I download that today. There it is in my trash. Back on the desktop. You go, friend. All right, so in the images folder, I'm gonna find that image. Okay? There's the background right there. Open it up. There we go. There's the culprit. That's the guy that's really giving me the the problem. Okay, so remember what I said I wanted to do? I wanted to make this black. I wanted to make this area white. I've now done what I came to do. I can now take this and I'll just save it as a new file out on my desktop by itself. I don't overwrite the original. You never know. You might need to get back to it in my FTP program. Ongoing here in my images. And I'll find this is in the theme fold. Okay, you have to go into WP dash content themes. You'll find the theme you want and then find the images folder, if that's what you're changing. Okay, I'll go and find that BG Dodge a pick that I had. Watch this. I'll just drag and drop it over. It will warn me. Yeah, Replace it. I know what I'm doing. Okay. Now watch. I'll refresh. Ding, ding ding. All right, so that's pretty simple. I don't have no any code to do that. All I had noticed Photoshopped Chances are, if you're a photographer, he already in photo shop or light room or Photoshopped elements or anything like that now you can't create that kind of image in light room, unfortunately, but, oh, I come from a nightie background where I've been a systems administrator for 15 years, Supporting website stripped from the server side and one of the things that just gets beat into my head because I've seen it done wrong, and I've done it wrong myself. But I'm supporting a website. If I'm gonna edit a file like that, I'll probably want to copy down the whole contents of my WordPress folder structure down to my local machine. Have wordpress install. They're trialling this sure on a machine in my office or home? Sure. Yeah, everything from the boss then posted up for Really? Yeah, I totally way I don't. I don't stumble over myself because you start doing this at, like, nine oclock in the evening after dinner with a glass of wine, it can get real fun and exciting. Absolutely. Had many WordPress experiences like that. Um, the thing about it is usually because I'm either in a hurry or, you know, for me, it's a convenience factor of being able to work on this, you know, slight live or whatever. I'll use one of those maintenance mode plug ins or something like that to mask what I'm doing. So the public can't see it that way. I'm able to do my trial and error behind the scenes. I do, however, always, always, always keep a backup of the theme files somewhere. The original theme files keep those somewhere that way, like the same. Doing this for client shutter Click came to me and they're, like, build us a website. Dude, I'm like, All right, man. So I come in here and I start building a website, and then I show it to him there. Like we hate that black bar. Where's those great things? You know, or, you know Oh, we like the gray. But we needed it to be 30 pixels more narrow or something like, You know how clients are. No offense. Clients. Um uh, we love you, but anyway, you know, I keep that that way. I can always go in and modify those and just re upload over the top because it's an easy fix. I mean, if I want to get that back, that's simple. I've got those original files, you know, right here inside of Recapture. I could go into images and, you know, I can grab. Was it called BG? I could grab that, dump it and replace it, and I'm good to go. I mean, we're right back to normal, you know? I mean, literally seconds. So, you know, it's there's a lot I worked locally a lot when I'm developing things for a client or when I'm developing things for myself that are going to be, uh, like a big launch or something like that when I'm working on my personal site because it's my personal site. Me, you know, I don't really You know, I don't really worry about that all too much. But like a few years ago, I launched my own training website, and that sucker didn't see the light of day until the day it was ready to go. You know what I mean? Client sites never see the light of day until they're ready to go, and then I take the laptop with me and show them the local copy or whatever. I don't ever, ever, ever put it on the Web. Then I think what he's getting at is probably the map on the Mac and what is it. Wham per something. He's Samp on the PC and Sam, ma'am, on the back. That's how that's how you do that were absolutely. You run a local server on your machine that conserve the PHP files. That's correct. But I'm also using Dreamweaver, so I can point dream we were to my local machine, right? And make the changes I want to do. And then I can tell Dreamweaver to pump that up to the live site for me. So it does all that. Okay. Have you lived like I could do with FTP just quickly? Sure, but I'm not. So what was the name of that Mac, ma'am, Ma'am. M a M P. It's basically a PHP server that runs on your local machine, right? Yeah, absolutely. And actually, if you're using Dreamweaver CS five or greater, they have great controls for working with WordPress files inside of Dreamweaver. Now you can actually make Dreamweaver say okay, because when you first open up a document in Dreamweaver that's wordpress related. It says, Oh, this is PHP file. I can't really I can't really do anything with it. Well, now, on Dreamweaver, there's a little thing that says Get related files. And so when it gets the related files, if you're working on the index page, it'll go out and get header footer Sidebar. All that junk have that open so you can work on those concurrently with each other. And then also, there's a preview button that's live preview that will put it all together and run it in a local environment right there for you so you can see it live inside of Dreamweaver, which is awesome. And if you want to know how to do that, there's a great free tutorial on Adobe TV adobe dot TV that you can use to see that. So are you saying if you have Dreamweaver five, you don't need ma'am? Yes and no, because in Dreamweaver you cannot post content. You can look at the design and edit the code, but you cannot post content. That makes sense. You're basically just looking at a stylized version of the skeleton. I can't actually sort of preview the functionality, but you can preview the look exactly well, that's cool. Yeah, and that you know, they're constantly making because they realize that people are using content management systems more, more, and so they're constantly doing that. All right, let's take a look at some other things that maybe we can change in here. Okay? I'm just looking at the C s s. But you saw me earlier. Like when she asked about embedding the ratings, plugging directly into the theme. Right. Well, you have to kind of know where that stuff lives. Well, in this case, there are a couple things you need to know about the WordPress. For instruction. This goes back to the file structure again. Um, you're single post pages. Like when I click on this to go to see this When I click on that, I'm accessing single dot PHP is right over here and actually says single post. When WordPress sees a file called Single Dot PHP, it says, Oh, that's a single post page. Awesome. Thank you. I'll list that a single post. Here's your page template, which is page dot PHP. Here is your index template, which is index dot PHP. The stuff that it doesn't recognize their custom stuff is down here at the bottom like custom fabric on it. Doesn't know what that is. It just lists the file name. It doesn't know what custom logo is? It doesn't know what Footer text is. It doesn't know what Google analytics is or any of these other things. These are all custom things that the theme designer has added in there. If you're unsure about where something lived like if you can't find it, for instance, if I look at the main index page of this, okay, and I look in here and I'm looking all around and I really just don't see what is on the home page, okay? I don't see what's on the whole. Basically, there's something distinctive on the home page and I just don't see in there. Chances are it lives in one of these custom areas down here, for instance, this theme makes use of something called home dot PHP. That's where the home page actually lives. And so inside of home dot PHP is where I find that's remember I inserted the slideshow on top of it earlier, and I used home that PHP to do that. There's a lot of deciphering that goes into this. Okay, so basically, what I suggest you do is take these files and install it somewhere a dummy site. Okay, a dummy site. Not your real site. Don't do that. Install all these on the dummy side and then just go through. And if you want to know how I did it, I'll tell you. How did It's the most dangerous way in the world. Do it. Go ahead. All right, seriously. Remember I told you he who has the power of the Billy Key, you know, all that stuff. Okay, I go through and I started leading things. And then once I once I delete them, I can see what breaks. And I'm like, OK, if I delete that this breaks Good to know. Don't touch it If I delete this than this goes away, Okay. Good to know that it's the power of attraction, right? And so I just go through, like, for instance, here. Okay, I see that there's something called a gallery. I'm assuming that it's this, but I want to know. So I'll go in here and I don't really understand what this means. I mean, I do, but let's say I don't okay, so I'll just look and look and look and look at those here tells me at the bottom. Oh, there's where the gallery item ends. This is what you're looking for. You looking for these little commented areas of text Because that'll tell you where stuff starts and stops. Okay, so here's where the gallery item in. So maybe I don't want to go that far down. Right? So let's do this. Let's do down. Oh, there's actually where the gallery ends right here. So maybe I want everything to be removed. But the gallery Check this out. Let's cut it. I'm not gonna delete it. I'm just gonna cut it. Command X on the Mac control X on the PC, and I'll hit update. Theoretically, that should be a blank slate blank slate. Now, what did I do? I removed all the post. The pagination. Still there. Why? Because at the bottom here, I've still got this page navigation you can see page and heavy. Okay, so I still got that. So I just go through. And now I know that all that stuff lives in between these two tags galleries. So if I paste it back in, everything is okay. Okay. So I'm breaking them. So within a file, you can sort of look for comments, But what tells you which file toe look at for different things. Well, that's happy. Yes. Or is there documentation? Or there should be documentation with your theme, huh? Theoretically, I would hope. But try Teoh. Use your Web inspector as much as possible because chances are they've named stuff in such a way that you can kind of pick it out. For instance, Member, When I showed you the header, I figured out the headers actually over here. Usually that's up at the top somewhere, right? Which is kind of weird for it to be over there. But that's the nature of this theme, so I would look like if I wanted to find the logo right. I want to know where the logo stored. So I'm going to inspect that, and I'm just right clicking, choosing inspect element. So I'm looking. That's actually in something called the Header. It's inside of a dip tag called the logo. And then there's the logo right there. So if I want to change this, I could go find that in the header of the file, and chances are in WordPress there is a header dot PHP allies. The file wouldn't work, so now I go through here and I'm looking. I'm looking. I'm looking. There's something called Logo. What is that? So I can look at it now? This is logo txt. While txt usually has something to do with text, I know that's not in. So here's something that says Image. Yes, that is what I'm looking for, right? So I confined that, and I can replace that right now. It's got a big PHP. If then statement in there. Generally, if you find stuff like this, like if then statements, that means that it's relying on something inside of theme options. Okay, so like a logo, for instance, most theme options give you the ability to change that logo from a very user friendly perspective. So I go into the theme. This is where you should look before you go into anything theme related like code wise. Look and see what they give you the ability to change on a on a gooey Okay, because look at this, I can change the logo. I can change the fabric con. I can change the menu configuration. I can change the layout. So if I want this to be three columns instead of two, I can change the Twitter user name that's in the link on the home page I can select. Okay, on the home page. I want only a specific category of photos to show up. I can set that up. I can change the text in the footer and I can add Google analytics. There are a ton of themes out there. Orman Clark's themes, for instance. They have multiple tabs of things. You can change stuff like the logo that layout, you know, the slider options. I mean, there's all kinds of stuff you can change in there. If a theme is worth its salt, it has some sort of options that a user, no matter what skill level Congar Oh, in and change. I should be able to theoretically turn this site over to my mother, and my mother should theoretically be able to go in there and put Suzanne's logo in there. Theoretically, right, you know. So that's Ah, those air global things, global change that is going to change the logo on right every page. Exactly. That's why it's delivered by the PHP and not just sitting somewhere exactly, but about backing Google Chrome and you, you clicked on that Elements thing. What What's it called, Inspector? Suspect elements. Okay, um, I can see the logo. Uh, tag there. That indicates Logo's put in. But where does it say what? Actual file? Because I know that right is made up by made up of several files. Tells it right, PHP files. So you look for the image tag. I am g right. And then the source will point you to the actual file. So this lives in WP content themes recapture images logoed up in jail. Okay. And so I actually uploaded something that said shutter click over the top of the original logo. The original logo says recapture, but I uploaded something over the top of it. Just so we have something custom look at, right, Right. So And if you wanted to in this you can actually click on this and you can look at the logo. It's of course, it's white on white, so you can't really see it, but you can see it, and then it gives you the full year l here. And if you click that you are l it takes you to it again. White on white. It's a ping transparent ping with, right? Exactly. Yeah, okay. And so then you could take that. And you could save that to your hard drive. And use that to make a new logo or whatever you wanted to do with it. Cool. Yep. All right, so we're vast approaching on lunch. Let's take some questions here. We're gonna after lunch. Talk about CSS crash course. So that's gonna be a fun one. So many questions. Um, I'll start with one from KZ again. What is the difference between home PHP in index PHP? Not all themes will have a home, not PHP. All themes will have an index dot PHP. Without a doubt, the only time that somebody would use a home dot PHP is if they wanted to have the home page look completely different than the rest of, like, their archive pages or something like that. In this case, they're making use of the home dot PHP because of the fact that in the options panel you can set the homepage to display a certain category. Whereas in most cases your pages were just going to display whatever's there, right, So that would be the only reason you do is home page was used. PHP are There's some that use python. No, all WordPress dangerous PHP. Okay, what presses a PHP driven system? A Angela's asking, Where can I add the Google Analytics code? Or does that have to be included in the theme option doesn't have to be included in the theme options. Most of the time, you know they will offer you some sort of Google analytics config like this, and then you save it. My recommendation would be to put that in the footer of your team, if at all possible, because that will be one of the last things. It's loaded. And generally Google Analytics is kind of slow to load the Java script that goes along with it. You don't want that in the header, because that can cause, um, you know, delay and how fast stuff appears. The faster your content is delivered, the more instant satisfaction of your reader gets. So it would be better because people don't care that this is designed by me or powered by WordPress. So if that takes a little bit longer to load, you know, no big deal. So what I would do is take the code you can get it directly from Google Analytics will give it to you. Right. And then just go find your footer dot PHP page, which is in, you know, your FTP. And then you can see right here in this one where he actually puts it, he puts the Google analytics right before the end of the body and HTML tanks. And that's exactly where I recommend to put it right above the body and html closing tags. So if you confined slash body slash html put it right above that Merrill. So I would like to know Is there any way to restore changes after doing different changes when you've done it in inside of WordPress? Unfortunately, no. No, you just have to. That's why I always said, copy and paste, Copy what you do before you change it. No way you can go back. Hopefully, they'll add a more robust editing system and J c I NPV would like to know how can I have a different header for different pages? Okay, different header for different pages. What you will have to do because wordpress uses this, uh, hook. So if I look on the index page and let me blow this up so you can really see what I'm talking about. Here. Let's go in here to the editor and select and lead changes to, like, 24 point fun. Here we go. All right, So if you look at the top here, see what's his PHP get header. So when it says PHP get header, Basically, what it's saying is, go get the header. Well, if you want a different header on different pages, first of all, you're gonna have to learn about page templates. And you can look at that up on the WordPress Codex. And then instead of get header, you're gonna have to use PHP include on that. And so, if you go to Wordpress, if you did a Codex and we're gonna go over how to use the WordPress Codex so we'll probably save the meat of this for when we actually talked about that. But you go to the Codex and you can actually search for that. And I'll make a note here. And when we get into that, I will talk about that and that'll be after lunch. Okay, take a couple more questions. Okay. Texas had asked, Why not make the changes you were talking about in a child theme rather than alter the main scene well, in most cases, you don't have a child seem to alter, like if you buy something from press 75 premium pixels, it's a theme. It's not a framework that runs on child. So if you have the ability to use a child seem like with builder or genesis or headway or whatever it might be, then yes, make changes to your child. Theme versus the core theme? Absolutely. All right, maybe one more from dis Sanski How the question is how to change the size of a featured image, and I know it depends on the theme, but where do I find that you'll find that inside of functions dot PHP? So, inside of all of your WordPress installation files, you'll find that And if they've commented it, it should say something like WordPress thumbnail support. And then you look for the sizes here. So if I wanted alter this, I just changed the dimensions. Your whip, this first your height is second, okay, and you can read more about that on the Codex. I'll discuss that when we talk about Codex as well. Mark that down or go