Implementing the Base Colors | WP Development Courses

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Block Theme Academy

Welcome to the course

Hello and welcome! (1:09)
How this course is structured (3:38)
How to access the private community (1:51)
Local Development Setup
Preparing for WordPress 6.6 (1:51)
Resource Vault

Understanding Full-Site Editing

Full-Site Editing: The Big Picture (6:50)
What is Full-Site Editing? (4:02)
A developer's view on block themes and the Site Editor (3:07)
What is the Site Editor? (4:28)
A quick introduction to using the Site Editor (5:30)
How to export changes to the theme with the Create Block Theme plugin (3:29)
The three theme types: Classic, Hybrid, and Universal (4:44)
How are block themes structured? (5:34)
A quick introduction to Global Settings and Styles (or theme.json) (6:21)
Technical aspects of theme.json (9:21)
Section survey

Creating a Simple Block Theme

What you'll learn in this section (1:57)
Creating the theme starter files (4:08)
Exercise: Creating the theme starter files
Creating a minimal Index template (6:19)
Exercise: Creating a minimal Index template
Block theme development workflow (4:00)
Adding Header and Footer template parts (7:35)
Exercise: Adding Header and Footer template parts
Creating a Site and Content container (5:16)
Exercise: Creating a Site and Content container
Creating Article containers (5:56)
Exercise: Creating Article containers
Implementing the Global Typography (6:43)
Exercise: Implementing the Global Typography
Implementing the Color Palette (3:21)
Exercise: Implementing the Color Palette
Implementing the Font Size Palette (6:06)
Exercise: Implementing the Font Size Palette
Implementing default Block Spacing (4:53)
Exercise: Implementing default Block Spacing
Enabling Margin and Padding controls (1:09)
Exercise: Enabling Margin and Padding controls
Implementing the Spacing Palette (3:02)
Exercise: Implementing the Spacing Palette
Implementing the Base Colors (1:33)
Exercise: Implementing the Base Colors
Enabling the Link Color control (0:51)
Exercise: Enabling the Link Color control
Styling Elements (6:12)
Exercise: Styling Elements
Enabling the Border controls (1:02)
Exercise: Enabling the Border controls
Building out the Header & Footer (8:08)
Exercise: Building out the Header & Footer
Building out the Content Area (4:18)
Exercise: Building out the Content Area
Building out the Articles (5:35)
Exercise: Building out the Articles
Section survey
What's next? (0:58)

Understanding Settings

What are Settings, why should I use them? (4:05)
How does the Settings Interface work? (3:16)
What is the Settings Engine, and what does it do? (2:33)
How to control Settings using Theme.json (3:32)
How to handle Settings according to the theme type (3:17)
Introduction to removing customization settings (1:53)
Removing settings from all or specific block types (2:52)
Removing settings based on post type or user role (4:44)
What are Custom Properties? (3:20)
[6.6] Should I use version 3 of theme.json? (2:30)
Section survey

Implementing Layout Settings

What are the Layout Settings? (1:04)
How do the Content and Wide Sizes work? (7:54)
Implementing the global Content and Wide Sizes
Implementing additional Content and Wide Sizes (3:51)
Implementing and understanding Block spacing (5:42)
Implementing and understanding Root Padding (4:37)
Section survey

Implementing Color Settings

What are the Color Settings? (1:48)
How to remove Color Settings
Adding a Color Palette
Adding a Gradient Palette
Section survey

Implementing Typography Settings

What are the Typography Settings? (1:25)
How to remove Typography Settings
[6.6] How to add fonts using the Font Library (8:53)
How to add fonts using theme.json
Why you should bundle web fonts with the theme
[6.6] How to add a Font Size selector (3:45)
[6.6] Font Size best practices (2:19)
What are Fluid Font Sizes, and why should I use them? (3:33)
How to implement Fluid Font Sizes
What is appearance (font weight and font style)?
Line height
Letter spacing
Text decoration
Letter case
Drop cap
Section survey

Implementing Dimension Settings

What are the Dimension Settings? (1:02)
[6.6] How to add and remove Dimension Settings
[6.6] Adding a Spacing Palette (3:56)
Section survey

Understanding Styles

The What and Why of Styles (6:20)
The How of Styles (2:24)
How styles are transformed into CSS (6:07)
Understanding the Style Hierarchy (2:45)
Section survey

Implementing Styles

Creating base styles (1:19)
Creating element styles (2:03)
Creating block type styles (3:26)
Creating styles for elements in specific blocks
Styling hover and other pseudo-classes
Border styles
Color styles
Spacing styles: Margin and padding
Typography styles
Global Styles Variations (8:10)
[6.6] The What and Why of Section Styles (10:31)
[6.6] Creating a Section Style (10:39)
Section survey

Styling with CSS

How the iFramed Content Editor impacts CSS styles (4:04)
enqueue_block_editor_assets hook behavior (6:02)
Custom CSS in the Site Editor (3:23)
Section survey

Creating Layouts

What you'll learn in this section (0:57)
Required foundations for layout building (2:13)
Don't make this mistake when building (3:41)
Discovering the Group block (1:18)
Understanding the Flow and Constrained layouts (3:41)
Understanding block width handling in constrained layouts (5:18)
Understanding the Row and Stack layouts (1:57)
Understanding the Grid layout (11:08)
Introduction to Sticky Positioning (1:17)
Using Sticky Positioning for sticky header and sticky content sections (4:08)
Section survey

Creating Block Patterns

Introduction to block patterns (3:42)
Introduction to Atomic Design (7:13)
Overview of the pattern management interface (6:22)
The four pattern types (4:40)
Pattern sources (3:25)
Differences between patterns and template parts (3:09)
Creating a new pattern (1:44)
[6.6] Differences between unsynced, synced, partially synced patterns (7:46)
[6.6] Creating partially synced patterns (7:16)
Pattern Autoregistration (4:13)
Quick reference: Pattern registration options
Using Patterns for Internationalization (7:08)
Using Patterns for Static Assets (5:42)
Section survey

A small ask

Could I have 5 minutes of your time? (1:49)

Creating Template Parts

Template parts in classic themes (1:30)
Template parts in block themes (2:39)
Template parts and template part areas (3:42)
Header and footer in classic vs block themes (4:10)
Creating template parts (1:49)
Possible pitfalls when creating template parts (2:10)
Template part variations (2:55)
Section survey

Creating Templates & Page Templates

Introduction to template creation workflows (0:36)
Overview of the Template management interface (3:29)
Creating a new Template (2:29)
Exporting a template from the Site Editor (1:45)
Pitfalls of managing custom templates from the Content Editor (2:05)
Creating a custom page template (3:50)
Section survey

Creating Performant Themes

Implementing performant images (5:36)
Migrating image URLs on the fly (4:55)

Integrating Custom Data Sources

[6.6] Why you need to register post meta (5:28)
[6.6] How to register post meta (4:36)
[6.6] Displaying and editing post meta using Core blocks (3:14)
[6.6] Using block variations to create pre-bound blocks (2:31)
[6.6] Answering common questions about bound blocks (3:22)
Section survey

Creating Block Child Themes

About this section
How to unregister parent theme patterns using an allow list

From Discovery to Launch - Project Architecture

About this section
Should I build a classic, hybrid, or block theme? (7:05)
How to choose a starter theme: 3 scenarios (6:30)

From Discovery to Launch - Curating the Editor Experience

Controlling the default WordPress experience (5:15)
Initial Theme Setup checklist
Removing Directories: Block Patterns, Block Plugins, OpenVerse Media (8:39)
Removing unwanted blocks globally (4:10)
Removing unwanted blocks for specific post types or editors (6:07)
Section survey

Useful Plugins

Debugging themes with Query Monitor (5:44)

Teach online with

Implementing the Base Colors

Complete and Continue