How to Create a Custom WordPress FSE (Full Site Editing) Block Theme from Scratch – Full Course 2023
8.8 هزار بار بازدید -
2 سال پیش
-
In this tutorial you will
In this tutorial you will learn how to create a professional Full Site Editing Block Theme (website) for WordPress from Scratch (step by step):
😀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...
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...
Fonts Converter ttf to woff2:
https://cloudconvert.com/ttf-to-woff2
The course material: themes and WP installation
https://www.pfostenpower.biz/Course-M...
Here is my camera gear and recommendations:
https://www.amazon.de/shop/meinneuesl...
😀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...
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...
Fonts Converter ttf to woff2:
https://cloudconvert.com/ttf-to-woff2
The course material: themes and WP installation
https://www.pfostenpower.biz/Course-M...
Here is my camera gear and recommendations:
https://www.amazon.de/shop/meinneuesl...
2 سال پیش
در تاریخ 1401/11/23 منتشر شده
است.
8,858
بـار بازدید شده