How to Build WordPress Themes
OSTraining
Course Summary
This is our main WordPress theme class. This class guides you through a detailed WordPress theme project. Follow the lessons, and we'll take you from an initial design to a completed theme.
-
+
Course Description
This is our main WordPress theme class. This class guides you through a detailed WordPress theme project. Follow the lessons, and we'll take you from an initial design to a completed theme.Old-fashioned WordPress design classes started with 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.
This WordPress theme design class reflects that new approach. videos are based on
The initial design is taken from HTML5Up.net, a very popular site that showcases some of today's best designers.
The WordPress code is based on Underscores, a very popular and lightweight starter theme. 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.
Christopher DeRosia (Topher) has been "doing the web" since 1994. With the advent of PHP in 1998, his web sites became much more dynamic and exciting.
He is an accomplished programmer, having written his own content management systems and managed some very large websites. He loves to help people enjoy their websites and believes, "playing with WordPress is fun!". He has built over 30 sites with custom themes and plugins.
Topher lives in Michigan, USA.
-
+
Course 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 Add a WordPress Search Widget to a 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
How 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
