New Class: Build a Complete WordPress Theme with Underscores
Last week, we relaunched our WordPress theme design classes.
The first new class was called “Getting Started With WordPress Theme Development“.
Are you ready to go a step farther? This week’s class, “How to Build WordPress Themes“, is a complete project that takes you from design to finished theme.
About the class project
The initial design is called Future Imperfect. The design comes from HTML5Up.net, a very popular site that showcases some of today’s best designers.
You’ll take the HTML5Up design and convert it to WordPress using Underscores, a very popular and lightweight starter theme.
If you complete the project, you’ll end up with a genuine WordPress theme. I’m running the theme on my own blog at SteveBurge.com and so is the class teacher, Topher. You can download the theme here, but to learn how it’s built, you should take the class!
Here’s the class syllabus
Introduction
- Introduction to the WordPress Theme Project
- Code Review of the Future Imperfect Theme
Development Environment
- How to Set Up a WordPress Theme Development Environment
- How to Create a Theme Based on Underscores
Theme Conversion
- How to Move the Header and Stylesheet to WordPress
- How to Turn HTML into a WordPress Post Layout
- How to Move the Sidebar and Footer to WordPress
- How to Enqueue Scripts in a WordPress Theme
- How to Enqueue Footer Scripts in WordPress
Theme Widgets
- How to Create the Horizontal Main Menu
- How to Use Functions.php in a WordPress Theme
- How to Create a Sidebar in a WordPress Theme
- How to Add Widgets to a WordPress Sidebar
Designing Posts
- How to Design Posts in a WordPress Theme
- How to Add Subtitles to WordPress Posts
- How to Add Featured Images to a WordPress Theme
- How to Design WordPress Post Excerpts
- How to Style Categories and Comments Counts
- How to Add Pagination to a WordPress Theme
- How to Format a Single Post in a WordPress Theme
- How to Add Pagination to a Single Post
- WordPress Theme Quiz 1
Layout
- How to Change Breakpoints and Add a Left Sidebar
- How to Clean Up the HTML Layout
- How to Manage Large Images in a Theme
- How to Style Image Galleries in WordPress
- How to Style Comments in a WordPress Theme
- How to Design a Page Template in WordPress
- How to Design the Search Results in WordPress
- to Solve Edge Cases in Your WordPress Theme
- How to Design the 404 Error Page
- How to Update a WordPress Sidebar to Use Widgets
More Theme Features
- How to Control the Theme Title With the Customizer
- How to Add a Site Logo Via the WordPress Customizer
- How to Create Mobile Navigation for a WordPress Theme
- How to Add Infinite Scroll to a WordPress Theme
- How to Fix a WordPress Post Title Bug
Custom Widgets
- How to Create a Large Post Widget, Part 1
- How to Create a Large Post Widget, Part 2
- How to Create a Large Post Widget, Part 3
- How to Create a Large Post Widget, Part 4
- How to Build a Small Post Widget
- How to Create a Custom Menu Widget
- How to Style the Custom Menu Widget
Final Touches
- Theme Cleanup and Feature Removal
- How to Add a Screenshot to a WordPress Theme
- How to Add a Readme File to a WordPress Theme
- WordPress Theme Quiz 2
{snippet sign-up-button-for-blog-posts}
