In this course, you’ll learn the basics of WordPress theme design, but with a twist. We’ll approach the process from a “design system” perspective. Instead of designing the theme page by page and button by button, we’ll start by defining a few key parameters: colors, typography, spacing, and sizing. Based on these, we’ll design basic and advanced patterns and document them along the way.
As a demonstration of how to use the design system, we’ll then design a full page: the index. By following this process, you’ll then be able to design your own pages in a consistent and efficient way.
Get inspired by the WordPress themes and plugins, fonts, and icons available on Envato Elements.
Learn How to Use WordPress
If you're just getting started, learn how to use WordPress in our complete guide or check out our free WordPress tutorial for beginners.
Unlock The Power Of Design Systems
Learn everything you need to get up and running with design systems in our complete guide with design system examples.
1.Introduction
1.1Welcome to the Course01:55
1.2Design Considerations for WordPress Themes06:36
2.Preparation
2.1A Design System Approach07:43
2.2Defining Colors14:57
2.3Defining Typography21:15
2.4Defining Spacing and Sizing08:07
3.Basic Patterns
3.1Buttons15:42
3.2Forms16:22
3.3Menus08:22
3.4Icons and Images12:24
3.5Tables06:34
3.6Separators and Spacers06:09
3.7Grid System06:23
4.Advanced Patterns
4.1WordPress Widgets06:49
4.2WordPress Posts19:18
4.3Headers and Footers09:27
5.Page Layouts
5.1Creating Page Layouts06:14
5.2Designing a Full Page: The Index08:15
6.Final Words
6.1Conclusion03:36
