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.
- 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
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.json
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.
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.
- 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.
- Official Block Theme Setup Documentation
- 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!