Configure the theme info

- [Instructor] From here on forward, we'll be working with code in the theme. As we progress from one movie to the next, I'll provide exercise files, both in the downloads for the course and as individual GitHub branches, and the repo that established a starting point for that movie. That means, starting right now and moving forward, you should add the exercise files for the current movie you are watching into your Humescores folder. That way, you and I will be working on the exact same code. Since this is the first time we're working with code, let me quickly walk you through the initial set up process. You'll do this every time you reboot your computer and get ready to work on your theme.

First boot up your local server environments. That would be either Wampserver on Windows or Mamp on a Mac. When the server environment is running, make sure it's running by going to your browser and navigating to your site, in my case humescores.dev and see it's running here and everything works fine so that means we can move to the next step. Next boot up your IDE, in my case NetBeans. Inside the IDE navigate directly to your theme folder, so wp-content, themes and humescores. Then open terminal or command prompt.

Navigate to the folder that contains your WordPress project, and then the themes folder and gulp-dev. And from here, run the gulp process. This boots up the watch process and browser sync and if everything works properly, browser sync will open a new tab in your browser that shows you the site. Now this tab is synced directly with my development site, meaning if I make changes on the development end, this page here in my browser will automatically update accordingly. That means I can close the original tab, and I'm left with just the tab I'm going to be working in.

Alright the set up is done, let's go. When building a new custom theme from scratch, it's important to start out right. In this chapter we're going to set up the core of the theme including the theme metadata, functions, web fonts and basic css to create a starting point for our design. I always like to start with a metadata to make my freshly downloaded version of underscores truly my own. What's this metadata you ask? Well if we go to the back end of the site right now, log into the site, and then go to appearance and themes.

You'll see Humescores is active, and if you click on theme details, you have very sparse details. So that says the current theme is Humescores version 1.0.0 by Morten Rand-Hendriksen, this links to my course page. And then it has a really short description, that's it. All this information is controlled from style.css and the theme. In style.css at the very top we have this commented out section that contains all that metainformation. So here you can see the theme name is Humescores, the theme URI is currently the underscores.me site.

Then author is me and the author URI is my courses. Then there's a short description and some other information. This is where you define the metadata for you theme. And here you can add as much or as little information as you want. Now I say in this file but I don't actually mean in this specific file. We are working with sass in this project and all of this is what sass generates, so instead of editing style.css, which will be overwritten in a second, we're going to work inside the sass folder. In the sass folder, there's a file called style.scss and when you open that you'll see it starts in the exact same way.

This is the main style sheet for the entire sass setup, and it starts with the full metadata for your theme. So here we can make those changes and those changes, once compiled will move over to style.css I'm not going to change the theme name because it's correct. I will change the theme URI, it should be the GitHub repo, so github.com/mor10/humescores The author stays the same and my author URI stays the same. I want to change the description a bit.

It shouldn't say an awesome Humescores based theme, it should say a new theme for a new time. This theme showcases best of WordPress and Underscores and is the project for the Building Themes from Scratch Using Underscores Course at LinkedIn Learning and Lynda.com If I want to I can change the version number, I can set up a different license.

Now remember this is WordPress, so it always has to be the GPL but you can change the license version if you want to. You can also change the URL for the license to match that version number. And you can change the text domain. Finally you have this tags section. This is only relevant if you plan on publishing your theme in the WordPress theme directory. In that case you need to apply tags that actually match with your theme, and the tags have changed recently. So if you want to use tags, you need to check with the codex and the handbook to make sure you're using tags that are permitted.

Alright so I've made some changes to style.scss You can see right now that the changes have not taken place in style.css just yet. But when I save this and then go to either command line or terminal, you can see saving.files started a bunch of processes. So here we started the css process and then the browser's reloaded. That means if I go back to style.css now, the file has been updated so here you see my much longer description and the correct theme URI. And if I go to my site, it's been auto updated by browser sync.

So now you see the new information displayed here inside my theme metadata. That means the information about my theme is correct and I can move on to start changing the theme itself.