🚀 Getting Started with WordPress Block Theme Development — Versana Theme Tutorial

Get started with WordPress block theme development by building the Versana theme from scratch. In this first tutorial, we create the theme folder, set up essential files like style.css and theme.json, and activate the theme for Full Site Editing (FSE) development.

Views: 34

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

Tags

Leave a Reply