How to Create a Custom WordPress FSE (Full Site Editing) Block Theme from Scratch – Full Course 2023
😀Any design!
😀Without plugins, without page builder!
😀Without programming,
😀Google and other fonts,
😀theme.json
😀 From Scratch for beginners!
Without using plugins or programming knowledge.
If you find my video helpful, you are welcome to spend me a coffee via the PayPal donation link below.
► Donation link:
https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S3W6MU4QLBKWL&lc=AT&item_name=Helmut%20Rossmann¤cy_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted
The theme has parallax effect, sticky header, about me page, blog and post template and also a template with a sidebar, landing page, archive template, category template, 404 template and search template.
theme.json file explained. How to install your own fonts (Any font. It doesn't matter whether it's a Google font or another font).
And of course: It's full responsive.
Content:
00:00 Introduction, Design and Features of the Theme
02:17 How does a FSE (Full Site Editing) Block Theme work inside WordPress
08:32 Who is this video for? General Framework of this tutorial
10:00 Install Developer Environment: Local and VS Code
13:20 Start of the Theme Development
14:53 Create .css file Create functions.php file
16:57 Custom Templates, assets folder, fonts (google) install fonts
18:50 theme.json file
26:20 Installing our Starter Theme and Global Styles
30:09 Create Header and Footer, Gutenberg Blocks
31:58 Navigation Menu
37:19 Footer
42:44 index.html File
43:44 Sticky Header
44:55 Front Page, Cover Block, Parallax Effect, Columns
59:20 Blog Template, WordPress Query Loop
1:04:43 Single Post Template
1:07:05 Page Template
1:10:20 Sidebar Template, Columns Block
1:15:28 Sticky Sidebar
1:17:55 Reverse / Hide on Mobile View
1:20:45 Landing Page / Blank Template
1:21:45 Archive Template, Query Loop, Category Templates
1:25:27 Search Template, Query Loop
1:29:24 404 Template
1:30:55 Export our Finished Theme
1:34:43 Integrate the Theme Images into the Theme
The links:
local:
https://localwp.com/
VS code:
https://code.visualstudio.com/download
WordPress Developer Handbook – theme.json file
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
Fonts Converter ttf to woff2:
https://cloudconvert.com/ttf-to-woff2
The course material: themes and WP installation
https://www.pfostenpower.biz/Course-Material-Block-Theme.zip
Here is my camera gear and recommendations:
https://www.amazon.de/shop/meinneuesleben24
Тэги:
#WordPress #WP_Theme #wordpress_theme #block_theme #fse_theme #full_site_editing #full_site_editing_theme #wordpress_block_theme #How_to_create_a_wp_block_theme #create_a_wordpress_full_site_editing_themeКомментарии:
Just wanna say a big thank Youuuuuuuuu!
Ответить
Question. Why doesn't the 2023 theme have a functions.php file? I've used your php file, so I can edit styles easier.
ОтветитьThis is very good. Wordpress is such a minefield, I found this easy to follow.
Ответить
great great tutorial i must say, so I can upload the zip file of theme on themeforest and sell the theme i just created following your video, thank you!☺☺
Ответить
Why own theme? Couldn't we edit theme 2023 and beginn with 2023? Is the own theme secure for updates? Thank you for the instruction...😀
Ответить
very well explained
Ответить
Hello Helmut, This is an excellent video. Clear, well-paced and thorough! I learned a great deal and am going to try and create an entire theme for myself. I'm in Phnom Penh btw so it was interesting to see the other videos on your channel. Please do some more tutorials/explanations about WordPress themes and full site editing as it does seem that this is really going to shake things up in the coming years and it would be good to get in on the ground level before it becomes too different. Thumbs up, subscribed and once again FANTASTIC video! Many thanks.
Ответить
Just Awesome. I love it
Ответить
Bonjour,
One of the best course about FSE in 2023.
I was a little surprised to find a WordPress tutorial on a channel rather devoted to Thailand (i spent a few weeks there a long time ago).
Thanks for this professional work with everything we need to understand the essentials of the full site editor.
promo sm
Ответить
Thanks for this video. The instructions are so easy to follow.
Ответить
Thank you, Helmut! This is the clearest tutorial I've seen on building a FSE theme! 💥 😆
Ответить
