Design your theme as well as your posts and pages using Gutenberg, Full Site Editor.
Gutenberg was launched as an integrated part of WordPress 5.0. Gutenberg was the name given to the new block editor that replaced the Classic WYSIWYG editor that we’d been using since the early versions of WordPress.
What you’ll learn
- Gutenberg as a block editor for creating content on posts and page..
- An introduction to Gutenberg Full Site Editing and how that turns you into a web designer..
- How to create a simple theme (that is Full Site Editor compatible) from scratch..
- How templates are used by WordPress to control the layout of different parts of your website..
- Learn which templates controls each of the web pages on your site, and how to edit, or create templates so they look the way you want them to..
- We’ll take a close look at the Twenty Twenty Two theme as a starting point for your own site..
Course Content
- Introduction –> 2 lectures • 8min.
- Gutenberg Block Editor –> 18 lectures • 2hr 12min.
- Full Site Editing Concepts –> 8 lectures • 40min.
- Create a Blank Theme –> 13 lectures • 1hr 12min.
- The Twenty Twenty Two theme –> 11 lectures • 38min.
Requirements
- A working/basic knowledge of WordPress..
- Windows, Mac, or Linux computer needed to install WordPress on your own computer OR a web host and domain to work on.
Gutenberg was launched as an integrated part of WordPress 5.0. Gutenberg was the name given to the new block editor that replaced the Classic WYSIWYG editor that we’d been using since the early versions of WordPress.
Gutenberg is the editor of choice as you create the content for your WordPress posts and pages. There’s blocks for headers, blocks for images, blocks for text. And blocks for just about anything else you’d want to add to a web page. You can build your posts and pages by dragging the blocks onto, and around, the editor. As you build the content of your web pages, your WordPress theme controls other aspects of your site, like the header and footer areas.
But Gutenberg has just had it’s biggest ever update in WordPress 5.9. Full Site Editing! This is often abbreviated to FSE, but what does this mean?
Using the same block editor (Gutenberg) you’ve been using for your content, you can now edit and design the headers and footers for your website. So you design the bit at the top of the page, the bit at the bottom, and the bit in the middle. That means you now have total control over the design of your website. That is Full Site Editing.
This course is designed to get you up to speed quickly with Full Site Editing in WordPress.
In this course:
- An overview of Gutenberg and Full Site Editing principles.
- An in-depth look at the Gutenberg editor, including a detailed look at some of the most important blocks.
- Follow along as we create a basic theme that is Full Site Editing compatible. We’ll create all of the templates and template parts needed for the theme to function. This part of the course is there to reinforce the idea that web pages are controlled by templates, and show you which templates control which areas of your site. By following along and creating this theme for yourself, you’ll reinforce the important principles of Full Site Editing, and know which templates you need to add/edit to change the look of the posts, pages, archives pages, search page, 404 page, etc.
- We’ll look at the default FSE-enabled template that comes with WordPress 5.9. It’s called Twenty Twenty Two and has a number of templates created for you. With the knowledge gained earlier in the course, you’ll be confident taking this theme (or any other FSE-enabled theme) as a starting point, and editing it so your site looks the way you want it to look.
- We’ll look at creating custom templates for specific posts, pages, or sections of your site, and create a simple template that can be used for a landing page.
By the end of the course, you’ll have the confidence to take over the design of your own website, using Gutenberg to design the header, footer, and content. You’ll be on your way to mastering Full Site Editing.