How to Create a Custom WordPress Theme 2022 (FSE)

This is a step-by-step guide to building a custom WordPress blogging theme with a Full Site Editor. You'll be taken through the front-end and back-end design of the theme.

We will go thru the entire process of installing WordPress locally, setting up the theme and creating a couple of pages. Throughout the process, you will see some bugs, drawbacks and overall possibilities. I would strongly suggest that you watch the quick demo before you begin.

(includes ideas, resources, structure and links)

Chapters:
◾ 0:00 Introduction:
◾ 0:43 Demo
◾ 1:45 Installing WordPress
◾ 3:50 Creating Custom Theme
◾ 23:47 Site Settings
◾ 26:43 FSE Editor
◾ 28:11 Page Template Styles
◾ 1:30:17 Header Part
◾ 1:44:30 Footer Part
◾ 1:55:05 Home Page
◾ 2:24:30 Single Page
◾ 2:48:00 About Page
◾ 2:49:27 Contact Page
◾ 2:51:00 End

Discounts:

Recording Equipment:

Computer Gear:

Connect with me:

Credit:
Paper Photo by Olga Thelavart on Unsplash
Photo by Johan Mouchet on Unsplash
Photo by Caleb George on Unsplash
Photo by Cédric Frixon on Unsplash
Photo by Paula-Jorunn Naes on Unsplash
Photo by Hasmik Ghazaryan Olson on Unsplash

#wordpress #fse

[donnazukowski]

Wow! This is a great tutorial. The best one on YouTube for modern WordPress. Better than sitting through 40 hours of videos. It got me exactly where I needed to be.

[Hektor]

Thank you for sharing with us this knowledge!

[helengriva]

Raddy, thank you so much! This is just what I was looking for so long! You did really great job! 👏

[NotManyWise]

Brilliant, I just couldn't find a way in to try and understand all that code. Thanks Raddy, great job.

[abdallaelgarhy]

This is a great tutorial. The best one on YouTube

[pourpasunrond]

Thanks a lot. This is a helpful explanation to explore the FSE.

[fiqihalfarizy]

woahh just found this, subscribed!! thank you raddy!

[slap]

Raddy, you are a saviour!!! i love this video! thank you sooo so much! i have learnt a lot

[cristianvieru]

Great content man. Congrats! Very helpful!

[rahulbaghel]

This is the best tutorial on this topic

[speedhunter]

Great video ! Here is why sometime you were not able to refresh your style : "By default WordPress caches the Stylesheet that gets generated out of theme.json. For development purposes you can bypass that caching by enabling debug mode via the WP_DEBUG global in your wp-config.php. (SCRIPT_DEBUG also achieves the same thing)"

[jhnpldng]

I guess you've figured out by now that everything should be in some sort of container, group/row/column. That's how you get more options like background/padding/margin and block spacing. Left/right margins are available on some blocks but not containers. Groups and a single column give you that inherit default layout(width). Rows give you horizontal and vertical alignment. Columns(two or more) give you block spacing. Then it's just a matter of mixing and matching and nesting in different ways to get the outcome you're looking for. That just takes trial and error until you learn them.
I did not know adding background color adds padding. Explains some issues I've been having.
As for your Read Time, Brainstorm Force has a plugin - Read Meter – Reading Time & Progress Bar and it has a shortcode that can be added to your Single Post template. A CPT would be another way. The plugin automatically calculates the time with an algorithm. Also comes with an optional progress bar that shows readers how far along they are.
Blockpress theme has some options you can turn on like Back to Top button, Enable Progress bar on posts, Enable Floating TOC on posts. Might check their code and get some clues.

[HM-yvtt]

Great tutorial! One remark: if you use clamp for font sizes, you can have nasty surpises like when you have multiple h-tag but the number of characters different. One can be bigger than the other.

[martinkaspar]

Hello dear Raddy - Brilliant clip - thanks. your videos are a great resource:. Would you do some vids about the new Version 6.1 That would be awesome!

[abderrahmandouara]

Impressive Tutorial! Thank you very much for the help.

I have question, I saw that you have autocomplete when you write in theme.json, what extension are you using?

[dieDilettanten]

Full website refresh: ctrl + shift + r
That saves me, when the browser cached the styles.css and avoids struggle like on 1:20:00

[davidson]

Hi Raddy, definitely everyone who knows WordPress will love this video. I have learnt a lot from this video alone, specially about FSE.
I have a question too. Will it make very slow if I use Astra + Spectra to build my website or do you recommend build it from base theme or with a custom theme?
Thank you once again. ❤

[scriptles]

So you can "shift + c;ick refresh" and it will force a hard reload of the page. Sometimes when you refresh it just pulls from the cache.

[BradCathey]

Great tutorial. What is the color theme you are using for VSCode?

[AslamD]

To disabling caching, always set WP_DEBUG to true inside wp-config.php file while doing development. I just found out that on the official documentation of theme.json.