| Table of Contents |
|---|
| Overview |
| Quick Start Guide |
| Learn Block Theme Development |
| What's New? |
| Issues? |
This is a starter Block Theme for WordPress developers to build a custom, enterprise-level theme. To get the most out of it, you'll need in-depth familiarity with WordPress Block Theme development.
For those less familiar with Block Theme development, I provide a few guidelines to upgrade your development skills in the Learning Block Theme Development section below.
In your wp-content/themes directory, run git clone git@github.com:jacobcassidy/cassidywp-starter-block-theme.git.
If you use GitHub, create a new remote repo there and then update your local repo to connect with it by running: git remote set-url origin <new-url>. Make sure to replace <new-url> with your actual GitHub URL, such as git@github.com:username/new-repository.git or https://github.com/username/new-repository.git.
You can confirm you're connected to the correct remote repo by running git remote -v.
When you rename the theme to start your custom development, do a global search and replace in your code editor to replace the following texts (keep the same formatting of lower/uppercase letters in your replacement text):
| Text to Replace | Type | Used In |
|---|---|---|
CassidyWP\StarterBlockTheme |
Namespace | PHP files |
cassidywp-starter-block-theme |
Name/Text Domain | Multiple file types |
CassidyWP Starter Block Theme |
Theme Name | style.css |
In your theme's root directory, run npm i. This will install the packages and scripts listed in package.json. These packages and scripts are used to format, lint, and build your theme files using ESLint, Prettier, Stylelint, Webpack, and more (it's useful to have the ESlint, Prettier, and Stylelint extensions installed if you use Visual Studio Code).
To run a script listed in package.json, start the command with npm run.
For example:
npm run buildwill build your files once for production.npm run startwill continually watch for any file changes and automatically build them as development files.npm run lint:csswill lint your css and scss files for any code standard issues or errors.
These scripts come from the @wordpress/scripts package.
Other Visual Studio Code extensions you may find useful in your development (excluding those mentioned above) are:
- Alphabetical Sorter (sorts lines of code alphabetically, such as CSS properties)
- Browser Refresh (refreshes your browser window without leaving VSCode so you can see the latest code changes)
- Cassidy Dark Theme (a theme I developed for my personal use)
- Code Spell Checker (catches spelling errors before you commit your code)
- Color Highlight (colorizes hex codes in CSS and HTML)
- CSS Nesting Syntax Highlighting (adds missing syntax colorization when using the CSS nesting style)
- Git Blame (shows whom committed the code you're reviewing)
- PHP DocBlocker (creates boilerplate DocBlocks for you to fill in)
- PHP Intelephense (helps you be more productive while coding in PHP)
- PHP Sniffer & Beautifier (we use this for formatting PHP files)
- Version Lens (shows you the latest versions available for a package, such as in package.json)
In a nutshell, it's WordPress' native replacement for page-builder plugins such as Elementor, Divi, Beaver Builder, and WPBakery. The WordPress Core team created it to allow WordPress users to build websites with no-code and for WordPress to compete with the likes of Wix, Squarespace, and other no-code website-building platforms.
A WordPress Block Theme uses an UI editor called the Block Editor, which uses components called... wait for it... "Blocks". These Blocks are like legos used to create pages and reusable design patterns (which are multiple Blocks combined). The Block system is very flexible in allowing both no-code WordPress users and software developers to modify it for their uses.
For an official explanation, read WordPress' Key Concepts Explanations.
Wait, if a Block Theme can be created with no-code, what would a company need a software engineer for?
Out-of-the-box, WordPress has a Block library with dozens of core Blocks (see the Core Blocks Reference) which can be used to build a complete website. These core Blocks have minimum styles applied to them and can be modified in the WordPress Block Editor without knowing any code.
However, by default, the no-code Block Editor is both overloaded with options and limited in customization abilities (as are all page-builders, to try to be all things for all people). For this reason, companies usually want to have a custom Block Theme developed to their brand style.
This involves modifying core Blocks and patterns, creating new Blocks and patterns, and removing a glut of core options that makes editing non-intuitive and hard not to make a mess out of. This requires code, or more specifically, JavaScript, PHP, and React code, and a deep understanding of Block Theme development.
In other words, the default, no-code Block Editor is great for hobbyists and small business owners who like tinkering on their own website, or for agencies pumping out cookie-cutter brochure websites, but for an enterprise-level site that has specific needs, this is a no go.
When developing a Block (either for a theme such as this, or a plugin), there are three main types of builds you can make:
- Customize an existing core Block to add or remove features.
- Clone and extend an existing core Block as a new Block.
- Create a brand new Block from scratch for a specific need.
For most custom Block development, you can build features using PHP or JavaScript. Since core development has shifted almost entirely to the JavaScript way, I recommend using JavaScript for most of your Block development. However, you'll still need to know PHP to be able to fully develop different aspects of Block Themes since many files such as patterns and functions still use PHP.
WordPress has a free Block Editor handbook to teach you basics of developing Blocks. They also have 2 free courses for learning how to develop WordPress themes:
For deeper premium courses, you can go through the paid courses offered by WP Development Courses:
WordPress has traditionally been a PHP-based platform since its start, and while PHP is still used for the core functions, the Block Editor uses a modern paradigm of developing with JavaScript, or more specifically React , to create and render the Blocks.
Since React is a JavaScript library (or, debatably, a Framework), a Block Theme developer should have a strong foundation in JavaScript fundamentals. While expert JavaScript knowledge is not required to develop Blocks, you should be familiar with variables, data types, string methods, loops, and conditionals to get around well in React.
React uses a paradigm of combining HTML and JavaScript called JSX, which is used in WordPress' Block development. Knowing the fundamentals of JavaScript and JSX will go a long way in developing new Blocks or modifying existing ones.
The best reference resource for JavaScript is MDN. And you can learn modern React from the official React website. Both are free and provide fantastic documentation for developers.
If you want to go deeper, there are many free and paid courses, such as The Joy of React (paid), Epic React (paid), FreeCodeCamp (free), and The Orin Project (free). Or if you want to really master the fundamentals of programming and can dedicate 1000+ hours of study to do so, Launch School (paid) has an amazing master-based curriculum with JavaScript.
View the Changelog to see what's new.
If you come across any issues, please feel free to report them here. You are also welcome to create a pull request.