 Hey guys, how's it going thank you so much for that amazing intro taco really appreciate it didn't think we'd be talking about music this morning But always happy to so Yeah, my story is is is a little bit interesting So I've been a front-end developer for over 10 years working with different systems obviously have done some droop work and I enjoy the the theming side of things so the front-end is something that I really like to do So start working with the WordPress and really focusing on WordPress development about two years ago And at first I looked at a basic default theme So 2015 just tried to to see how that works Then I tried to install some other themes that I downloaded from the the theme repository Tried to change some options and things like that And I got a good idea of what you could do with WordPress But I didn't really have a full feeling for for what what the possibilities are and the best ways to start as a developer And the best way to build out a custom theme So this is this is about one year After my first word camp I was at word camp EU in Seville last year That was my first one and just amazing to to be here talking to you guys today about theming How many people here are developers who have worked with themes before? Okay, and what about site builders people who are are just using WordPress and designing visually bloggers Okay, very cool. Good. Good blend. So all right Gonna talk about the anatomy of a theme So what what makes a theme function the core files and then talk about three different approaches To starting your theme so start a theme Child themes and theme frameworks What is a theme a? Theme is simply a collection of files that help your site to to take on a new design So modify the way that wordpress looks and and and what it does when you click on things One of the most important aspects of the theme is your style sheet The style sheet is is telling your site how to position things how to show text how to show colors backgrounds margins padding But the style sheet in in wordpress actually does a Different function as well So there are some comments that are really important to the way that wordpress sees your theme We'll take a look at some of that meta info and and how it actually displays in wordpress Templates are important because they control what is displayed So let's say you have a sidebar you have a header it controls where things are and and how how things are actually Printed out to the page the templates you use HTML and PHP So you would need to have a basic knowledge of PHP, but it's not overly complex There's an optional file that you can use in your in your your theme called functions Functions that PHP in your functions This is where you would set things up to to do anything that's custom they surround your theme so Here you would in queue styles you would load any scripts and and you'd also so make it So that that if you had custom functions You would put them in in one place here and in your functions file You do need a good under understanding of wordpress coding standards So you'd want to understand how to work with wordpress and it is purely in PHP This is what it looks like. So I've created a very simple theme. So I've got a functions file I've got an index, which is my template and a style that CSS file in style that CSS You can see there's a comment block at the top So I've taken out the comment block just to show you the basic details that that wordpress needs to display your theme So I've got a name. I've got my my name the user name Description version and some tags and this is important because this is this is what it would look like to take that information And display it in wordpress So this is the the theme information screen and it's a modal that pops up as you're you're going through the different theme options So templates control display logic. They are are positioning the the structure. So anything on your page that that needs to be Displayed that that's dynamic is is controlled by the template So templates are you're essentially using PHP to generate the HTML of your page You can use a template for creating post types for pages Custom post types and anything that that wordpress will will do that you can theme Partials can be included meaning that you can use smaller pieces of code like a header and footer and and use those In one file rather than and having them in all of your template files the functions PHP file acts like a plug-in so it's it's loaded when wordpress initializes the theme and It's essentially where you set up all the functionality of of your site So you've got scripts Styles that are loaded any theme features that are being used like menus sidebars post formats And this is a place a central place to define functions that are used by many templates And it's it's also it's mainly to customize your themes behavior One of the approaches that you could take when starting your site build is to use a starter theme a Starter theme is a foundation for you to start building on. It's an existing code base that will give you some some basic code keep things organized and And and set you off to develop a good site So sometimes they are minimal and sometimes they have a lot of different features That that you'd want to use But mainly you're able to leverage the existing code and and build upon it You're you're working directly in the the file the starter theme file so It's something that you would use once and then if you wanted to create another Another site with the same starter theme you would start again from the base of the starter theme Good to use as your first theme since it gives you some good best practices and good code that that you can work from and It's potentially good choice if you're looking at a starter theme that has some functionality That you'd want to use so for example Maybe a custom post types being included in a starter theme would be really helpful if you're using custom post types potentially using sass or a grid system or using Something like a front-end framework and that could be included in in your starter theme. So you choose what works for you Best practice of using a starter theme is not to update it and you're working directly on those theme files So any any updates if you up the the version to the latest version, you'll lose all your changes Another approach to you theming is to use child themes And child themes are interesting. They they solve a different problem than the starter theme You're essentially using a parent theme and extending it So you're taking something that exists. Hopefully is close to the site that you're looking to build And and you're you're building upon that This is obviously a good starting point because you've got a working site and you're you'll speed up development time based on it Actually working and you're just changing things So the benefits of the child theme so you have all the functionality of of the parent You would be able to add styles. You'd be able to add functions and templates Since it is you're using a parent theme along with your child theme It can be updated and you don't have to modify the code of that that parent theme directly simple to build a child theme Again, it comes down to one important file the style that CSS file and what you're you're looking to do is change a value for Template in the comments and and then of course you so you'd create the CSS file And then you would add any any functions or or styles templates that you'd use in the theme This is what it would look like your your template It can be controlled by folder. So this folder would actually point to the parent theme you may want to use your parent themes Styles so if you want to use the style sheet you can in queue it This is how you would do that just simply in queue the style sheet And then you'd want to do this in your functions that PHP file So this can be done for the parent style sheet or any other style sheets that you'd use in your theme things to know about templates Parent templates are inherited So any any parent template that you have will be used in the child theme unless you override it So in order to do that you would create a template in the child theme with the same name so if there's a The same name child then that takes priority over the parent So you can do this for all of the templates in the parent theme Or you could do it for some or or even very specifically for a single page You can use the page slash slug so you change the the template name to page slash slug or page dash ID and get very specific Child functions Interesting because they they run the parent functions will run automatically so everything in that parent the parent The parent theme will will run Right away, but child child functions will will run before the parent functions So it's interesting because thinking about them running before that sounds like they have priority But it's actually not the case the parent functions if there's a naming conflict would run Afterwards would take priority There's a way to override parent functions And I think that's going to be useful for for anyone who's using a child theme Overriding can actually be supported by your parent theme already So it could be something that that's already in the parent theme as a pluggable function Plugable function is essentially just looking to see if that function is already there And since the the child functions load before the parent It's looking to see if those functions exist already and then running the the child function if not it runs the parent function Another way to override the the parent functions are to use function priority So wordpress functions default to a priority of 10 So what we'd want to do is set it so the the child function has a higher priority So it's the priority works from from lowest to highest So higher runs later and in this case we would want to run the child child function higher than 10 So we can add the the child function to run with a priority of 15 So something to think about here is your parent function will actually run first then your child child function will run This this is interesting to think about because it could cause problems And you you may actually you're not removing the parent function. You're you're just overriding it There's a way to remove so you can remove your function completely if you need to With the remove action And and this is something that it needs to be called after the parent function actually loads The way that you would do that is to call it at a later hook So let's say our parent function happens at initialization We'd want to run it at at WP loaded or some hook that that happens later than initialization So here we're adding an action to WP loaded and removing the parent So if all this child theme business sounds a little bit too tricky or you just don't want to deal with the file system You can use a plugin so you can use one click child theme or several other plugins like it to create your own child Theme just based on on any parent theme that you'd want to use All right, the next thing that you might want to look into for starting your your theme development is a theme framework Theme frameworks are essentially a library a code library a code base to work off they're they're built by experienced developers and They're include things that you would use commonly to support making many sites. So One of the things that's interesting one of the things that's interesting about theme frameworks is that you can use different approaches to build sites out so some of them are visual and then some of them are code based and A lot of these theme frameworks have themes that are already built many That you can look at to reference or even use and swap out Which will have the same functionality as the theme that you're working on So the benefits of a theme framework are to maintain these features across many themes You've got the the commercial developers building them So potentially this is this is going to be something that is well supported and it's done using WordPress best practices Commonly used so your developers actually may know how to work with some of the the frameworks already Since some of them are commercial they provide support and updates It's essentially a parent theme So using a child theme with the theme framework you can update the parent theme to the latest version Development is ongoing. So you won't be in a situation where your your theme developer disappears or the project is not maintained some examples of theme framework are headway Genesis and themify these are our popular frameworks and Headway is notably different because it gives you some drag-and-drop options Genesis and theme fire are very popular. You'll find many themes built on them and around them okay So some things up If you want to start with a solid foundation, it doesn't matter which approach you take But it's important to to have that that base to work with and you can get that from starter themes child themes and theme frameworks The theme framework is something that that you could use almost as a site building factory So you maintain these features across multiple sites. They're well known reusable and supported Something to think about also is that so I've recommended these three different approaches There's nothing to stop you from building your own site So you can always build your own site from scratch Using the the instructions that we went through in the anatomy of the theme So all you need is those simple three files and and you can start building and perhaps that's helpful to to learn by Actually adding in the code yourself rather than them reading through it And there's there's no reason why if you're in a time crunch or there's a short development timeline There's no harm in using a theme that exists already and customizing it and perhaps use that as a parent theme And create a child theme from it So that's it. I'm really excited just to be here to talk to you guys We'll be around after the session at the happiness bar haul G foyer And I guess we can open it up for questions if anyone's got them