Raddy Website Design & Development Tutorials

How to make a custom WordPress Theme from scratch

By Raddy in WordPress ·

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

Issues:

Credit:

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.