Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

2.2 Generate _s and Setup Automation

Hey, this is Kezz, and welcome back to WordPress Theme Creation with Underscores. In this lesson, you're going to learn how to generate a uniquely named version of Underscores. And then, after installing it on your devsite, you're also gonna learn how to automate your development process, so that the compilation of your SCSS just happens automatically every time you save your file. And also, that your browser will refresh and show you your changes instantly. Now we're here at underscores.me, and the the guys behind the theme have generously put together an automated tool that will generate that uniquely named theme for you. Now, all you need to do is, enter the name that you'd like to give your theme in this field labeled, Theme Name. And you can fill that in as anything you like. Now, because we want to use SCSS, go ahead and click the advanced option link below the theme name section here. You can leave all of these fields blank for now, we'll deal with this information in a later lesson. And just check the box right at the bottom that says sassify, and then hit the GENERATE button. And it will produce that theme for you. You'll get a pop-up with a download location, so just choose a place that you can easily find later, and download your generated theme. Now, with the theme downloaded, we'll and go ahead and install it. And, you'll already be familiar with how to install a WordPress theme, so I won't step you through that. You just wanna install the entire zip that you just had generated from the Underscores site. And, as soon as you have it installed, activate it and we're gonna start working on it directly inside the WordPress folder structure. All right, so, now we're going to set up your automatic SCSS compilation and your automatic browser refreshing every time you make a change to your design. And to do this we're going to use a program called Prepros. And, for the purposes of this entire course, all you need is the free version. So, just head to prepros.io, and download yourself the free version for your system, and install it before we move on to the next section. Now here we are again inside the Bitnami installation folder. I'm gonna navigate into WP content and into the theme's subfolder. And in there, you'll see we have the my-theme folder. That's our theme. All right, I already have Prepros running, so I'm just gonna grab the folder from my theme and just drag it straight onto the Prepros interface. And that has added the theme as a Prepros project, and now we can tweak some of the default settings. Now in the Prepros interface, I want you to expand the Sass folder. This is where our whole Sass library that comes along with Underscores is housed. And inside here, go ahead and click on the style.scss file. Now this is the central file for the entire project. Everything gets imported into this file. So, this is where you'll set the overall configuration for how Sass will be processed in your theme. The first thing is to change the output location, so that when Sass compiles, it automatically overrides the style.css file of the WordPress theme. To do that, click the link underneath the output path labeled in the sidebar here. And then to select the style.css file for the theme, and that will automatically put the correct output path into your settings. Then we wanna leave Auto Compile as it is. This is the setting that will detect any changes to your SCSS files and automatically compile them for you. You want to check the AutoPrefix CSS box. And what that will do is, it will look up the caniuse.com website, and it will make sure that the proper vendor prefixes are attached to all of your CSS. We're also gonna leave Use LibSass checked. There are two options, you can use LibSass, or you can use Compass. And in this case, we'll be going with LibSass because it is noticeably faster. We're We are also going to check this SourceMaps option, because that will let us have a look at our code through development, and just see which one of the SCSS files in the library is responsible for the presentation of various aspects of the theme. And then finally, we're going to actually uncheck Compress CSS in this case, because WordPress relies on some of the comments that are in the style.css file in order to be able to present things like theme information. And, if you choose Compress CSS, those comments will be stripped. So, just leave that check box unchecked. Compression can be handled by the user, using a plug-in that will combine and minify all of their CSS and JavaScript at once at a later point, anyway. All right, so now the last thing that we need to do for this stage is to set up Prepros so that it will refresh the browser every time you make a change to your styles. We do this by going to More Options, choosing Project Options, and then checking the Live Preview Custom Server field. And now we just need to go to our development site, and just grab this part of the URL. And that's the address we wanna have refreshed. So now, we add the custom server address here. And then select Save Options. Now, the trick to making this work is that, you always wanna launch your preview site via Propros. And to do that, right-click on your project name and choose Open Preview. Then, from there, you can jump into your Bitnami WordPress Stack, and that will show a different URL in the address bar. And that's because Prepros is now handling that refreshing for you. And that means that, even though it's actually Bitnami that's running this offline site for you, Prepros will still be able to interact with it, to show you the changes that you're making on the fly. So now, all of your preparation for Underscores development is done and ready to go, so you're all set to jump in and start actually customizing your Underscore's theme. And in order to do that, in the next lesson, you're going to learn how to organize your customizations. And you wanna make sure that whatever you do keeps you future-proof, so that when changes come out to the Underscore's theme, you know exactly what your customizations were, so you can easily take them from one version into the next. I'll see you in the next lesson.

Back to the top