Join Carrie Dils for an in-depth discussion in this video Add theme support options, part of WordPress and Genesis: Building Child Themes from Scratch.
- When we created functions.php, we added our DocBlock, loaded the text domain, and then created an empty wrapper for our theme setup functions. Let's go ahead and start filling things in. The first thing we're going to do is define some constants. Constants are like variables in PHP, except they can't be changed by other code. By defining a few constants here, we can utilize them in our child theme later. So let's start with this CHILD_THEME_NAME. That's the constant, and then Scratch is the assigned value.
Next, we have our CHILD_THEME_URL, and finally the CHILD_THEME_VERSION. Now if we ever wanted to reference, say, this CHILD_THEME_NAME in our code, we could reference the constant, CHILD_THEME_NAME, instead of the string "Scratch." By defining these things once, it enables us to reference those values in multiple places. This is really nice because if you end up changing a constant's definition later, you can change it in one place versus everywhere it shows up in your code. Next, we want to start adding theme support for various items using the add_theme_support function.
Within WordPress, you can add theme support for a number of options, such as menus and post thumbnails. For a full list, you can reference this function in the WordPress codex. The Genesis framework includes some additional features you could add via theme support. If we go look at the genesis init.php file, we can see theme support is added by default for all of these items, menus all the way to post thumbnails, breadcrumbs, and more. That means we already have access for these things in our theme, thanks to Genesis.
Of course, there are some optional ones as well, things like the Genesis menus and structural wraps. Now there's a few critical ones I'd like to point out. Here in init.php, we have a conditional statement that essentially reads, if we're not using a child theme, or in other words, the Genesis framework is set as the active theme, then add support for HTML5, Genesis responsive viewport, and Genesis accessibility. If a child theme is active, which it is in our case, we want to specifically include theme support for each of these items.
HTML5 enables us to utilize HTML5 markup and schema, two features that weren't available until Genesis version 2.0. Theme support for these features remains optional for backward compatibility. Genesis responsive viewport adds a special meta-tag for responsive CSS. It only works with child themes that support HTML5. So this is also left optional for backward compatibility. Lastly, we have Genesis accessibility. This is brand new as of Genesis version 2.2, and it includes some wonderful improvements in web accessibility.
For a thorough overview of what each of these options does, check out Rian Rietveld's post at genesis-accessible.org. Rian is a contributor to the Genesis framework and responsible for adding many of the accessiblity features in Genesis 2.2. She's a champion for better web accessibility, and is a great person to follow on social media if that's a topic you'd like to know more about. So let's go ahead, copy these and paste them directly to our child theme. And as always we want to add documentation for each item that we add.
With those in place, there's one more theme support option that I'd like to add. And that's for footer widgets. If we look at the widgets page on our site, we'll see that there are no footer widgets available. Right now, we just have header right, primary sidebar, and secondary sidebar. We can change that by adding theme support for Genesis footer widgets. We can also add in exactly how many footer widgets we want to be made available.
In this case, let's try three. So if I save that and then go back and look at our site, we see an error, and it looks like I missed a semicolon here. Let's go back and try that again. Refresh, and there we can see our three footer widgets. Pretty cool! So the bottom line here is definitely to add theme support for HTML5, Genesis responsive viewport, and Genesis accessibility. Whatever other theme support options you want to add, such as custom background or custom color options is completely up to you, and just depends on what you're wanting for your theme.
- Why build a theme from scratch?
- Creating a theme folder
- Creating the CSS and PHP files
- Adding a theme setup function
- Adding features and functionality to your child theme
- Styling the theme
- Adding content to widgets
- Making the theme responsive with media queries