How to make a custom WordPress Theme from scratch

By Raddy in WordPress · 21st July 2022

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.json

Laragon 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:

• How to Create Custom eCommerce Theme with WordPress (FSE) and WooCommerce
• Create Block Theme Font Permission Fix
• Learn Morgan – HTTP request logger for NodeJs
• Create a custom Smart Assistant device using Web Technologies – Re-Upload

Author

Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]

Previous Post in Category

Next Post in Category