FREELessons:11Length:1.5 hours
In this course, we’ll go through a method of creating a custom Gutenberg block-driven layout in a WordPress theme, without using a single line of JavaScript.
Creating completely custom Gutenberg blocks can be quite an in-depth process, with heavy use of JavaScript, and may not be the right fit for your theme development goals.
With our alternative approach, we’ll instead use a combination of a custom post type and a content filter to create a custom back end that drives a fully controlled front-end design.
Let’s begin!
Do you want to learn WordPress development from start to finish? Check out our learning guide: Learn WordPress Development.
1.Introduction
1.1Welcome to the Course00:52
1.1
Welcome to the Course
00:52
2.Theme Basics
2.1Create the Basic Theme Files07:17
2.1
Create the Basic Theme Files
07:17
2.2Theme Initialization Functions06:53
2.2
Theme Initialization Functions
06:53
2.3Set Up a Custom Post Type08:07
2.3
Set Up a Custom Post Type
08:07
3.Custom Gutenberg Block Template
3.1Set Up the Block Template and Page Custom Heading10:22
3.1
Set Up the Block Template and Page Custom Heading
10:22
3.2Create the First Row of Tours16:22
3.2
Create the First Row of Tours
16:22
3.3Create the Second Row of Tours04:57
3.3
Create the Second Row of Tours
04:57
4.Filtering Gutenberg Content
4.1Set Up the Default Filtered Block Rendering12:16
4.1
Set Up the Default Filtered Block Rendering
12:16
4.2Set Up Column Iteration09:00
4.2
Set Up Column Iteration
09:00
4.3Render the Column Inner Blocks11:25
4.3
Render the Column Inner Blocks
11:25
5.Conclusion
5.1Wrapping Up04:17
5.1
Wrapping Up
04:17
