| 1 |
Environment setup and HTML/CSS refresh |
Strong basics make customizations safe and fast. |
Set up local environment and create a version-controlled repository, Review semantic HTML and landmarks; rebuild a simple static page, Practice CSS Flexbox and Grid with small layout drills, Add responsive images and test on different viewports, Timed quiz on HTML semantics and CSS layout, Write a one-page summary of key layout patterns |
Local dev ready and repo initialized, Static homepage layout, Notes on layout and semantics |
| 2 |
JavaScript and PHP for templating |
You need just enough JS and PHP to power themes. |
Practice JS DOM events and simple toggles (e.g., mobile menu), Review PHP arrays, loops, and functions with small exercises, Convert a static section into a PHP template with variables, Add basic error handling and escaping in templates, Timed quizzes on JS basics and PHP basics, Explain aloud how a template renders data |
Small JS interaction component, PHP template snippets demonstrating loops and conditionals |
| 3 |
Theme structure and template hierarchy |
Knowing where code lives prevents guesswork. |
Study theme folder structure and template hierarchy mapping, Scaffold a starter theme with core files and template parts, Implement header and footer partials and include them, Add a base stylesheet and reset, Create a template map document, Write a short README for the theme |
Starter theme scaffolded, Header and footer templates working, Template map and README |
| 4 |
Home and single templates |
These are the most visited screens in most themes. |
Build the home template with a main content loop, Create a single content template with title, meta, and content, Add conditional logic for missing elements (empty states), Ensure heading hierarchy and landmarks are accessible, Timed quiz on template hierarchy and conditional tags, Write notes on decisions made |
Home and single templates rendering sample content, Accessibility checklist for these templates |
| 5 |
Archives and pagination |
Lists and navigation patterns shape content discovery. |
Create category, tag, and general archive templates, Implement pagination controls with accessible labels, Add breadcrumbs and test keyboard navigation, Design empty and loading states, Run a quick performance baseline (build size and load time), Summarize findings and next steps |
Archive templates with pagination, Breadcrumbs component, Performance baseline report |
| 6 |
Navigation and sidebar layouts |
Good navigation makes the theme feel polished. |
Integrate primary and secondary menus, Build a responsive menu with keyboard support, Create a sidebar layout and test on mobile, Add skip links and focus states, Refine spacing and breakpoints, Peer review with a checklist (self-review if solo) |
Responsive navigation pattern, Sidebar layout pattern, Navigation accessibility checklist |
| 7 |
Design tokens and style guide |
Tokens make styling consistent and maintainable. |
Define color, spacing, and typography tokens using CSS variables, Set a modular type scale and responsive rules, Apply tokens across base elements (headings, text, links), Create a style guide page that lists tokens and examples, Timed quiz on CSS architecture and tokens, Write a brief token naming rationale |
Tokens file (CSS variables), Style guide page, Token rationale notes |
| 8 |
Components and accessible forms |
Reusable parts speed up theme customizations. |
Build buttons, cards, badges, and alerts with states, Style forms (inputs, selects, textareas) with clear labels, Add focus and error states and validation messages, Test with keyboard and screen reader, Document component usage in the style guide, Quiz on accessible forms |
Components library page, Accessible form styles, Updated style guide with components |
| 9 |
Dark mode and contrast |
Better readability means happier users. |
Implement dark mode using user preference, Create an optional theme switcher, Run color contrast checks and adjust tokens, Reduce motion for users who prefer it, Document dark mode rules and token mapping, Write a short summary of changes |
Dark mode implementation, Contrast report and token updates |
| 10 |
Custom content types and taxonomies |
Structured content unlocks richer layouts. |
Define a custom content type and related taxonomies, Create single and archive templates for the new type, Add custom fields and display metadata in templates, Design card layouts for the new content, Draft a content migration or seeding plan, Explain aloud how data flows to templates |
Custom content type templates, Taxonomy archive template, Metadata displayed in cards |
| 11 |
Hooks and filters |
Safe extensibility keeps changes upgrade-friendly. |
Identify hook points to modify template output, Add pre/post content areas using hooks, Create filters for titles, excerpts, and classes, Document hook names and expected data, Timed quiz on hooks and filters, Write examples showing before/after results |
List of implemented hooks and filters, Before/after screenshots and notes |
| 12 |
Query customization and search |
Better filtering improves content discovery. |
Customize archive queries (ordering, per-page, exclusions), Build a filterable archive (by taxonomy or meta), Design a search results template with highlights, Handle empty and error states gracefully, Measure performance impact of query changes, Document filter options for editors |
Filterable archive page, Search results template, Performance notes on queries |
| 13 |
Internationalization and roles |
Themes should work for many users and teams. |
Mark strings for translation and generate base language files, Test a second language and fix layout issues, Adjust visibility of editor-only UI elements by role, Write content editor guidelines for theme features, Quiz on internationalization basics, Create a checklist for future localization |
Base translation file, Role-aware UI sections, Editor guidelines document |
| 14 |
Block-based editor basics |
Modern editors need patterns and parity. |
Align editor styles with front-end styles, Create simple patterns (hero, features, testimonials), Ensure spacing and typography match tokens, Document how to insert and customize patterns, Run a quick editor usability test, Write a brief report on findings |
Pattern library with 3–5 sections, Editor-front parity checklist |
| 15 |
Template parts and theme settings |
Separation and settings make themes maintainable. |
Refactor header, footer, and loop into template parts, Create a theme settings configuration for colors and fonts, Map design tokens to settings, Test user-driven changes without code, Update documentation with screenshots, Explain aloud how settings flow to styles |
Template parts wired into templates, Theme settings configuration file, Updated documentation |
| 16 |
Advanced patterns and page layouts |
Reusable layouts speed up future work. |
Create complex page layouts using patterns (grids, pricing, FAQs), Add a reusable query loop pattern, Ensure patterns are responsive and accessible, Write usage notes and do/do-not examples, Collect feedback from a test user, Refine patterns based on feedback |
Advanced pattern set, User-facing pattern guide |
| 17 |
Performance optimization |
Fast themes improve SEO and user satisfaction. |
Audit CSS and JS; remove unused code, Defer or async non-critical scripts, Generate and inline critical CSS for key templates, Optimize and lazy-load images and media, Measure before/after metrics, Quiz on performance optimization |
Performance report with metrics, Optimized assets and loading strategy |
| 18 |
QA and accessibility |
Quality checks prevent costly rework later. |
Cross-browser and device testing with a checklist, Keyboard-only and screen reader testing, Fix identified issues and retest, Prepare demo content for screenshots and videos, Write a changelog of fixes and improvements, Create an issue list for future versions |
Accessibility report and fixes, Cross-browser test sheet, Demo content package |
| 19 |
Packaging and portfolio |
Shipping and showing your work unlocks opportunities. |
Package the theme with license, readme, and changelog, Create screenshots and a short demo video, Write a portfolio case study (problem, approach, results), Tag a version and archive the release, Plan next improvements in a roadmap, Share your case study with peers for feedback |
Installable theme archive, Documentation bundle, Published portfolio case study |
