💰 20% Referral Hosting Discount: https://www.hostg.xyz/SHEiZ
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.
☕ BuyMeACoffee: https://www.buymeacoffee.com/RaddyTheBrand
GitHub Repo: https://github.com/RaddyTheBrand/Paperless-WordPress-Theme
Blog Post: http://bit.ly/3ur0Fiv
(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
◾ 31:35 Theme.json
◾ 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:
⚡ Hostinger: https://www.hostg.xyz/aff_c?offer_id=408&aff_id=69300
⚡ Elementor: https://trk.elementor.com/26518
Recording Equipment:
◾ Microphone: https://amzn.to/3Ppp8Ok
◾ Shotgun Mic: https://amzn.to/3IVqIot
◾ Camera: https://amzn.to/3z0bxpF
◾ Lens: https://amzn.to/3Pw4s7d
◾ Lighting: https://amzn.to/3PGXvzW
Computer Gear:
◾ Keyboard: https://amzn.to/3PGXvzW
◾ Headphones: https://amzn.to/3PJl9fg
◾ Mouse: https://amzn.to/3z1TGPf
Connect with me:
◾ Website: https://www.raddy.dev
◾ Newsletter: https://www.raddy.co.uk/newsletter
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
source
Great content man. Congrats! Very helpful!
devtools -> net -> disable cach
Can i use elementor to this theme;
Thanks so much for these unvaluables tutorials
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)"
Thank You…I really appreciate it.
so how you encounter red underline on wp code (missing preferences/ undefine function) because you only load theme folder instead of whole wp framework from it's root?, do you have some vs extension that you missed to talk about?
Is there any way I can download a zip file of the entire code of the website we just created using FSE?
can we sell a theme made using this method on envato / Themeforest without any issue ?
28:08 Just in case anyone else can't find template parts, for me they were hiding under Patterns.
Hey
Thank you for your tutorial.
I have opened the folder in vscode
But changes I make on vscode, don't show on wordpress.
Please what can I do?
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.
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.
I was able to follow along until about the point where you did inherent default width for the group part.. it seems to have changed in my version.. also the template parts is now under a diff section.. stuff changes so fast its hard to follow videos anymore 🙁
hey we can create theme using this fac and sell those on themeforest without any issue???
"Hi today we will be building a site with the full size editor"
* spends the first TWENTY MINUTES WRITING PHP CODE BY HAND
Shit, I just set up a test site on my multi and started a blank theme.
wonderfull !
Hey
Here is the correct json 🙂
.
.
.
.
.
"typography": {
"fontFamilies": [
{
"fontFamily": "'Inter', sans-serif",
"slug": "inter",
"name": "Inter",
"fontFace": [
{
"fontFamily": "Inter",
"fontWeight": "100",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-Thin.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "200",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-ExtraLight.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "300",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-Light.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-Regular.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "500",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-Medium.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "600",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-SemiBold.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-Bold.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "800",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-ExtraBold.ttf"]
},
{
"fontFamily": "Inter",
"fontWeight": "900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/inter/Inter-Black.ttf"]
}
]
}
]
}
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.
Thank you very very much! Great job!
Thank you for sharing with us this knowledge!
If you use Ctrl + Shift + R – it will refresh properly with clearing any cached css or js 🙂
Hi Rad, i'm actually following the steps on your tutorial and I encounter an error, "Fatal error: Uncaught TypeError: call_user_func_array(): Argument #1 ($callback) must be a valid callback, function….", I am new to this stuffs. Thank you