 Please welcome Bill Weisbart playing with Chaldean. Thank you, Joe. Thank you, Joe. Appreciate it. Joe's a great guy, and he's forever indebted to me because I was the one who at our Pasadena Meetups figured out how we could actually get coffee that he could spill on himself. Let's see, a little bit about me very, very briefly. I started out my career, well someplace else, and I came to Southern California and ended up working at the other Rockwell Canyon, the one which is in Thousand Oaks, at the Science Center for a number of years. First as a technical person, then as a program manager. And then kind of phased out of that, took a little time off, decided to become a high school teacher. The decision I'm still regretting. I retired from that about a year or a year and a half ago and found myself very lonely, and went back to substituting a couple days a week just because it's super fun. And I got interested in websites a long time ago, but I got interested in WordPress really when I started teaching high school. I was teaching physics and chemistry, and I realized that textbooks had a lot of, you know, good information presented in a very pedantic and difficult to understand manner because I was reading the textbooks and I couldn't really understand a lot of it either. So I started going onto YouTube, which I found to be an amazing resource, which was just in its growing stages at that time. And I developed a website where I just collected a lot of YouTube videos for the students to read and put in questions for them and added some thought-provoking ideas as an adjunct material to my high school lessons. And I tried a couple of formats and I kind of stumbled across WordPress. And I was a little bit kind of concerned about it because being a technical guy, I knew that if you're using something to build a website, to build anything, other than direct coding, that, well, you're not a developer, right? And Jason made a good point of that, but guess what? WordPress is extremely, incredibly powerful. And if you get really frustrated, you can get down into the nuts and bolts of it, which is what I hope we do here today. That's a lot about me. Show of hands. Do you have nice hands? Thank you, put them back. Seriously, has anybody here heard of... Raise your hand if you've heard of child themes. Everybody, great. Raise your left hand if you have not heard of... Yeah, good. Okay, a couple of people have not heard of child themes. Raise your hand if you have used child themes. If you've used child themes. Raise your hand if you're afraid of child themes. Okay, raise your hand if you have coded your own child themes. Raise your hand if you've used a plug-in for it. Okay, some people love the plug-ins. Okay, what I'd like to do today is try to give you an idea of how... Well, not an idea, but a real understanding of how child themes really work, what they do, why you should have them, how to create them from scratch, and even if you end up using a plug-in or not using them at all, at least you'll have an understanding of how they work. And I'll be displaying some code in here. Please do not be too afraid. I don't know if there's any HTML code, but there's some CSS code. Who here has used CSS? Like a lot of people. And I'm sure you all use it far better than I do. No question there, okay? Let me point out that this is at the theme... This address is issues at the theme level, not at the page builder level. And I also am a great fan of Elementor, and I use Elementor and Elementor Pro on a regular basis, and I think there are amazing tools, okay? So, what are child themes? Why do you need to use child themes? And when? And how do you build them? And hopefully that's what we'll go through today, okay? A child theme is an add-on to an existing theme. So you have a theme. There are default automatic themes. Does everybody know automatic? No, automatic is a company which has had some great successes. It's the company that actually has developed and maintains the WordPress platform, and they have some default themes. The default themes are really excellent, in my opinion, because they are extremely well-developed code. They're very robust, they're very error-free, and that's a good starting place. Now, I've used other themes as well, okay? But I generally tend to gravitate back to automatic. Automatic does have some essential problems. Their spelling is not very good. They put an extra T in automatic. I think it's A-A-U-T-O-M-A-T-T. There's too many T's. T-O-T-O-O-T. Okay. You always start with a theme, but now you want to do things to that theme, which may be a little bit special. You want to modify the theme and add some custom capability to the theme itself. Custom templates. Custom page templates is the example I'm going to go through here today. Now, the child theme actually sits on top of the parent theme, and I had a little picture of a kid sitting on a guy's shoulders, but I didn't fit it on the page. But that's really what it does. You have your theme, and then above that, think of it, you have your child theme, okay? And it modifies the theme itself. Now, if I move on, I should move a little more quickly. Oh, why should you use it? Oh, you modify a theme. WordPress publishes an update. You lose all your custom code. It's just gone away. You'll never see it again. Boo-hoo. Your changes disappear. Ah, you spend money on the theme. Who spent $30 on the theme? Who spent $60 on the theme? Who spent $200 on the theme? Lots of people, right? And it's a little scary when you start making changes. Because if you break that theme, what's going to happen? They're going to want to support contract. How much? $50 a month? $200 a month? I don't know. It varies. It varies a lot, right? I'd rather spend my money on other things. Like that suit. That would be perfect. Yeah, snazzy. Okay. Or you just made some really cool changes that you would like to port over to another website. You build a website for somebody. You get some great styling changes and you really like them. And you show that site to another client. They say, I love that. And you want to use those same changes again. Pick them up. Move them to the new site that you're building for that new person. You've already done your CSS. Assuming that you're using the same base theme. So that's important, okay? And if you're really, really, really, really, follow my example and screw it up. You can always press delete and start your child theme over. It will not kill the parent theme. It will not affect the parent theme. That's the key, okay? All right. Yeah, we won't go there. But essentially, my wife made me put in this picture. It's kind of like the file cabinet in my garage, which used to be my office. Okay, the two things you need to know is there is a folder structure. That's very, very important. And there are essential files which must be in a child theme. And this is the key. Oh, this is the key. No, this is really the key. This is the themes folder. Okay, everybody knows that if you go into your, where is it? Into your cPanel, into your host, you have your WordPress, and then you go into WP content. And inside of WP content, you have something called themes. That's a folder. And inside that theme folder, you have one or more parent themes. Currently WordPress ships with three default themes. You can add other themes into that folder. And here you're just adding another theme by creating a new folder, which you're calling the child theme. There's really nothing more to it than that. It's a folder, that's all it is. But it does have to have certain specific files in there. A style.css file is essential and a functions.php file is essential. If you're not familiar with these languages, please do not be frightened. All the code for all the files I'm going to talk about today are available on my website and may be downloaded for a free monthly membership of $250 per week. Thank you very much. Once you give me your email address, which I won't do anything with. Okay, so here's what it looks like. Here's a folder structure. Child themes here is the name of a folder which is the target folder of a subdomain I created on my website just for this presentation. So I created a folder. I point to the subdomain at this child themes folder. That's it. Here are the rest of the WordPress folders. Within this I have WP content, which is where most developers always go first. Within that I have themes and I have some of the default automatic themes. 2019, which I'm not in love with yet. 2017, which I've used a lot and I absolutely love. That's the one where things scroll. I don't know if you've seen that, but it's very cool. But for this I used this very standard theme, 2016. I created another folder called the 2016 child. I made up that name. It could have been anything. No, seriously. You can name it anything you want. The necessary files, and this is essential. You must have a style.css in the theme folder. You must have a functions.php file in that folder as well. The screenshot is optional, but it's really cool. And don't worry about custom templates. We'll talk more about that later. Oh, this is the stylesheet. What's essential here is that you declare a name for your child theme. And that's the first line. Theme name, 2016 child. That's just what I called it. I could have called it my broken car, but I didn't. The other thing which is essential is that you declare the template. This child theme will be using the 2016 parent theme. Whatever parent theme you're using, you have to declare it here. The rest of the stuff should be there, quite honestly. You should put in your developer's URI, which is your website. You should put in the license, all that other stuff, a description, and a version. It's all good so you can keep track of it, but it's not essential. And by the way, this slash and an asterisk declares a comment, and this asterisk and the star, asterisk and the slash ends the comment. And as we all know, comments are ignored by programs, right? Wrong. These comments at the top of the CSS file are read by the, I don't know what, by the browser I guess. And the other one, oh, let me go back. And then I haven't put in any CSS here, but the CSS would follow. So anything you write in terms of styles and colors and div IDs and all that stuff would happen afterwards. You do not have to copy the entire 2000 line style sheet of the theme. You only need to add in a few lines according to the changes that you make. So it's really quite simple, and it's a good way to stay organized. Okay? The functions file, functions.php, please do not be afraid of PHP. You can copy it and paste it, and it works. What we're doing here is enqueuing two stylesheets. Which is the 2016 parent style sheet. And you're going to get template directory, URI, this is a function that basically gives you the path to what? To the styles.css file of the parent. You don't have to know how to code this, you just have to know how to copy it. We're also going to enqueue, that means line up for when the page loads, or when the site loads rather, the path to the child theme style sheet. And now, when the thing loads, when the site loads, these two files will get executed basically. Okay? Good? Okay? Do not, do not, do not, do not believe what you read on the web please. It will kill you. Okay? There are so many references, there are people out there who back in the, in the Paleolithic era were creating stylesheets by declaring everything inside of the styles.css and using an include statement and it worked really, really well except it was slow because all the stylesheets needed to load sequentially and it's like you go down the path and then loading the next one sequentially and yes it does make a noticeable difference in page speed. I haven't tested it with any of the metric testing programs but I have, I mean you can see it. So this newer method is there but the people who did this are well known and so they have great SEO and so they show up at the top of this but avoid this at all costs. Do not do that, okay? Do it with the enqueue function with enqueue statements in the in the functions.php file, okay? Now, and of course we want to have fun. That's the title of this talk. So let's have fun with it. Let's give it a nice picture which will remind us what it is and for this one be a star, no it's 2016 so for simplicity I just said 2016 it does use 2016 as a PNG file and you'll upload that as well and you need to name it screenshot.php in your in your file structure. Now, what does it look like? Once I've done all that work I go into WordPress I go into my dashboard I look for themes and lo and behold I've got 2016 and guess what? I've got a child theme, 2016 child that's the name I declared in the style.css file and I gave it a picture just to remind me what it is and besides that's fun it looks unique and if you show that to a customer they go oh wow I haven't seen that on the web anywhere and you go I just stole the picture off of a free picture site and I kind of like it or this is a picture of my dog that's not a picture of my dog I think that's a picture of something my dog ate yeah and then my dog got very sick but this is a dog okay what if it doesn't work does it ever not work? Yes. Has it ever happened to anybody? Really? Okay this is frightening not every not every custom theme is structured the same way most of them are built with sass files which are partial pieces of CSS and it's structured a little differently and lots of times this straightforward approach to enqueuing two style sheets does not work what you can do is you can go on the web and I'll show you how to do that later okay how do you know you make a change to your CSS file on the child child theme and nothing happens that's how you can test it okay the first thing you want to do is you want to use a plugin called show current template by jocati this is really excellent and what it does is you pull down a list of the files that are actually the templates that are actually being used on your page and right away you can see if it's calling your child theme or not and if it's not then you have a problem like maybe when I did a child theme called Gutenberg's Child I called it Gutenberg apostrophe s child it didn't work because of the apostrophe that doesn't work and it won't get recognized it can be trivial and it can actually cost you hours okay what else cache I'm forever filling up my cache on firefox even though firefox is a really high performance browser so I keep a copy of opera available which I'm always clearing out the cache because that's about the cleanest browser that there is and no bells and whistles but it's good for testing okay move on not pass on oh and if it doesn't work you can go on the web I was using oceanwp which is one of the recommended themes for Elementor it didn't work I had to do a web search I found their code and it looked like that and I copied it and pasted it and it worked it's as simple as that now here's the meat of our talk finally a child theme needs to have certain folders and certain files within the child theme folder I have a custom templates file I have a template parts file which you may or may not need you'll see why a functions.php file and a screenshot and a style.css this is a listing of the files that actually have within these folders within custom templates I created these four within template parts I needed it for one of them for the canvas so I created another file here don't be scared the code for all these files is available on my website what I like to do now is I'd like to take you down the path of a website where we start with a basic page a default page and then develop some changes to it first change that page so it has no sidebar after we've taken out the sidebar take that code and develop a new page template which not only has no sidebar but is also full width and then take that page which is no sidebar and full width get rid of the header and the footer and then once we've gotten rid of the header and the footer we still have the annoying page name so let's get rid of the page name the title and create what's called a canvas many themes come with a canvas not every theme comes with a canvas you with me do I need to stop let me go on let me go on ok and here we go menu home ok so this website is called fun with child themes and this is the home page which just describes that we're at Santa Clara today Santa Clarita today and this is a link to the presentation so you can get to that and I'll give you the URL for this as well it's just child-themes.from- this-century.com and now let's go to the menu and I want to take a basic page using a child thing here I have just a basic 16 page and I put some CSS code into the child theme so my child.css my style.css it starts out with this header which just clears the name and it's all in the comments you've seen this before and down here I have some super simple CSS and I'm sure you guys can do a much better job than I can on this where I'm just defining some spacers giving them full width giving them a height and giving them a color one is yellow the other is blue and then something I use someplace else oh there's the yellow block I just did that in CSS I'm so fancy oh look blue yeah that's about the best styling you've seen all day right I didn't do it with Elementor I love Elementor by the way it's amazing I've used both Elementor and Beaver Builder and I have a strong preference for Elementor I think it's amazing and yes you can build templates with this method and then populate them using Elementor because a lot of the themes don't come with the canvas let's see what else we can do oh check it out where's my sidebar oh because I wonder if I can make yeah that's what I want to do there we go so and then you can see I have a sidebar on the right maybe I don't want that sidebar so I'm going to go to this next page page no sidebar and what do we have ooh it's gone are you impressed no thank you very much and this is how you do it create a new file name nosidebar.php please don't be afraid of PHP open the default page template from your parent theme page.php copy the entire code put it into the nosidebar.php file save it of course and then change the template name to nosidebar so that you can identify it and then look for this one line of code that says get sidebar and just comment it out boom your sidebar is gone yay and there's my sample text but it doesn't take up the full width and I find that extremely annoying so I'm going to go to page full width oh that's nice there it is page full width nice how'd I do it in the custom templates folder create a new file called page full width or full width.php copy the code from the one with no sidebar and change one attribute and you're done you also have to put something in the CSS file and that's the entire it's no more complex than that but it still has this annoying header let's get rid of the header oops it's gone how'd I do it I created a new file copy the file copy the code from the last php file and then comment it out the get header get header function this is a php function and it's actually at the bottom of the code so I'm helping you find it and look what we have we have a simple page with no header, no footer no sidebar and it's full width but it still has an edit thing down there I don't like that so much there's no menu bar so I've got a back page to get out of it and now I'm going to go all the way to blank canvas this one's a little bit more complicated here you have to create another folder called template parts you have to create a file in template parts and so I give you all the instructions for doing that here rather than going through all of this let me just say that it's available on my website and it was interesting I was looking on the web the other day as I was writing this going like well how do I do this again I forgot this has been a well I looked on the web, I did a little web search and I found so many entries that say why in the world would you want to get rid of the title who in the world would want to do that that makes no sense whatsoever there are like 20 top ranking posts that talked about that but in reality sometimes you do for example if you wanted to unlock the secrets the amazing secret of how you will create a blank canvas without you having to pay a developer click this amazing link and oh no haha lead capture this is actually on my main site so has anybody ever seen those before usually in your spam box right and you read all of them and you enter your email and all of them awesome I have such a big spam folder it's amazing I don't actually have any people who email me directly but I have like 300 spams a day now I said this was easy what you must get right for this is the folder structure this might be a little difficult to read but within the child theme folder I have a folder called custom templates I have a folder called template parts I have the function dot php I have the green shot which gives me the nice picture and I have the style dot css boom that's what you need at the top level within the custom templates folder I've created several different files okay and with the template parts folder I only created one file where can you get them down here these are all the files but I uploaded them onto my server as dot txt because I didn't want them to execute so if you wanted to use these and suppose you wanted the functions file you would create your functions dot php file as a new file just with the dot php extension it's an absolutely empty file you would open this text file copy and paste the code let me show you functions dot txt there's the code copy and paste it that's a present to you so all of the templates that I've shown you today are available for you to make on your own using this assortment of files okay how are we doing on time? five minutes I don't have anything more to say I really don't I'm sorry talk slowly I would like to no seriously I'm a geek I'm a talking head I'm not an exercise guy my wife was a ballet modern dancer she's been teaching pilates for 25 years and now she's a performing ballroom dancer and she'll come home from a coaching lesson what they did and she'll do one of these where like one measure takes like three and a half minutes you know and it's incredible amount of control I don't have that kind of control so don't worry about it okay questions I'm sorry yes how can I help you what's copyright and what's not in terms of theme ah okay hmm the question you can add your own modifications on to anything okay and I think under the GNU license that becomes open source so anybody could use your stuff if they could find it I think that's correct that's the idea of word press it's very open um other than that I don't know that there are any rules I mean the thing is that people sell theme people develop themes to sell products make money it's great and if one of those themes fits your needs exactly today that's wonderful but if you decide to use it always always I've gotten to the habit get that theme and put on a put on a child theme even if it has no content even if you've made no modifications because later on you might want to make modifications and you can add them in later um if you flip from one from the parent theme to the child theme and back you may lose the customizer unless you've exported it uh so you want to always start by having the child theme created does that interest question? good thank you yes oh oh oh oh um ah I forgot uh where the hell is that thing give me a second thank you you have to have the dashes and why do I put them in not just to make it inconvenient to type um in the early days of SEO um Google talked a lot about user experience and so I said well maybe what I should do is make the the URLs human readable instead of just a whole endless bunch of characters right and it turns out Google doesn't like that oh did you hear about Google plus? yes it's officially dead what's it? I actually like that one you like that one? yeah okay well I'm sorry for you the one yeah I was like yeah now right from the century dot com that's my company without the dot com um child themes that from the century dot com and I have a contact page there in case you want to contact me um what are we doing? questions any other questions? oh that's frightening no more questions well thank you well thank you everyone