 Hi. Let's see here. All right. So real quick, my name is Lucy, beer. I have been doing WordPress things since about 2004 and been doing training and teaching and helping people how to WordPress since around 2009. And I'm currently working for WP Rocket, which is a caching plugin, and I do customer support for those guys. So that's the boring stuff out of the way. So the fun stuff. Customizing without hacking, a.k.a. no hacks, no worries. So when we talk about hacking, we're not in this case talking about security issues. We're not talking about someone coming in and taking over your site. When we talk about hacking and not doing things in a hacky way, we're talking about hacking up the code and sort of hacking your site to pieces and making a mess of it. So that's what we're trying to avoid with this whole local setup and all of that. So we basically want to show you guys the right way to do things because, you know, no matter what theme that you've got or plugins, there's always going to be something that you're going to want to change, either about your theme or WordPress itself. And there are sort of good and bad ways to do that. And, you know, at some point you might get on the old Google and be like, how to blah, blah, blah on my site. And some guy on the internet is going to be like, oh, just go to, you know, your WordPress core files and change this file. And, you know, maybe you don't know that that guy isn't speaking good truth forwards to you because I don't know if you know this, but not everything on the internet is true, nor should it be believed. So we want to show you some kind of best practice ways to do things so that you can continue to update, you can update WordPress, you can update your themes, you can update your plugins and not lose any changes that you've done or not cause any issues. You know, another important reason to kind of do things in the sort of best practice way is just to give you peace of mind and confidence. That's the whole reason that we're using desktop servers so that you can experiment without having any fears about breaking your site or, you know, creating some kind of a problem. So all of these things are designed to give you confidence so that you can test things out and experiment and, you know, not blow things up. And finally, we want to do things in kind of a WordPress way. That just means, you know, using best practices so that you can keep updating things without breaking stuff. And so that, you know, in the future, maybe someone else is going to help you with your site, another developer, or maybe you're building sites for other people, you want to do things in a way such that other people can come into the site and kind of figure out where things are and you haven't done some crazy off the wall thing that they don't know how to work with. So that's kind of why we're doing things this way. And there's a few things that, you know, are kind of no-no's when you're customizing your site. Like I said, you don't want to modify the WordPress core files directly. Pretty much the only thing that you can safely edit, like we saw before, is WP config and maybe your HD access file, but all the other stuff, all the stuff when you install WordPress, that first set of files, you don't want to touch those directly at all. Likewise, you want to avoid changing your main theme files directly. Once you start modifying those, it means that you won't be able to update the theme without losing something. So the whole point is to keep your custom changes safe. Keep them separate from your core theme so that you can keep updating that, but without losing your customizations. And I think someone already mentioned this, but we never want to go to a parent and editor and start doing stuff in there, especially with PHP files, because as I think Matt or Greg said, you can easily white screen your site if you mess around with PHP files and you miss a bracket or something, your site will go down and you won't be able to access it. So that's just one of the reasons we don't go in there and mess around. And then we don't want a cowboy code, which Greg mentioned earlier. That just basically means doing wild and crazy things on a live site. We want to use desktop server or something like that to do things safely. So what we're going to do today is I'm going to show you an example of how you can modify your CSS code, an example of modifying some PHP code. And then if we have time, we'll talk briefly about what a child theme is. So the CSS is going to be an example of something that, you know, you might read a tutorial, for example, that says, you know, go into styles.css and make this change. So I'm going to show you a way to do that in a plugin so that you don't have to touch that file if you don't already have a child theme. So you should have the plugins that you need. But so for this example, we're just going to modify in 2016, we're just going to modify the site title, the size of that font and the color. And I'm going to give you the code for this and for the other example so you don't have to worry about code. This is just showing you a process that you can use. We're going to use a plugin called modular custom CSS. So if you use the Lucid, if you lucid your site, then you already have the two plugins that we'll need. But if you didn't, then you can install the plugin modular custom CSS. So we're going to install that. And then there is a code snippet on the, oh no, not that one. Where is it? Hi, here we go. Oh no, what am I doing? Yes, it is on the website. I'm just trying to pull it up just in case anyone, what is it? Slides? Oops. Okay, so if you go to Matt's site where he's got the slides, so for the first exercise, this is what we're going to be using. Just right here. So you're going to install modular custom CSS. You're going to come grab those few lines of code. And then let's see here. So then when you go into, why is this? Where is the modular custom CSS? Is it in the sidebar? Yeah, I'm going to get rid of that. And then I'm going to show you where to put the code. I actually kind of like it, but it's not going to work. Wait, did it see actually? Okay, perfect. So where that shows up, you go into customize. And then you'll see down here at the bottom, custom CSS. And you've got two boxes. For this example, you're going to use the top box because we're doing something to the theme. So you're going to paste the code right in there. And why don't I do that too so you can? What's your question? Where are you pasting that code? You go to customize and then you see the custom CSS tab at the bottom under appearance. Appearance, customize, custom CSS. And then you get here and then you paste it in this top box. And then voila. Now you have a giant red site title. If you have a really long site title, it's going to look terrible probably, but it looks fine with a small one. But you know, this is not necessarily how to design your site. This is just an example. All right, so let's even publish that. Did everyone do that? No? Who needs? Anyone need help? All right, I saw some thumbs down over here. Where did the code come from? Or how did I get here? Oh, okay, so go to appearance, then customize, then custom CSS. Do you see it? Okay, let me show you. Here. Appearance. All right, most people got there, right? Yeah, okay. So basically, this plugin lets you put custom CSS changes. It's an alternative way to do that instead of using a child theme. If you just need to make a few CSS tweaks, you don't necessarily need to go through the process of making a child theme. You can basically just use this plugin instead. And it's going to keep your code safe. And so you can continue to update your main theme and your changes will still apply. So it's just an alternate way of doing it. Is there a question? Okay, so where do you get the code? Okay, so you go to appearance, customize, and then look at the bottom. There's a tab that says custom CSS. And then you get here. All right. So yeah, this is an alternate to doing changes in styles.css. But it serves the same purpose, which is keeping your changes safe. Yes? The difference between code there is changing the theme versus the other box. Oh, good question. So the question is, what's the difference basically between using these two boxes? The difference is that if you're modifying something in the theme itself, like we are now, you want to use the top box because it's going to stay with the theme. If, for example, you were modifying something about a plugin, I don't know, let's say you have a social sharing plugin and you want to change the font size on that, you would put that code in the second box because that's going to, that means that if you change the theme, your code for that plugin will still be there. So it depends on if you're modifying the theme style or plugin style, basically. Yeah. So I understand that you modify. So it doesn't matter which screen we actually use or retain code in this CSS code, or is it just for the currently used? It's going to stay, hmm. Because I understand obviously like the current theme, if the publisher modifies the theme or not, the idea is that we can touch your code here because it's not actually in the parents' team coding. But my question is like, if we're using 2016 right now, are we going to be changing to CSS 12 or CSS 14 for another theme somewhere else that we get? Will that code still apply? Do we just pass it there? I'm trying to remember how this plugin works. I think it will try to, but if the class names are different, for example, then it just won't do anything. So you base this code on the class names that were specific to this theme? Exactly. This is code that's specific. Sorry. Yeah. Yeah. This is specific to this particular theme. Okay. So we're out of this for publicism. We're using this particular theme and the publisher for whatever reason has changed the theme of coding like through an update or something. Right. Yeah. Exactly. You got it. You got it. All right. Okay. So it's an example of some CSS. So now we're going to do a similar thing for some PHP. So in this example, what we're going to do is create a new widget area and we're going to have it show up at the bottom of your page. So this is something that ordinarily you would paste this code into functions.php, which is another theme file. So again, this is by using this plugin, My Custom Functions, we're bypassing the step of editing our theme file. Now, if you've already got a child theme that you're using, then you can do things in there. This is really if you're not at the stage where you want to create a child theme. If you just need to, you know, you read a tutorial that says drop this into functions.php of your theme, then you can do it via this plugin instead. And again, your changes are going to be separate, so they're going to be safe. So if you don't already have it, then you can install the plugin My Custom Functions. And once again, the code that you need is down here. It's the PHP snippet. So you're going to grab all of that. And then that plugin shows up under appearance and then custom functions. My Custom Functions. And so actually, let me just chime in. It's great because if you're literally cutting and pasting off the internet, and there's a mistake, and your whole thing goes white, you can go in and just turn off that plugin and everything's back again. Well, actually, even better than that, this plugin won't let you white screen your site, which is the amazing thing about it because PHP is super sensitive. So, for example, let me show you. If I just delete this bracket at the bottom, and I save changes, it's going to tell me that it created an error, so it doesn't actually apply it. Now, if I wasn't using this plugin, if I just did it directly in functions or god forbid, I did it in appearance and editor, your site would be white screen right now. So this one is super helpful for like a safety net, so you don't break things. So it unfortunately doesn't tell you exactly what the problem is, but at least it won't let you break your site. The true example is perfect. It's common that you leave off the last person's bracket. Right. Yeah. PHP doesn't like that. So once you've, sorry, was there a question? Thanks. So once you've added this code, what you then should see is if you go to your widgets screen, now you've got a new widget area called footer widget. So you can just put something in there. Let's just put the calendar. And then it should show up. I'm not saying it's going to look awesome, but it will show up at the bottom of your site. Right. So adding custom widget areas and stuff. Put something in it. Just drag something in there and it'll show up. There you go. Can you miss it? So did everyone, was everyone able to do that? Yeah, any issues? All good? All right. So yeah. So once again, that is, that will help you any time you see something that tells you to put something in functions.php. So we'll just talk really briefly about child themes. You've probably heard a lot of talk about this. So a child theme is its own theme and that it has its own folder in the theme's directory, but it's dependent upon another theme. So a common example of this is like Genesis. Genesis is a parent theme and then you can also get child themes for Genesis. So Genesis needs to exist in order for the child theme to work. But a child theme can be simple. It can just be basically a style.css and a functions.php. And it's just a place where you can customize the parent theme. And again, it keeps everything separate so that the parent theme can continue to be updated. So if you're going to do pretty extensive modifications, then you'll probably need to get into a child theme. If you just need to do some CSS, you can do as we did and use modular custom CSS. If you just need to do a little bit of something in functions.php, you can just use my custom functions. But if you're going to do a whole new design, if you're going to start, definitely if you need to start editing header.php or footer.php or any of those main theme files, then you're definitely going to need to create a child theme. And if you're building sites for other people and such, then you probably will start getting into child theming. So any questions? We have a special guest here, satellite. No, that's it. No questions? All right. Well, on this slide, I have just some further resources if you want to go even further with your customizations. The first two are sort of what we've covered today. And then why and how to create a child theme. So that's going to go into more detail about the specifics that you would need to do to create a child theme. Functionality plugins, that's, you know, oftentimes if you're building sites for other people and you have a core set of PHP customizations that you're doing for them or certain features just for that site, that are not part of the theme, but you can create your own functionality plugin to keep all those things. You can even put that on multiple sites if you do the same customizations for each. And then WordPress hooks. So this is getting a little bit further. More advanced hooks, which again, Genesis and some other themes are make a lot of use of and WordPress core itself has hooks. This is just a way of modifying the way that WordPress behaves or the way that a theme behaves without touching the core files. So anyway, that's a whole other concept, but it's there if you want to go a step further. So that's all I have. So any questions about anything?