5.2 Theme Defaults and the "Customizer"

Hi, this is Kez. Welcome back to WordPress theme creation with underscores. In this lesson you're going to learn how to set two of the defaults that your themes will need to have. One is the content width variable which I'll explain in just a moment. And the other is the default background color for your theme, so that there's a default for people to fall back on when they're using the theme customizer that comes with WordPress. In your theme's function.php file, almost right at the top, you'll find this code here that sets the content width variable that WordPress works with. Now this is a little bit tricky to operate with. The content width variable, it wants to know what the width of the content in your post is. And when you have a responsive theme, that's a little bit tricky to nail down because there is no set width. So approximately the best way that you can handle this is to just put in the maximum width that your theme expands to. Now in our case, we never see the inside of the post area being any wider than around about 800 pixels. Even then we can't be too sure because if a user changes their font size and zooms out the site that value might change. So this is ballpark we're just going to go with best guess. So with our theme when the layout collapses down to a single column at around 900 pixels, the inside of the posts then is 800 pixels wide. Now WordPress will use this value to help deal with image handling and it will also help other plugins to interact with your content. So, what you want to do here is change this 640 value to 800. Yes, that is best guess. But in most cases, that value of 800 will probably do the job. The next thing we need to set in our theme is a default background color. Right now, if a user goes into the theme customizer and expands the color section, they'll be able to choose a background color. And they can change that around to anything that they like. And then if they decide that they don't like the color they've chosen and they hit the default button here. That will just be put back to a flat white color, but what we want is for that to be put back to the proper theme background color. Head back to your functions.php file and scroll down until you find this code here where we see add_theme_support custom background. And this is where that default color of white has come from. Now to give the default color the right value, all you need to do is just delete the color code that's already in there. And just replace it with the color code that we're using for our theme. Back in the theme customizer again, now when the user plays around with the background color and they decide they wanna set it back to the default, you see that we have the correct color being reverted back to. Your theme is now almost there. In the next and final lesson, you'll learn how to do a couple of last minute checks, how to customize the theme info so everybody knows who you are and where you can be found on the Internet, and how to package up your theme so that it's ready for other people to install on their WordPress sites. I'll see you in the next lesson.