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

5.3 Check the Theme, Customize the Theme Info, and Package It Up

Before you put your theme out into the world you want to make sure it has everything in working order, and that everyone knows who created it! In this lesson, you’ll learn how to do some last minute checks, add your own information for display in the WordPress admin area, and package up your theme for release.

Related Links

5.3 Check the Theme, Customize the Theme Info, and Package It Up

Hello, this is Kezz and welcome to the final lesson of WordPress theme creation with Underscores. Now, before you put your theme out in the world, you always want to go through it with a fine-toothed comb and just check on everything you can think of to check. This is where the content that we got from WP test at the very start of the course comes in super helpful. Now, this content was expressly designed for the purposes of helping you check to make sure everything in your theme is running how it should be. And one of the things that you can do is just go through and look at every single one of those test posts and make sure that it looks right to you. For example, you'll remember that when we first set up your offline development site, we left the Jetpack plugin installed. And that was because one of the posts that comes from WP test allows you to check and make sure that the tiled gallery that comes from Jetpack is all working right. You can activate those tiled galleries by going into your Jetpack settings, finding Tiled Galleries and hitting Activate. And, then you'll be able to go back and have a look at the test posts provided by WP test and make sure everything is laid out and looking like it's functioning right. And as you can see, this is working great. So everything on that's just fine. From there you can just keep going through all of these other posts that have been provided by WP test, and again, these are based on the official test unit data from WordPress. And just cast an eye over everything. Make sure there isn't anything that's escaped your notice. Normally there will be something that slipped by you that you'll have to fix up at the end of your theme development process. So just spend some time having a look at every part of the site that you can think of to look at, and making sure that everything is just right. Once you've made sure that there's no little pesky bugs hiding away in your theme, it's time to customize the information that people will see when they go to the Appearance > Themes section and have a look at the entry for your theme. The first thing you'll want is a screenshot of your theme. And that screenshot should be 880 pixels wide by 660 pixels high. And it can be either a PNG or a jpg, but it must be named screenshot. So, it must be named either screenshot.jpg or screenshot.png. And it should be saved into the root folder of your theme. After you've saved out your screenshot, just make sure that there isn't another screenshot, also in the root folder, that has a different file extension. For example, I saved out my screenshot as a JPG, but there's already a screenshot.png in the root folder. So, I just need to delete that screenshot.png, so that my screenshot will be visible in the admin panel. After you save out your screenshot, go back to the Appearance > Themes section, and you should see your screenshot come up on your theme entry. Now you'll also wanna customize the text information that appears when a person looks at the details of your theme. In a WordPress file, that information is held in comments at the top of the style.css file. So for you working with SASS, that means that you want to edit your style.scss file instead. Labels for all of that information are already in place at the top of your style.scss file. So go through and have a look at the label on the left before the colon, and change that information to whatever you need it to be. So, put in the URL that people can go to, to see more information about the theme. Put in your author name and your web address and a description of the theme and so on. A point to note in this information here is the license. With Underscores you'll see that that licence is the GNU General Public License, or the GPL, as it's otherwise known. Now if you're selling themes on ThemeForest, you have the option to choose either a split license or to sell into GPL. But if you're gonna be working with an Underscores-based theme, you're really going to need to use GPL. I'll provide a link below where you can read a little bit more about licensing and how it works in with ThemesForest marketplace. With your development process now finished, you can go back to prepros and uncheck the source maps option. And then recompile that CSS without the source maps information in there. You're not gonna need that once your development process is done. And when you do this final compilation of your style.scss file, that's going to write the changes that you just made into the theme information into your style.css file. When you go back to the Themes area now and look at the theme details of your theme again, you'll see all the information that you just customized. Now you're ready for the very last step of the process, and that is packaging up your theme, ready for people to install on their WordPress sites. Now grab yourself a copy of your whole theme folder, and then take that over into another location. Somewhere that you're managing your projects, and drop that into a separate place so that you can take these last few steps. Not on your development version of your theme, but on the version that you're going to package up. Now go into the root folder of the theme that you just duplicated, the one you'll be packaging up, and look for file named prepos.cfg, and then another named style.css.map, and delete both of those files. Prepos cfg is the information about your prepros project, and you need that to stay in the development version of your theme in case you want to come back and make more changes. But you don't want that file in the distribution version of your theme, and that's why we're deleting it here. And style.css.map is information about your source mapping. And again, you need that for development purposes, but you don't need it in the distribution version. Now go back up outside of your theme folder and then zip up that whole theme folder into an archive. Now, that zip is all that anybody will need in order to install your theme onto their WordPress site. And with that final step, your theme is finished. In the next video, we're just gonna have a quick recap of everything you've learned so far. And we'll take a bit of a look at what you might like to do next in your theme development learning. I'll see you in the next video.

Back to the top