How to make a custom WordPress Theme from scratch
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.
What is FSE (Full Site Editing)
FSE represents a significant shift in the way that WordPress websites can be created. It is a tool with WordPress 5.9 and above that allows you to build fully working websites based on drag-and-drop blocks. It’s an excellent way to make quick edits to your site without going through the hassle of manually changing code.
Video Tutorial
Video Includes:
- Project Structure
- Theme Setup
- Theme Styles
- Colours, Typography, Elements such as headings, buttons etc
- Theme Settings
- Layout, Palette, Typography, Spacing, Borders and etc
- Theme Parts such as Header and Footer
- Page Templates
- You’ll see some of the issues and some of the benefits of using FSE
Project Structure
assets (dir)
- css (dir)
- blocks (dir)
- images (dir)
- js (dir)
inc (dir)
patterns (dir)
parts (dir)
- footer.html
- header.html
templates(dir)
- 404.html
- archive.html
- index.html
- page.html
- single.html
- search.html
functions.php
index.php
README.txt
rtl.css
screenshot.png
style.css
editor-style.css
theme.jsonLaragon Installation
The Laragon installation is extremely simple. Go to their website, download the file and then follow the installation instructions. It’s literally a “next”, “next”, and “next” job. No further configuration is required.
Opinion
In my opinion, there are no speed performance advantages of using the Full Site Editing over the traditional development process. It’s definitely going to have better performance than some of the popular WordPress editors out there, but it’s not as powerful as them.
6.1.1 Updates
- Change WP_DEBUG from “wp-config.php” to true. This will solve caching issues and also it will give you helpful errors.
- In functions.php you no longer need to set theme defaults and register block styles. Jump straight to Enqueue Styles.
- You can now enable most FSE UI tools such as Borders, Padding, Margin, Spacing, etc.. by adding “appearanceTools” inside the settings “Settings” object. Set it to true.
- There is now a new option called “useRootPaddingAwareAlignments”. It lives in the Settings object. You can see it to true and adjust the padding around your layout.
Resources
- Official Block Theme Setup Documentation
- https://developer.wordpress.org/themes/block-themes/creating-new-themes-using-the-site-editor/
- https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
Issues:
- https://github.com/WordPress/gutenberg/issues/41535
- https://github.com/WordPress/gutenberg/issues/35607
Credit:
- 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
Thank you for reading this tutorial. Share it with friends and family.
Thank you for reading this article. Please consider subscribing to my YouTube Channel. It’s FREE!
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
Thank you, Raddy. This video opened my eye (as a WordPress dev) to FSE and I have since taken my time to learn and master it. I’m recently rebuilding my blog’s theme the FSE way (although I write some codes for some modifications).
I am glad to hear hear that. I am fairly optimistic about the FSE way of creating websites. It’s fast and with some modifications you can defiantly build good websites.