3.1 Organizing Your Customizations

Hey this is Kez. Welcome back to WordPress Theme Creation with Underscores. Now in this section of the course, we're gonna be working on just adding style. And because we're completely working with the CSS of the theme, that means that all our edits for this section are gonna take place inside the sass folder. Now as we go along, we'll be adding some custom variables and mixins, and we'll be adding some custom styles, and we're also gonna be making some changes to defaults that are already in place within the Underscores theme. Now the thing that you don't wanna do with a project like this is just directly edit the existing theme's sass files. Now the reason is that when updates come out for Underscores later, it will be a nightmare for you to remember which files you did change, which files you didn't change, and what the code was that you customized in the files that you did change. So when you're working on top of any project that's going to change over time, you need a process to make it easy for you to keep track of the customizations that you've made. So in this lesson we'll take care of setting up that organization. Now the first step in creating this organization is to set up a new folder inside the sass folder, and name it custom. And inside this custom folder we're gonna create a new file that will hold all of our custom variables and mixins. And we're going to name it _custom_vars_mixins.scss. And then we're gonna create a second file and this one will hold all of our custom styles. So, we will name this one _custom_styles.scss. Okay, now grab these two new files, and open them up in your code editor of choice. My personal preference is Sublime Text, but you can use anything you like. Now the first thing we're gonna do is drop some comment code into our custom bars and mixins file. Now, these comments are going to organize this file into sections and that will just make it a little bit easier to keep track of. So, we have a STRUCTURE section and that takes care of layouts, the structure of the site. We have a TYPOGRAPHY section and a COLORS section. And within each of these, you'll also notice that we've laid out an area for the default variables that pertain to each one of these types of information. So we've got a space for the things default structure variables, it's default typography variables, and it's default color variables. And what we're gonna do is we're going to make a copy of all the existing variables that are in the theme already, and we're gonna transplant them into this custom variables file. That way we're gonna be able to keep track of which of the theme's default variables we've changed very easily. Cuz the original variables file that came with the theme, will be untouched. All your changes will be done in your custom file instead. So we'll head back into the theme's root sass folder, and we'll go into the variables-site folder. In this folder, you'll see three files whose names match the sections that we just set up. We have a structure file, a typography file, and a colors file. Now, each one of these files holds the default variables for the theme. And what we're gonna do is open these up, and we're gonna transplant those variables into our custom variables and mixins file. So grab all three of those and open them up in your code editor. So now all you need to do is for each of these files, copy all the variables from inside that file, and paste it into the area that you just set up with the matching name. So the variables from the structure file get transplanted into the structure section of your custom file, and so on for each of the three files. And you'll notice that I haven't saved this file yet. Don't save you're file yet either. The reason is, if you save this file right now Prepros will think that you want to have an individual CSS file produced named _custom_vars_mixins.scss but you don't want that. And we'll take care of that in just a moment so that this file is not individually compiled. So just for now leave that unsaved. Next up, we wanna add some code into our _customs_styles.scss file. Now, you'll get some code along with your access to this course that will provide you with the snippet that you see on your screen here. So, you should be fine to go ahead and copy the snippet out of your source files and drop it into your custom styles file and again don't save this file just yet. Now that we have our two custom files written, we want to import them into our theme by adding a couple of lines to the themes style.scss file. So go back to the themes root sass folder and grab the style.scss file and open it up for editing. Now first we want to import our custom variables and mixins file. And we do that by dropping in this code. Now, we've created a new section here to help us keep track of what's going on in the style.scss file, and then we've used the @import directive. So, we have pulled in the "custom/custom_vars_mixins" file from the custom folder. And, then thing to note here is that we have been careful to make sure our variables and mixins are included after the default variables and mixins of the theme. And that will make sure that whatever you set in your custom variables file will take precedence over the theme's defaults. Now we're gonna import our "custom/custom_styles" file. Again, we're pulling that file in using the @import directive and we're drawing that in from the custom folder, and in this case we're gonna do our import right at the very end of the styles.scss file. And that's because we wanna make sure that any of our custom styles are loaded last. And that means that any of your custom css is always going to take precedence over anything else that might already be in the thing. So now that we have both of our custom files being imported into our style.scss file, we're safe to go ahead and save each one of those individual files now. Now, the reason is that Prepros will look and it will see that you're importing each of these custom files into your main file. And it will then understand that you don't want to have each one of those files individually compiled. Instead, now if you make a change to either one of these custom files and you save it, Prepros will actually compile your whole assess project not just the individual file that you're working on. Before we save our custom styles file this first time, we'll just bring up a browser showing the theme as it is right now. Now, if everything is being imported correctly and compiled correctly, you should see the underlines disappear off the links in the browser. Let's see. And there we go. So the underlines have disappeared and that tells us that everything is being imported and compiled just as we want it to be. In the next lesson you're gonna learn how to establish the typography of your theme. And at the same time you'll also learn how to lay out a foundation for a flexible unit based layout that will mesh in perfectly with that typography. I'll see you in the next lesson.