New WordPress Theme Design Classes, Based on Underscores
We’re delighted to relaunch our WordPress theme design classes.
This week, there’s an introductory class called “The Beginners Guide to WordPress Theme Development“. Next week, look out for a much longer class that takes you from design to finished theme.
These new classes represent a big shift in the way students learn WordPress theme development.
What’s different with the new classes?
Previously, our approach started with a PSD file. Students learned to slice up the PSD and convert it to HTML. Then, they would code a WordPress theme that exactly matched the original design.
Today’s designers take a different approach:
- They work in the browser, rather than in Photoshop.
- They think deeply about how their designs appear in different screen sizes.
- The modern web is complex, so they use lightweight frameworks, rather than re-inventing the wheel each time.
These new classes needed to reflect that new approach. So, we chose to base the updated videos on Underscores, a very popular and lightweight starter theme.
Why did we choose Underscores?
We chose Underscores because it will save you many hours of work. Rather than starting from scratch, you can rely on code written by some of the very best WordPress theme developers.
Underscores is supported by Automattic, the company run by Matt Mullenweg, and has an active community with over 100 committers on Github. Because it’s backed by the biggest company in WordPress, it’s unlikely to disappear. Any time you spend learning Underscores will be a good long-term investment.
Ian Stewart is the head of the theme Division at Automattic, and he offers a good explanation of why they chose Underscores:
“It incorporates code and tough lessons learned from the best WordPress themes … As each new default [WordPress] theme is released, Underscores will be reviewed and updated. New techniques and best practices will continue to make their way into Underscores.”
Out-of-the-box, Underscores has a ton of useful features, including these:
- Just the right amount of lean, well-commented, modern, HTML5 templates.
- Custom template tags that keep your templates clean and neat and prevent code duplication.
- Smartly organized starter CSS in style.css that will help you to quickly get your design off the ground.
- 5 sample CSS layouts in /layouts: Two sidebars on the left, two sidebars on the right, a sidebar on either side of your content, and two-column layouts with sidebars on either side.
What’s in the new WordPress theme classes?
The first new class is “The Beginners Guide to WordPress Theme Development“. Here’s an overview of the videos in this class:
WordPress Theme Files
- Introduction to WordPress Themes
- An Overview of the WordPress Theme Files
- How to Understand the WordPress Template hierarchy
WordPress Theme Functions
- How to Use the Functions.php File in WordPress Themes
- More About the Functions.php File
- How to Use WordPress Template Tags
WordPress Theme Templates
- Looking at index.php in a WordPress Theme
- More About WordPress Template Files
- Comments Template and the Customizer
Theme File Recap
- Recap of WordPress Theme Files
- WordPress Theme Files Quiz
WordPress CSS and Menus
- How to Add CSS Styles to a WordPress Theme
- How to Create Menu Locations in WordPress
- How to Place Menus Into WordPress Themes
WordPress Theme Widgets
- How to Register Widget Areas in WordPress
- How to Positions Widget Sidebars in WordPress Themes
WordPress Theme Code Standards
- How to Enqueue Scripts in WordPress Themes
- WordPress Coding Standards
- WordPress Theme Layout Quiz
This is just the beginning. Next week, look out for a class with around 50 videos. This will take students through a complete project, starting with a design from HTML5Up.net and ending with a custom WordPress theme, based on Underscores.
