Ep.011 Getting Started with WordPress Block Theme Development — Versana Theme Tutorial

Views: 220

Are you ready to dive into WordPress block theme development? In this tutorial, we’ll kick off a brand-new Full Site Editing (FSE) theme called Versana — designed to be professional, flexible, and production-ready. This is the first post in a multi-part series where we build the entire theme from scratch.

---

🧩 About the Versana Theme

Versana is a modern, clean, and powerful block-based WordPress theme. It is being developed as part of a practical video course to teach WordPress block theme development.

The theme is being designed for multiple real-world use cases:

• Submit to WordPress.org as a free public theme.
• Sell on ThemeForest as a commercial theme.
• List on Codoplex.com as a downloadable product.
• Apply variations on:
  • Blog site: blog.codoplex.com
  • WooCommerce store: codoplex.com
  • Plugin demo subdomains like wpexams.codoplex.com and unilms.codoplex.com

---

📂 Step 1: Create the Theme Folder

Go to your local WordPress installation directory under XAMPP:

C:\xampp\htdocs\your-wp-site\wp-content\themes\

Create a new folder named:

versana

This will serve as the root directory for your theme files.

---

🎨 Step 2: Create style.css

In the versana folder, create a style.css file and add the following comment block at the top. This is how WordPress recognizes your theme:

/*
Theme Name: Versana
Theme URI: https://codoplex.com/Author: CODOPLEX
Author URI: https://codoplex.com
Description: A modern, versatile full site editing block theme.
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: versana
Tags: full-site-editing, block-patterns, wide-blocks, custom-colors, translation-ready
*/

You don’t need to add custom CSS here — the theme will rely on block-based styling and theme.json.

---

⚙️ Step 3: Add theme.json

The theme.json file is the heart of block theme configuration. It defines global styles, layout settings, color palettes, spacing, typography, and more.

Create a theme.json file in the versana folder and add this base setup:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "custom": true,
      "palette": []
    },
    "spacing": {
      "customPadding": true
    },
    "typography": {
      "customFontSize": true,
      "customLineHeight": true
    }
  }
}

This configuration enables support for custom styling in both the block editor and front-end.

---

🖼️ Step 4: Add screenshot.png

Add a theme screenshot with the name screenshot.png in the root of the theme folder.

• Recommended dimensions: 1200×900 pixels
• This image will be displayed in the WordPress admin under Appearance → Themes

You can customize this image later to reflect your brand.

---

🧱 Step 5: Create templates/index.html

Block themes use HTML template files instead of index.php for defining structure. Let’s create the minimum required template to render the front-end of your site.

📁 Folder Structure

Inside the versana theme folder, create a new folder named:

templates

Inside the templates folder, create a file named:

index.html

🧩 Basic index.html Content

Add the following basic structure to your index.html file:

<p>Hello World!</p>

This file is required for your theme to render front-end content using Full Site Editing. Without it, the theme will not display any content.

---

✅ Folder Snapshot So Far

versana/
├── style.css
├── theme.json
├── screenshot.png
├── templates/
│   └── index.html

This completes the bare minimum required structure to activate and render a block theme.

✅ Step 6: Activate the Theme

1. Open your local WordPress site in the browser.
2. Log into the WP admin panel.
3. Go to Appearance → Themes.
4. Click Activate under the Versana theme.

Your theme is now live and ready to be extended with templates, patterns, and style variations.

📌 Tip

You can now visit the frontend of your site and it will load using the block template engine — even if the content is still minimal.

---

🔜 What’s Coming Next?

Now that your theme is created and activated, the next post will guide you through:

• Deep dive into theme.json
• Setting up color palettes, typography, spacing
• Creating a consistent global design system

Stay tuned for the next tutorial in this series!

---

🔗 Resources

• WordPress Block Theme Handbook