 I want to get started by polling everyone in the audience. So I want to ask, have you ever used a child theme before? By show of hands, if you've used a child theme before. And, well, OK, fantastic. Well, this is intended for everyone that wants to know a little bit more about child themes, but it's really just a overview of how child themes work. I intended it for beginners, for anyone interested in theme development. And so I hope you were able to take something from it. My name is Joseph Dixon, and I am a web developer at Pitzer College in Claremont, California. And that's about 30 miles east of here, right on the border with San Bernardino County. So I've been using WordPress now casually since 2009-ish. I honestly don't remember the first time I used it. And child themes were introduced way back in WordPress 2.7 Coltrane. That was the earliest reference I could find to child themes, although I suspect they may have been around a little bit before that, hence the asterisk on this slide. Simply put, a child theme inherits features from a parent theme. So what's really useful about this is if you create a very basic child theme, everything that gets pulled into your final website project is essentially the parent theme. So what I mean by that is practically every theme is a parent theme. In some of these examples, I'll be using 2017 because it's been around for, what, two years now. And it provides the ability to, child themes provides the ability to tweak and change the existing theme that you're using as the parent. It's actually a core mechanism within WordPress to allow you to make changes and improvements to a theme so that you can customize it for your project, whether it's improving color contrast or something as simple as just changing some colors of fonts. So really the top reason for why we should use child themes is so that the parent theme will receive updates and your child theme will remain completely untouched during that update process. Something I wish I knew how to do back in 2012 when I started working with WordPress every day. I would go in and I would make the changes to the existing theme and I would save it and then I would hit Update on the theme and then I would lose all my changes. So that's essentially how I learned about child themes was Googling, why did I lose all my code? I did have a backup. So the advantage of a child theme is when that update runs, your child theme is in a completely separate folder. So from that respect, it's separated from the parent theme. You can speed up development time. This is super useful if you're working on a quick website for a friend, a colleague, or even your work. And all you need to do is make a few changes add a few features and you've already got that base parent theme available from the original maintainers. And whenever they push those updates, you get to receive those updates and it benefits you in the long run because it will reduce the amount of work you have to do as a web developer or web designer to maintain that project. You're only maintaining your code. So to get started with child themes, we really only need two files, style.css and functions.php. And you will end up putting that in a folder, which you'll then upload to your website. So to start out with style.css, this is the comment block on your style.css. If you've ever looked at any WordPress theme before, this will look familiar. It tells WordPress what your theme does and how it functions. But with child themes, it's a little bit different. There's a few additional bits of information. So I'm going to break it down just in case the slide doesn't make it to the video later on. With style.css, you have the, in the comment block, you have the theme name. So in this case, if you were to head over to my website, you could download a child theme and look at that as an example. And this is the same header from that project file. So we have the theme name, which is the title of your theme. You could name it anything you want, a project or whatnot. The theme URI, that's the URL you would provide to your client where they could find information about that theme, version information, contact information. The following that is description. That's a short description. Author information. In this case, that would be your name and the domain of your website. Sometimes if you're working within a larger company, the theme URI and the author URI could vary. A version number. You'll notice that my version number is 1.0.1. I noticed some typos in my style sheet. So I went in and fixed it and uploaded another version. The license is the GNU Public License for this. So you can feel free to use it any way you like. Additional tags for the WordPress dashboard and text domain. So all in all, this comment header is what will tell WordPress everything about your child theme that it will need in order to activate it with the parent theme. I think I skipped over the most important part. Right there in the middle, we have a template reference. Without the template reference, WordPress will not know what your child theme is based off of. So that will tell WordPress which parent to look from. And that folder name is actually the folder name in your directory of where the parent theme is. You don't have to use a parent theme that's pre-developed by some group of people like WordPress.com. You could use child themes for your own projects. So if you've created your own theme and let's say you need to run off a separate version for a custom home page, you could do that as a child theme and still benefit from your previous work. It's a little bit more complicated. I'm just going to go over it really quickly because I realized it's not very easy to read. In functions.php, this is where you will tell WordPress where to grab the style sheets. So we're using the tags at action with WP and Q scripts. That's a little call out that WordPress uses to expect JavaScript or CSS. It's used for both. You'll see 2017 child and Q styles. That references the function below. And in this case, the function is actually pretty simple. I'm going to tell my child theme that it needs to in queue two style sheets in order. The first one is going to be the 2017 style sheet. So you'll see that there is a reference to WP and Q style. 2017 style is the handle I'm giving it. And then there's a tag here, get template director URI. What that's going to do is it's going to look into the template directory that we referenced in the previous slide. So it's going to look in the 2017 folder for the style.css file. Following that, we do the in queue of the child style sheet. And that one's very similar. We end up giving it a handle. This time, 2017 child style. And then we're going to look at the style sheet directory for the child theme. So this is actually going into a different directory space. But they're both going to grab the file by the same name. The handles that are provided in the in queue process are useful if you run into any problems. You could check your source code and see if it's going to the right location. So by checking the source code, it will label it 2017 child style. You'll click on that. If you get a broken link, then there's going to be something wrong. And that's really all you need to create a very basic child theme that does effectively nothing. At this point, you have an empty style sheet. And you have the parent theme style sheet. And that's it. You zip those up into a zip archive, upload, and activate it. Now, in this process, I would highly suggest that you don't do this on a production server. You'd want to do it on a local host or in desktop server. Because if there's any mismatched semicolons or my favorite in PHP, if I miss a semicolon or put it in the wrong place, I'll end up with a white screen of nothing and have to go in and delete the file to recover it. Or in a better scenario, I have a broken in queue. And this is an example of there being some sort of style sheet mismatch. So in this circumstance, I purposely broke the parent in queue so that it couldn't find the parent theme's styles. And what it did do, though, was it still knew that 2017 was my template. So if you were to go into the dashboard, you could still treat it as though it was 2017. But it would never display write until that in queue is fixed. Once it's fixed, you'll have something like this. It's a 2017 theme. I'm sure we've all seen this before. You'll notice there is a small difference in the custom logo right next to the header. That is a border radius that I added in my style sheet.css. That is the only change I made. That was my initial change on my child theme as I was building it out. Just creating that border radius. So CSS is probably the most useful part of using child themes. If you want to make custom changes to a preexisting theme, the style sheets will be contained within your style.css folder in one place. Now when you're working with a parent theme, you'll want to grab a notebook and take notes onto what styles and classes do what within your parent theme so that you can override them later. So my favorite tool of using this is browser inspection tools in Firefox, although I'm only 4% of the internet that still uses Firefox apparently. So it'll be OK. If you guys want to use Chrome, go right ahead. So in this case, I was doing some inspection because I wanted to change the headlines for my child theme. I didn't have anything against Libre Franklin, which is the font that 2017 uses. I just wanted something with Saras. So this is a way that I could customize the fonts just using CSS. So some of the advantages of using CSS in the child theme is what I've just stated. You could tweak the typography, the borders, the color. You can adjust negative space. So if you have ever worked with a theme that has a lot of white space in between paragraphs and you just want to tighten that up, you could do that within just the CSS of a child theme. Additionally, you can improve readability. Visual accessibility is a big item right now. And I can't tell you how many times I've found the perfect theme that is almost perfect, except the designer wanted to put gray on a gray background. So there's no way you're going to pass triple A accessibility checks with that website. Hiding elements in CSS is extremely easy. I'm sure everyone here that's worked with CSS has done it. That's an easy way to just remove the little footer comment that's on the bottom of almost every theme about the person who created it. And then, of course, there is portability. The one advantage of using cascading style sheets in your child theme is that it's not part of three different plugins or four different plugins. It's all in this one file. So if you were to work on your local server and then finish it up and it's all perfect, you download it and then put it up to the live server and activate it, and all your changes will be there. Now we're going to talk about functions.php and what it's used for and maybe what it shouldn't be used for. But effectively, it's adding plugin-like functionality to support your theme. It's best used for theme-specific improvements. So what I mean by that is adding a third or a fifth or a seventh menu to a website if you have a very menu-heavy website. Specific plugin support. Let's say you need to add some support for advanced custom fields. Or your parent theme is using Jetpack and you're using it for a photo gallery. But like I did a few weeks ago, I discovered that Jetpack has it in this small little 720 pixel container. And I'm doing a photo website that I want to be full width of the website. Well, you can go in there and you can override Jetpack's default styles within functions.php. And it works best for adjustments to functionality for the sake of your theme. So I have a few examples coming up here. One of them is open graph support. I started using 2017 only a few months ago. Before that, I was really happy with 2016. So I just sort of stuck with it for two years. And one of the things I noticed when I jumped onto Twitter was that my featured image wasn't showing up on my tweets. And the way to fix that was to add open graph support. So I did a few tutorials. Again, if you download my zip of my child theme, I have some URLs in there as to how I did it. And you can look through that. But effectively, I added code into functions.php that allowed me to display my featured image if it was in my post, as well as my excerpt. And then if there was no featured image, which you see on the right, it would display my side icon. So that way my tweets and posts to Facebook when I was on Facebook would be a little prettier. Another example is I referenced this earlier when I had replaced Google Fonts on my website. I did this partly because I do a lot of web development while I'm disconnected from the internet. And the one thing that frustrates me the most is not having Fonts render. So one of the things I looked into was whether or not I can remove the Google Fonts call out to the 2017 theme, which is entirely possible to do. And in this case, I added my own self-hosted Fonts. So by adding the Fonts to my child theme and then again into my CSS, I could self-host the Fonts on my server. So I know it's really hard to see in the back. But if you do an inspection for Fonts on my website at joseph-dixon.com, you will see that it's actually pulling the Fonts from my WordPress server rather than a Google's API. The secondary benefit of that is privacy badger notices that there's no third-party trackers on my website. So I get a green little box. OK, so we're going to go into template hierarchy for a little bit. And followed by that, I'm also going to talk about template tags and then conditional tags. Template hierarchy is something that WordPress uses in theme development to tell WordPress which templates to use during certain circumstances. So a child themes template will always override the parent themes template. So if you have a page.php file in your child theme, it will override the ph.php file in the parent theme. This is extremely useful for making small adjustments. You can copy the page.php file and make a little adjustment, maybe add some code for an advanced custom field for the advanced custom fields plug-in, maybe like a text widget or something. You can add some additional menus, whatever you would need to do for your project. And it's really good for creating custom templates for your website. So an example of that would be, let's say you're building a website for a photographer and he specializes in portrait photography and maybe wedding photography, architectural photography. They're all different types of photography, right? They have different audiences. So you could figure out a way, you could use child themes to create special templates for each category. And that will allow you to do some custom bits of code that will display additional information for each one. So imagine you're having a special on architectural photography, right? And you want to provide a 20% discount to people who are hiring you for that purpose. You could put that in your template and code it right in there. But you don't want to give that 20% for wedding photography. Likewise, if you're doing a wedding photography site, you also want to tell people, OK, I'm only available on Saturdays for wedding photography. So you could put a little widget on your website through your child theme template for the page or the post. This big monster is the template hierarchy in a graphical format. What we have on the right is index.php. That is the one file every WordPress theme needs. And it is the file that will load when no other file is available. So what will happen here is that everything on the left will override everything on the right, effectively. The purple one is the defaults, the default PHP files. The green ones are basic overrides. So at the top, we have author.php. And to the left of that, we have author-cache symbol ID. If you ever look at the template hierarchy on the website, and it's a good idea to do, you can create custom templates for each author. So if you're building a website that has 12 different contributors and you want to customize it for each one, maybe add their Twitter account information or Patreon, you could do that through the author ID process and a bunch of others. But what I'll discuss here is what I use template hierarchy most for in a project is changing the home page. I don't know what it is about the internet, but no one cares about what the inside of a website is. When they're hiring you, they just want that home page to look a particular way, and they'll let you just work on the rest. And I think it's kind of silly because the home page is probably one of the least important parts of a website when it really comes down to it. But let's say you have this great project and you just need to build a home page because you don't like 2017's home page styles. You can go in there and you could either do home.php, code it up any way you want, and that will override the home.php file. If for any reason you want to go even one level higher, you could use front page.php, which will override home as well as any front page.php file that might be on the parent theme. This is fantastic for creating custom home pages, and I have probably got something like 65, 70 child themes at the college I work at. And I kid you not, a good 70% of my child themes is just the home page. It's kind of funny. So template hierarchy comes in very useful for creating custom templates. You can add custom page templates for different circumstances, different archive templates. So I had mentioned earlier about photography with category templates or tag templates. You could do that as well. And you could even create conditional templates. And I'm going to cover that closer to the end. A template tags are what is used within a template. So when I mentioned the enqueue earlier, when I was directing it to look into certain folders within the WordPress directory, that was kind of a sample of a template tag. What it essentially does is it will grab the information that you have stored in your database, or it will grab another template file. So you could use it dynamically or otherwise to grab information for your website. And so there's a ton of information on WordPress.org at the template tags URL. They've got, oh man, I haven't counted it, but there's got to be at least 200 there that do many, many different things. And some of them very similar. So an example of template tags would be the title. That tells WordPress that you want to grab your post or page title from the poster page. And the title varies from get the title in the sense that it will post that title with an H1 tag around it and a class tag that says post title. The only problem with using the title is if you want to post an unordered list of posts and pages somewhere. Well then you would want to use get the title instead and use PHP to echo that out. Once you echo that out, you can just have it post just the title, name itself, and then you can code it up in some bold tags or hyperlinks or whatever. Likewise, the same thing happens with the excerpt. When you use the excerpt to pull out information on your index file or your archive, it's going to add all of the code that goes along with it. Or you could just echo the excerpt without any HTML or stylings if you want to do something really custom. Conditional tags are a little bit different. These take a Boolean statement in the sense that if a condition is met, whether it's true or false, you can wrap your code around that statement. So these come in really handy when you're working with a template like a sidebar, a footer, or a header. And you want to check to see whether or not a particular page or post is being loaded. And you could change a little message in there. So a good example of a conditional tag would be to check if you're on the home page. You would put this little check on your header.php file. And you can quite literally say, echo a particular message or print a message on the website that says, welcome to the home page. You could use this to do all sorts of crazy, wonderful stuff. You could do it to check for the home page, check for the front page. Those will look actually for the PHP versions of those files. And then you could wrap the code around those to see what they can do. Likewise, you can combine these statements and conditional tags together. So you could check to see if it's not the home page or if it's not the front page. And you could send a particular message that way. I've used it to check for whether or not it's a particular author page. Or I've checked to see if a post has a particular tag or a particular category. And in this way, I've gone in and added class tags to the website so that I can customize those particular templates in my CSS accordingly. But what's most important about child themes is that you can use them to make the theme your own. One thing I passed over way back at the beginning is if you put a screenshot.png file in your child theme, that will give you the ability to take a screenshot of what the website looks like. So if you're providing a child theme to a dashboard of 20 installed themes, you could take a quick look at a glance at every theme you have installed. If that file is missing, you'll end up with an Adobe Photoshop style grid. But it will still work without it. And I went through that way too quick. So we've got about, jeez, I think 20 minutes left to go. Let's open it up to questions. I know I rushed through that really quick. Yes. Well, I'm glad you asked that because I purposely left the customizer out to try to avoid confusion. I use the customizer to, you're talking about CSS in the customizer, I use that to override everything. So let's say you're working on a website and you're not quite ready to commit your CSS to your child theme just yet because you want to see if it actually works, or quotes. You can use the customizer to add the code there, try it out for a couple days. And then if it looks like it's working for you, pull it back into your child theme and update your child theme. Did that answer your question? It will override your child theme. So it's the top level. Yeah. Oh, I'm sorry. It will override your child theme if your CSS specification is high enough because that's really what the override will do. Next? Uh-huh. OK. I know exactly what you mean. I actually had a project at the college just a few months ago where I was working with an outside designer who relied on plugins and visual composer to build out the website. In that case, I still used a child theme, but it didn't actually provide any framework. What it did was it provided the container for in which this developer was able to work on their project for or on her project. So what I had done in this process was I provided a fixed header and a fixed footer and instructed them that they can't change that information. But everything in between the two they could use with a visual composer any way they like. And it actually worked out pretty well. So in that project, she did use several plugins that had CSS and that had JavaScript. And visual composer throws in a lot of that stuff when it displays. So yeah, it'll work with child themes. Did that answer your question? Right. Well, I suppose the negatives depends on the circumstances of how your server is set up. When you have a lot of plugins running on a website, that's a lot of JavaScript and enqueues. And when a website loads, unless it's being cached using a caching plugin like WP Supercache, then it could take a little bit longer for the website to load. If your website doesn't get a ton of traffic and that extra half second essentially doesn't matter, the people going to your website will go there regardless of how long it takes to load. Then by all means that half second or quarter of a second longer it might take isn't really that big a deal. That's my professional answer. But my personal answer is I love to do these things in child themes so I could reduce the amount of time it takes the server to respond. On the left? Oh, I'm sorry, in the back of the bald head. Thank you. OK, so you're asking me about, I'm just repeating this for the video, you're asking me about how much code and how much work should you put into functions.php. I try to keep it as minimal as possible. If you want to make a few small changes for the theme's sake, then you definitely want to put that in functions.php. If you want to add a really complex plugin, let's say something like an events calendar, that's going to be a huge project and a huge undertaking. And you won't want to necessarily do that on functions.php because you might want to containerize it into a plugin because at some point you will update your website to another theme, right? So think of it this way, if you change themes tomorrow is that feature going to be in the next theme that you choose, pre-built in. And if the answer is yes, then you could leave it in functions. But if the answer is no, I'm going to have to add it anyway, then that would be a case for creating a plugin. And although I didn't mention plugin creation in this talk, it's actually very similar to using functions.php. I would just tend to suggest keeping it as simple as possible when you get started until you get a hang for it because that file can get really long very quickly. Any other questions? See you on the left at the blonde hair. Sorry, I have two answers for that. First, I would say always back up your CSS and changes somewhere else beyond the customizer just in case it gets lost when the theme switch happens. I think I've seen it happen, but I don't remember it actually happening to me. You can make a child theme of a child theme. I didn't go into it because it kind of gets into this whole inception thing. But you can create a child theme of a child theme of a child theme, and you can keep on going if you needed to. So that's always an option. It just means they have to enqueue a few more things. That way, if the person working on the child theme does push an update to their child theme, then your child theme will still have its styles in place. It will rely on that code, and you won't have to change anything. I kind of wish I had an example of that, because it's kind of a funny scenario. OK, I saw some hands on the right. Yes. Well, OK, that is something I didn't cover. One of my concerns with working with child themes is when you remove features like removing Google Fonts and let's say they give you that feature to add it back in, that will probably be broken on your child theme. So what you'll want to do at that point is decide to remove the functions.php reference to the fonts that you've added to your child theme. So it's kind of like an iteration process, right? If the feature becomes part of the parent theme, then there's really no reason to have that feature in your child theme anymore, because you have more support work to do on it. So you could just essentially delete that part of the code, maybe archive it for another project later on. Additionally, there are a lot of plugins that fit that need of inserting fonts into your website. So you could effectively say, OK, we decided to use this plugin because it's better than what I did or what we did previously, because we want to change our fonts on the fly. And we kind of need a GUI, a GUI, a physical GUI admin interface for it to make it easier for the client. Again, just delete it and use the plugin. Yes. You just did it. You just spelled CSS. I should be at the beginner. Well, you update your child theme yourself. So the parent theme is somebody else's project. You can look at it from this standpoint. The parent theme is somebody else's project. And the child theme is your project. So the only person updating the child theme is you. However, the parent theme will still receive updates. So when you go into the WordPress dashboard two months from now and your parent theme, if it's 2017, for instance, has pushed a major update, getting ready for Gutenberg on WordPress 5.0, then you could hit Update knowing that your child theme adjustments will still be saved within your child theme. Did that answer your question? Both of them run. Something I forgot to mention earlier when we were talking about template hierarchy is that templates, the functions.php file for the child theme actually runs first. Everything else runs after the parent theme. So you're effectively running two themes on your website. Oh, yeah, yeah. You have to have the parent theme installed. Yes. Yes. What happens is you'll have your parent theme installed in your themes portion of the admin dashboard, but the active theme will be the child theme. But they rely on each other together to publish the website. It's going to load the child theme, and the child theme will tell it to go and look at the parent theme. You just have to make sure that the parent theme is installed. Another thing that I forgot to mention is that little template tag in the template.css that tells WordPress you're using a child theme. If you try to upload a theme, and it has a reference to a template parent theme, and it's not installed, it'll tell you this theme isn't installed. Would you like to install it, especially if it's something that's in the WordPress directory? So you can kind of fix the problem going through. Yes. OK. That CSS. I've done all the operating when I switch to the responsive theme. The whole thing breaks down because everything is dead. Yes. So what? Oh, sorry. I want to find a way to CSS as about 3,000 lines of code. I'm trying to find out what that original theme has installed to break these into parts so that when I switch the themes, it will not take down the structure. I don't know if you've dealt with anything like that. But really, this case is why you need to have all this child no matter what. Yeah. So what you're basically asking me is that you've inherited a website from another developer or designer that has a ton of CSS code, and you want to build a child theme that's responsive because the original website was not responsive. And they've got 3,000 lines of CSS, and it's going to take you a month and a half just to read it line by line. There's no perfect answer for that. All I can tell you is to try to understand what the developers were thinking. You can create a child theme of it and introduce media queries into your child theme that will move the sidebars around in everything. But at the end of the day, it's going to be a lot of work. There's no quick answer. Sometimes you might have to build a new parent theme and just start from scratch and make it look like the old website. You know what I'm saying? That might actually be less work building your own theme from scratch and then going and creating a child theme off of your own theme. So you could just throw that other stuff into an archive somewhere and back it up and never think about it for 20 years. Any other questions? All right, I think did I catch everyone? It looks like I caught everyone. OK, great. If you guys want to download my slides or the child theme that I created that I sort of referenced in this presentation, there's a lot of code references in there that kind of explain everything that I was doing line by line. There's also a post that you could check out on my website as well. Thanks for your time, everyone.