Step 2: Essential Theme Files – Core WordPress Theme Structure

Anatoliy DovgunAnatoliy Dovgun
5 min read

Step 2: Essential Theme Files

Create the core files required for a WordPress Full Site Editor theme using the 4WP Starter Theme* as our foundation for Personal Branding and Corporate sites.

Project Foundation:

  • Base Theme: 4WP Starter Theme* – FSE starter theme built for developers

  • Theme Name: 4WP Starter Theme* (customize for your project)

  • Use Cases: Personal Branding Site and Corporate websites

  • License: MIT License (developer-friendly)

Essential Files:

  • style.css – Theme header and metadata (REQUIRED)

  • theme.json – FSE configuration and design tokens (REQUIRED)

  • templates/index.html – Main FSE template (REQUIRED for theme functionality)

  • functions.php – Theme functionality and hooks (recommended for professional themes)

  • screenshot.png – Theme preview image (1200x900px, WordPress standard)

Code Snippets:

style.css:

/*
Theme Name: 4WP Starter Theme
Description: Full Site Editing (FSE) starter theme for Personal Branding and Corporate sites
Version: 1.0.0
Author: 4WP Development Team
Author URI: https://github.com/4wpdev
Text Domain: 4wp-starter
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Tags: full-site-editing, block-themes, personal-branding, corporate, modern

=== CUSTOMIZE FOR YOUR PROJECT ===
Theme Name: [YOUR_THEME_NAME]          // Change to your theme name
Author: [YOUR_NAME]                    // Change to your name/company
Author URI: [YOUR_WEBSITE]             // Change to your website
Text Domain: [your-theme-slug]         // Change to your theme slug (lowercase, hyphens)
Description: [YOUR_DESCRIPTION]        // Customize description
*/

templates/index.html:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<div class="wp-block-group">
    <!-- wp:query {"queryId":42,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-content /-->
            <!-- wp:post-date /-->
        <!-- /wp:post-template -->

        <!-- wp:query-pagination -->
        <div class="wp-block-query-pagination">
            <!-- wp:query-pagination-previous /-->
            <!-- wp:query-pagination-numbers /-->
            <!-- wp:query-pagination-next /-->
        </div>
        <!-- /wp:query-pagination -->
    </div>
    <!-- /wp:query -->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

functions.php:

<?php
/**
 * 4WP Starter Theme Functions
 * 
 * @package 4WPStarterTheme    // CUSTOMIZE: Change to YourThemePackage
 * @since 1.0.0
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Theme setup
 * CUSTOMIZE: Rename function prefix 'fourwp_' to 'yourtheme_'
 */
function fourwp_theme_setup() {    // CUSTOMIZE: yourtheme_theme_setup()
    // Add theme support for various features
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'editor-styles' );

    // CUSTOMIZE: Change text domain to match your theme
    load_theme_textdomain( '4wp-starter', get_template_directory() . '/languages' );
    //                      ^^^^^^^^^^^^ Change this to your-theme-slug
}
add_action( 'after_setup_theme', 'fourwp_theme_setup' );    // CUSTOMIZE: Update function name

/**
 * Enqueue theme assets
 * CUSTOMIZE: Rename function prefix 'fourwp_' to 'yourtheme_'
 */
function fourwp_enqueue_assets() {    // CUSTOMIZE: yourtheme_enqueue_assets()
    // CUSTOMIZE: Change handle and text domain
    wp_enqueue_style( 
        '4wp-starter-style',    // CUSTOMIZE: 'your-theme-style'
        get_stylesheet_uri(), 
        array(), 
        wp_get_theme()->get( 'Version' )
    );

    // Enqueue block editor styles
    add_editor_style( 'assets/css/editor-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'fourwp_enqueue_assets' );    // CUSTOMIZE: Update function name

/**
 * Add support for Personal Branding features
 * CUSTOMIZE: Rename function prefix 'fourwp_' to 'yourtheme_'
 */
function fourwp_personal_branding_setup() {    // CUSTOMIZE: yourtheme_personal_branding_setup()
    // Add support for custom header
    add_theme_support( 'custom-header', array(
        'default-image'      => '',
        'width'              => 1920,
        'height'             => 1080,
        'flex-height'        => true,
        'flex-width'         => true,
    ) );

    // Add support for custom background
    add_theme_support( 'custom-background', array(
        'default-color' => 'ffffff',
    ) );
}
add_action( 'after_setup_theme', 'fourwp_personal_branding_setup' );

// ✨ More exciting stuff coming in the next steps... 🚀

WordPress FSE Standards:

  • ✅ No closing PHP tag: WordPress standard – prevents whitespace output issues

  • ✅ ABSPATH check: Security protection against direct file access

  • ✅ Function prefixes: Prevent naming conflicts with other themes/plugins

  • ✅ Proper documentation: PHPDoc comments for all functions

  • ✅ Hook usage: WordPress action/filter hooks for proper integration

  • ✅ Block theme tags: Use ‘full-site-editing’, ‘block-themes’ in style.css

FSE vs Classic Themes:

  • ✅ HTML templates required: Use templates/index.html as main template

  • ✅ theme.json required: Central configuration for design tokens and settings

  • ✅ Template parts: Use /template-parts/ for reusable components

  • ✅ Block patterns: Use /patterns/ for pre-designed content layouts

  • ✅ Query blocks: Use wp:query for dynamic content loops

Customization Checklist:

  • ✅ Theme Name: Change “4WP Starter Theme*” to your theme name

  • ✅ Author Info: Update author name and website URL

  • ✅ Text Domain: Change “4wp-starter” to “your-theme-slug”

  • ✅ Function Prefix: Replace “fourwp_” with “yourtheme_” throughout

  • ✅ Package Name: Update @package from “4WPStarterTheme” to “YourThemePackage”

  • ✅ Handle Names: Change CSS/JS handles to match your theme

  • ✅ Description: Customize theme description and tags

Professional Theme Screenshot

screenshot.png is essential for professional theme presentation:

  • Dimensions: 1200×900 pixels (4:3 ratio)

  • File format: PNG (recommended) or JPG

  • Content: Show Personal Branding or Corporate layout preview

  • Quality: High-resolution, clean design showcase

  • File size: Keep under 1MB for performance

  • Design focus: Highlight FSE capabilities and modern design

What This Creates:

  • 4WP Starter Theme* foundation with MIT license

  • Personal Branding and Corporate site capabilities

  • Pure FSE theme structure with HTML templates

  • Modern WordPress 6.0+ development approach

  • Professional theme presentation with screenshot

  • Developer-friendly codebase structure

  • Standards-compliant FSE theme architecture

GitHub Integration:

The 4WP Starter Theme* repository (🚧 under development – use your own theme name for production) provides:

  • Version control: Git-based development workflow

  • Collaboration: Issues, pull requests, and community contributions

  • Documentation: README.md with setup instructions

  • Licensing: Clear MIT license for commercial and personal use

  • Updates: Regular improvements and WordPress compatibility updates

Next Step:

Configure Composer for dependency management and modern PHP development practices with the 4WP Starter Theme* foundation.

Resources & References

0
Subscribe to my newsletter

Read articles from Anatoliy Dovgun directly inside your inbox. Subscribe to the newsletter, and don't miss out.

fseFSE themesWordPress Full Site EditingGutenberg

Written by

Anatoliy Dovgun
Anatoliy Dovgun