 Yn ymddangos chi, Cawryn Welsh, yw ychydig i'w gweithio'r thymau a hwn yn cyfaint. Yn ymddangos chi, Cawryn. Mae'r unrhyw gweithio. Felly ond, yw'n gallu amdano ffawr i'w chers. Yn ymddangos, mae'r ffaith o'i Cawryn Welsh. Mae'n gweithio'r cyfaint cyngor newydd o'r cyfaint. Yn ymddangos eich cyfaint o'r cyfaint o'r cyfaint, mae'n cymryd o'r cyfaint yw'r cyfaint o'r cyfaint sydd o'r cyfaint. Felly, rydw i'r prifocol sy'n tynnu nhw'n ymddangos arna. Mae'n gafodd yn gwiriau gyda'r training, roedd y gallwn i'r tynnu sydd yn cael ei gwasgau dyma i fynd i'ch tu bain ar eich oedd. Ond ydych chi'n sgwrdd fydden nhw'n gweithi nhw'n onw, ond i'r tynnu ymddangos. Felly, mae'n cael ei bilynyddiolol o'r tyng innu, mae'n mynd yn ystod yn fwy, ac oeddaeth yn brwysig y fan fyddwyd maen nhw'n ei gwerthoedd. Ac mae'n golygu, ond rai'n gweithio'r cy Edison sydd yn cael ei wneud. Mae'n gweithio'n gwybod ar gyfer gwaith. A'r ystod amser yn gweithio'n gweithio'n gweithio. Yn allan fydd o'r sgwmhwyl o'i'r llythau, yn ôl ymgyrch gan roedd y cyfnodau, a'r ystod o'r cerddau. A'r ystod, mae'n cyfnoddau. I thought it would be really nice to have a theme for my slides and the best theme I could think of was a theme of cats and kittens. There will be pictures of cats. So just to start off, what's a child theme? A child theme is a theme that inherits and overrides its parent's template. That kind of really means that we need to ask the question, what's a parent theme? A parent theme and wordpress is any theme at all that doesn't rely on another theme that's created as a standalone theme. So any theme that isn't a child theme and wordpress counts as a parent theme, which is quite an interesting concept that you can have a theme that's a parent that doesn't have children. So a parent theme doesn't depend on any other theme to work or function and a child theme depends entirely on its parent. So the first thing that you need for a child theme is you need a parent theme and the parent theme has to be installed in order to activate the child theme and the parent theme has to stay installed to run the child theme. So when you've built your child theme you can't just delete your parent theme out of the folder, it has to stay there. So why make a child theme? It means that you can change your theme safely. It means that when you get theme updates in the parent theme your theme isn't broken, it doesn't wipe out the changes that you've made. You can customise the code by changing the code in the child theme without ever touching the parent theme and that's what you do, you don't touch the parent theme at all. When you update the parent theme all your customisations stay within your child theme and the child theme elegantly inherits those changes that have been made when the parent theme is updated. You don't have to do anything, you don't have to worry about that. And it was funny because I was talking to somebody on one of the stands downstairs yesterday, one of the sponsors, and we were chatting and I said I was doing this talk on child themes and he said, oh yes, he said about a year ago I built my first child theme and it's fantastic because now I can update my theme anytime I like and it's okay and I don't have to worry about that and I went me too and it was really exciting. So this is a rallying call that if you haven't ever built a child theme it's very doable, it's very easy, you can do it. So talk about why you might build a child theme and I think it's also really useful to know why not. I made my first website in 1999. I made my first WordPress website in 2009. I didn't make a child theme until about a year, a year and a half ago. So the first reason that you might not do is because you're quite happy with the parent theme you've got. There are people out there, there are lots of people out there who know an awful lot more about design and themes and building themes and all those things that I do and I've been very happy with the parent themes that I've been using. If you want to make really, really minor changes you might be using a theme that... I'm standing in front of my slides here, I'll stand back a little bit. You might be using a theme that gives you the option of a custom style CSS and if you've got a theme with that option in it you can make little changes. I'd recommend that you keep a copy of that custom style CSS but that might be the first stage to doing that and that was certainly the way that I worked for a lot of years. And on the other side of that if you've got really big major changes that you're making you'll probably find that a child theme isn't going to be enough ultimately and ultimately you'll want to build your own theme. And again a way into that might be to start by using a theme framework and learning that way. And the other thing that I would say is that if you are using a theme framework and you're building themes like that you are actually making a child theme off that framework so it is still a child theme. My personal reason is that I have an irrational fear of PHP. It scares me to death it really does. I think there's some rationality in that which is why I've put the irrational in brackets. But I've done my first primary programming language is Python and I've explained to people to have a fear of Python so it's interesting. And life is short. There are lots of things that you can do in life and maybe you don't want to. So let's ask why again. Because you can, life is sweet. The other reason is that because of the GPL so the GNU General Public Licence which is what WordPress is licensed under is based around four freedoms and the second of those freedoms perversely called Freedom One is really centred on the fact that you've got the freedom to change the code, look at the code, change the code, make your computing do what it does. And that's really important and the real un-pinning element of that is learning and having access to the code so that you can learn. So yeah, that's another reason why you might make a child theme. It's a really good way to learn about a theme. It's a really good way to learn about how themes work. It's a really good way to learn about how things are put together. And when I was thinking about this talk I was kind of thinking about an engine and that you know a really good way of working it, how an engine works is to take it apart and have a look at it. Or a really good way to understand how a poem works is to take it apart and put it back together again. Ultimately it's quicker and easier and that conversation that I had yesterday with one of the people on the sponsor stands it was that thing of actually you know you can spend all your time and just give you notes of the changes that you've made to the parent theme but ultimately it's just quicker and easier to kind of get over it and make a child theme. And really the other reason that you might want to do it is you have a need. So I had a need. I have a builder's house. As I say WordPress isn't the only thing that I do. My company website doesn't always get the love and attention it needs to because I'm doing other things. I think that's probably quite a familiar position that people will be in. I checked to see whether my website was friendly. You can go here and you can check to see whether your website is mobile friendly and again about a year and a half ago people were talking a lot about Google and Google search and algorithms and you can put your website address into there and find out whether it's mobile friendly. I did and it wasn't. And then I have this other site so I had another site that I was working with and having made one child theme I kind of got the itch and went on to make another one. I haven't done anything since with a child theme for about a year since then. So let's get going on what you do. So when you download WordPress for the first time this is what you see. This is a structure and this is a group of files. And the directory that we're most interested in in this situation is WP content and that's where the themes live. So within WP content within that directory you have a directory that's called themes and interestingly enough in your themes directory you have a set of themes and if we look inside one of those themes we'll look inside 2016 that's what the inside of the theme looks like. So child theme essentials you need at least one directory and two files so it's a child theme directory and your two files are style.css and the functions.php So the second thing that you need for a child theme after you've got your parent theme is you need a child theme directory you need somewhere to keep your files. So you make a child theme directory you put it in WP content with your themes WP content themes with your other themes and you give the directory a name and the name and convention is to name it the parent theme name dash child it's not compulsory to name it that there may be reasons you don't want to name it that you might want to call it my groovy child theme my first child theme it's up to you but the important thing is that you don't have any spaces in the theme name and then the third thing that you need for a child theme is you need some style you need a style.css child theme style sheet and to make one of those you open a text editor a text editor of your choice and you make a file called style.css and you put this header on it and there are a number of fields that you can fill in in that header some of which I filled in some of which I haven't things like URL your name, the license of your release and the theme it's up to you how much of that you fill in or how much of that you leave but the two things that you absolutely need to fill in are the theme name and the template they're the only two things that need to be filled in your theme name can be anything at all you like but you need a name and your template must be the exact name of the parent theme directory so exactly as it appears the name no spaces etc if you don't want to go on from there and change the css the child style css loads after the parent css it's cascades as it would suggest and the later rules override the earlier ones a comment in css looks like that you saw that on the previous slide with the with the header and if you go back to the previous slide yep lovely your css changes go below the comment that's there only copy and add the styles that you're changing from the parent theme and start simply start with perhaps changes in colours text margins I say that if you've not done any css start at that point all the rules are inherited from the parent style and there are browser tools that you can use where you can look to see what's happening in the css and lots of online help and if you want to go off and do css for the rest of your life there are lots of books and fun to be had so the fourth thing that you need for a child theme is you need to inqu and you need to inqu the parent style sheet and to do that you use your functions PHP file it used to be that the recommended advice was that you didn't have necessarily have a functions.php child theme file but you used an at import statement and you put that import statement into the child theme style style spreadsheet style sheet and that method's now deprecated it's deprecated because it kind of slowed things down and this is actually the better way to do it so it might still see advice that talks about import so it's worth me saying that both the child and the parent functions PHP files load the child themes functions PHP loads first and the child themes functions PHP file is additive so it doesn't override the parent PHP file and that's different from other child theme files so like your style.css you open a text editor and you create a functions.php file and you save that in your child theme directory alongside your style.css and this is what you write in it and if you are panicking or thinking you can't remember that it's all there in the codex that very script so I just want to give a health warning and appropriately for a health warning text heavy slide with the previous script that I've just shown you the child theme style sheet usually just loads automatically if it doesn't you'll need to include the child theme style sheet and that's the line that you add to that previous script to do that and again if you can't remember the line or you haven't got it down on time it's in the codex so if you've got more than one main css file you need to include those too I'm hesitant on all of these things because when I made mine I didn't hit against any of these problems so I kind of want to say well it'll be fine go ahead when I started to do research for this talk it was like oh okay this could have happened and this could have happened okay so I just said that themes differ parent themes, some themes don't you may need theme specific help and apparently you may need to resave your menus and your theme options when you install a child theme so some of the things that you might want to change with your other PHP template files you might want to change for example the header or a footer or a sidebar and if you want to do that you make a copy of the parent theme file and you put that in the child theme directory and you make the changes to the PHP in the file in the child theme and child theme PHP files override the parent template files that have the same name it might be that you want to go further than that and you want to add new PHP templates and you can just do that for example you might be using a parent theme that doesn't have a sidebar and one of the things that you want to put in your new theme is a sidebar and you can add those and the last thing I'd say is to use comments in your child theme PHP to tell you future self what you've done and to track your changes they're very handy especially if you're like me and you can't remember why you did something or how you did it so just to sum up the things you absolutely need for a child theme you need a parent theme and the parent theme has to be installed you need a child theme directory you need a style sheet style.css and you need to include functions PHP and there are a couple of things that I think are really nice to have so one of them is a readme file again you just make a simple text file call it readme.txt and that's your documentation and it's a love letter to your future self really when you spend a lot of time working on something you think you'll remember it forever and then you find kind of two weeks later you don't remember it at all so I big fan of documentation, love documentation I come from a writing background so very comfortable documentation and the screenshot because it's nice to have some visuals if you don't have a screenshot you'll get a very blank looking checker template it's a nice thing to do when you finish making your child theme it makes you feel good it should be a png file you call it screenshot.png and the recommended size for that is 880 by 660 pixels and again you just save that in your child theme directory so I thought it would be really useful for me just to talk through briefly what I did with my child themes and the ways that I was using them so for the first site that I was telling you about was my main working site meant that I kept the visual elements of that site but it was now responsive so I did things like I took the header image and the footer image so visually I kept that kind of style but the whole workings of the site was with my new parent theme or from my new parent theme I didn't make any changes at all to the PHP on that site I did directly with some images that were referenced by the CSS so one of them was I made some icons that gave me custom bullets which was quite a nice thing to do and a couple of other additions in the style.css and then having made that child theme and going on to make another one I had a particular use case and it was a sort of idiosyncratic need of mine with a practical basis so I had a WordPress.com site a site that was hosted on WordPress.com and I wanted to make myself hosted site look exactly like the way it looked on WordPress.com it was for training course and it was for selling training and on that theme sort of almost like the opposite of the other one I didn't make any changes at all to the CSS file that wasn't really what it was about but I did need to add a child theme header and footer files and then outside the theme to kind of make everything look the same I used a couple of relevant plugins so again there's things that will kind of impact on the look of your site beyond the theme so when you've made your theme and you've put your readme and your screenshot in you'll end up with a lovely directory that looks like this that will sit alongside your parent theme directory do you need a parent theme a child theme directory your style sheet you need to incur your styles a nice readme file with your documentation for your future self and a screenshot and that really sort of sums it up when I made those slides and put them together I kind of thought well at the end of them I'll have some resources I talked about the two main resources that I would have mentioned here so one of those is the codex the codex is fantastic everything is there in there read the codex it's great read the documentation keep your own documentation read other people's documentation and the other resource that I think was really worth mentioning was the using the browser tools and the toolbars in the browser but I thought that as we're going into questions of anybody else had any ideas of resources or things that can help people kind of go a bit further with theming or to get started I'm more than happy for those suggestions too so happy to take any questions wonderful thank you Corrine okay so we've got about 10 minutes for questions and we've got some mic runners you guys know the drill by now so put your hand up and we'll get a mic to you go thanks Corrine that was a useful talk it's one of the things that I've always toyed with a child themes but I've actually never actually built one myself one of the reasons for that potentially is that on some themes where I've thought about basing a client's theme on one of the default themes it seems as though I will have ended up changing so many files that it almost seems as though it's not worth it a view of a sort of come across that too yourself and sort of is that the point that you'd say it was potentially the sort of the decision point about whether or not it's worth doing yes I think that definitely sort of fits into the if you're making major changes you're kind of better off starting from scratch often you know you do have there is that belief that if you make a child theme your updates are safe forever and everything will be wonderful there are scenarios where somebody changes the parent theme so significantly that your child theme ends up broken so yeah I think there's a and there's a little bit of kind of how much do you want to do and how much do you want to control and how much do you want to do there's a real benefit from building things from scratch yourself and the inside out and knowing it thoroughly and not having to sort of learn somebody else's practices and learn somebody else's what they've done here and what they've done there so yes I think that's a lot of reasons you know to make your own theme and not build from a child theme thank you hi thank you one of the issues that I've had with child themes sometimes is when a lot of CSS rules are bundled up in the parent theme and it's kind of difficult to unpick them for the child theme if you've got any tips on coping with that so I didn't hear you very well so it's about unpicking what's going on in the parent CSS yeah there's a lot of style that's all bundled together that's all bundled together yeah I I don't know a lot about CSS I can't be very helpful I think looking at the browser toolbars just trying it out is always the best thing take a piece see how it works change one thing at a time rather than changing lots of things together to see whether you can work out where things come from I don't know whether you were in the talk yesterday but there was a really good talk on the Chrome Dev Browser Tools so it might be worth looking back at that to see whether there's more depth that you can get from the browser tools that you're getting at the moment yeah so I'm not sure that's been very helpful but thanks hi so I guess you've talked about parent themes and child themes but there's also things called theme frameworks and starter themes and I wonder as a someone who's setting out to build themselves a theme how do you approach deciding should I be using a theme framework or a starter theme or a child theme or a parent theme I've never used a theme framework so I don't know and there are issues with just using a theme framework and there are people who love them and there are people who hate them and to do with weight and welcome what you're doing with it from my point of view if you're starting out in sort of theming and word press it was an easier start to start with a child theme so I could imagine that you could progress so you could start by making a child theme feel a bit ridgely around themes then use a theme framework and learn a little bit more which isn't to say that you couldn't just jump straight into building your own thing from scratch if that's what your inclination is so I think that it can be progressive, it can be stepped so I'd recommend that, that's a nice way to learn but I'm all for people kind of diving in and taking things apart and trying things out it's probably something I'll probably look at next or maybe have a look at frameworks I'm not sure I'm not sure maybe maybe I might build another child theme most of the things that I've wanted to do I've I've wanted to inherit so much of the look of the original theme and most of what they've done that that's kind of been where I've wanted to go with it and the idea of starting with a framework would mean that I'd need to kind of think about how things looked and I'm not sure that I necessarily always have the time of the inclination to do that with word press another one I thought of is I once heard of the concept I've only heard of it just the once I think that someone actually mentioned about grandchild themes I'm not sure if it was an April Fool actually it might have been I suppose but have you heard of those and do you know anything about that I don't know anything about them I have heard of them again in the research in this talk because I made my themes a year ago and hadn't kind of thought about it again and I was like oh no I've got to do a talk now I can't remember what I did and that kind of stuff so yes I did come across then the concept of grandparent themes and I suppose you could have great grandchild themes as well and go further down it would be structurally it would be a child theme a child of the child wouldn't it so it would be I suppose if you were looking at 2016 child child if you wanted to name it that but it would inherit really would inherit from the child theme above it and I suppose the other way that you might come at that is if you'd made your child theme and then you were going on from there and doing some other further things within your own kind of work environment to make that I'm not sure I couldn't really think of any reason why you'd want to do that maybe you'd have a setup where you had either of those so half a dozen sites and they were built as child themes on a main parent and then each of those half a dozen sites you wanted I don't know to change the colour of the background across them for different organisations and maybe structurally then that would kind of fit into the realm of the child theme grandchild theme thank you following on from that WooCommerce is now basing all their themes around a kind of theme framework so you kind of start off with a child theme and to extend on that what they're actually suggesting is to what your own plug-in which then hooks into the child theme to kind of allow you to have the grandchild theme ability which I thought might be worth noting thank you because I was going to say again when I was looking kind of at research into this I then came across plugins that would make you a child theme and things like that and I don't know I'd just like to be a little bit closer to things than that so thank you are we done? okay I think we're done thank you very much Corin let's give her a big round of applause