Ep.025 WordPress Core Templates: Gutenberg-First Complete Guide (2026)

Views: 9

Creating WordPress core templates Gutenberg designs is essential for any professional block theme. In this comprehensive guide, you’ll learn how to build all five essential WordPress templates using native Gutenberg blocks with minimal custom CSS—perfect for modern, maintainable themes.

In episode 24, we have implemented the blog and archive layouts with sidebar options.

Understanding WordPress Template Hierarchy

Before building WordPress core templates Gutenberg style, you need to understand WordPress’s template loading order. WordPress checks for templates in this sequence:

Single Post Template Order

1. single-{post-type}.html (custom post type specific)
2. single.html ← Most commonly used
3. singular.html
4. index.html (fallback)

Static Page Template Order

1. page-{slug}.html (page-specific)
2. page-{id}.html (ID-specific)
3. page.html ← Most commonly used
4. singular.html
5. index.html (fallback)

Search Results Template Order

1. search.html ← We’ll create this
2. index.html (fallback)

404 Error Template Order

1. 404.html ← We’ll create this
2. index.html (fallback)

Ultimate Fallback

• index.html – Catches everything else

Understanding this hierarchy helps you create the right templates for maximum coverage with minimum duplication.

The Five Essential WordPress Templates

1. single.html – Single Blog Post Template

The single.html template is your most important template for content-focused sites. It displays individual blog posts with full features.

Required Elements:

• Post title (H1)
• Featured image
• Post meta (date, author, categories)
• Full content
• Comments section
• Navigation (previous/next posts)
• Sidebar (if enabled in theme options)

Gutenberg-First Implementation:

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

<!-- wp:group {"tagName":"main","className":"blog-archive","style":{"spacing":{"padding":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|xl"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group blog-archive"
  style="padding-top:var(--wp--preset--spacing--xl);padding-bottom:var(--wp--preset--spacing--xl)">
  <!-- wp:group {"align":"wide","className":"blog-archive-group","layout":{"type":"constrained"}} -->
  <div class="wp-block-group alignwide blog-archive-group">

    <!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group alignwide" style="margin-bottom:var(--wp--preset--spacing--lg)">

      <!-- wp:post-featured-image {"align":"wide","aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|lg"}},"border":{"radius":"12px"}}} /-->

      <!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|sm"}},"layout":{"type":"constrained"}} -->
      <div class="wp-block-group alignwide">

        <!-- wp:group {"align":"wide","className":"post-meta","style":{"spacing":{"blockGap":"var:preset|spacing|sm","margin":{"bottom":"var:preset|spacing|md"}}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
        <div class="wp-block-group post-meta alignwide" style="margin-bottom:var(--wp--preset--spacing--md)">

          <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-100"}}}}} /-->

          <!-- wp:post-date {"format":"F j, Y","isLink":false,"style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-700"}}},"typography":{"fontSize":"0.875rem"}}} /-->

          <!-- wp:post-author-name {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-700"}}},"typography":{"fontSize":"0.875rem"}}} /-->

          <!-- wp:post-time-to-read {"style":{"typography":{"fontSize":"0.875rem"},"elements":{"link":{"color":{"text":"var:preset|color|neutral-700"}}}}} /-->

        </div>
        <!-- /wp:group -->

        <!-- wp:post-title {"align":"wide","level":1,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|md"}}}} /-->

        <!-- wp:post-content {"align":"full","layout":{"type":"default"}} /-->

        <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|sm"}},"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
        <div class="wp-block-group alignwide">

          <!-- wp:heading {"level":3,"fontSize":"lg"} -->
          <h3 class="wp-block-heading has-lg-font-size">Tags</h3>
          <!-- /wp:heading -->
          <!-- wp:post-terms {"term":"post_tag","separator":"  "} /-->

        </div>
        <!-- /wp:group -->

        <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|sm"}},"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
        <div class="wp-block-group alignwide single-post-navigations">
          <!-- wp:post-navigation-link {"type":"previous","showTitle":false,"linkLabel":true,"arrow":"arrow"} /-->
          <!-- wp:post-navigation-link {"showTitle":true,"linkLabel":false,"arrow":"arrow"} /-->
        </div>
        <!-- /wp:group -->

        <!-- wp:post-author-biography {"align":"full","showHeading":true,"layout":{"type":"default"}} /-->

        <!-- wp:comments -->
        <div class="wp-block-comments">
          <!-- wp:comments-title /-->
          <!-- wp:comment-template -->
          <!-- wp:columns -->
          <div class="wp-block-columns">
            <!-- wp:column {"width":"40px"} -->
            <div class="wp-block-column" style="flex-basis:40px">
              <!-- wp:avatar {"size":40} /-->
            </div>
            <!-- /wp:column -->

            <!-- wp:column -->
            <div class="wp-block-column">
              <!-- wp:comment-author-name /-->
              <!-- wp:group {"style":{"spacing":{"blockGap":"0.5em"}},"layout":{"type":"flex"}} -->
              <div class="wp-block-group">
                <!-- wp:comment-date /-->
                <!-- wp:comment-edit-link /-->
              </div>
              <!-- /wp:group -->
              <!-- wp:comment-content /-->
              <!-- wp:comment-reply-link /-->
            </div>
            <!-- /wp:column -->
          </div>
          <!-- /wp:columns -->
          <!-- /wp:comment-template -->

          <!-- wp:comments-pagination -->
          <!-- wp:comments-pagination-previous /-->
          <!-- wp:comments-pagination-numbers /-->
          <!-- wp:comments-pagination-next /-->
          <!-- /wp:comments-pagination -->

          <!-- wp:post-comments-form /-->
        </div>
        <!-- /wp:comments -->
      </div>
      <!-- /wp:group -->
      
    </div>
    <!-- /wp:group -->

    <!-- wp:group {"align":"full","className":"blog-sidebar","layout":{"type":"constrained"}} -->
    <div class="wp-block-group alignfull blog-sidebar">
      <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","layout":{"type":"constrained"}} -->
      <div class="wp-block-group alignwide has-neutral-100-background-color has-background"
        style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
        <!-- wp:heading {"level":3,"fontSize":"lg"} -->
        <h3 class="wp-block-heading has-lg-font-size">Search</h3>
        <!-- /wp:heading -->

        <!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search posts...","buttonText":"Search"} /-->
      </div>
      <!-- /wp:group -->

      <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","layout":{"type":"constrained"}} -->
      <div class="wp-block-group alignwide has-neutral-100-background-color has-background"
        style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
        <!-- wp:heading {"level":3,"fontSize":"lg"} -->
        <h3 class="wp-block-heading has-lg-font-size">Categories</h3>
        <!-- /wp:heading -->

        <!-- wp:categories {"showHierarchy":true,"showPostCounts":true} /-->
      </div>
      <!-- /wp:group -->

      <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","layout":{"type":"constrained"}} -->
      <div class="wp-block-group alignwide has-neutral-100-background-color has-background"
        style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
        <!-- wp:heading {"level":3,"fontSize":"lg"} -->
        <h3 class="wp-block-heading has-lg-font-size">Recent Posts</h3>
        <!-- /wp:heading -->

        <!-- wp:latest-posts {"displayPostDate":true,"displayFeaturedImage":true} /-->
      </div>
      <!-- /wp:group -->

      <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"neutral-100","layout":{"type":"constrained"}} -->
      <div class="wp-block-group alignwide has-neutral-100-background-color has-background"
        style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
        <!-- wp:heading {"level":3,"fontSize":"lg"} -->
        <h3 class="wp-block-heading has-lg-font-size">Tags</h3>
        <!-- /wp:heading -->

        <!-- wp:tag-cloud /-->
      </div>
      <!-- /wp:group -->
    </div>
    <!-- /wp:group -->

  </div>
  <!-- /wp:group -->

</main>
<!-- /wp:group -->

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

Key Gutenberg Blocks:

• post-featured-image – Displays post thumbnail
• post-terms – Shows categories/tags
• post-date – Publication date
• post-author-name – Author link
• post-time-to-read – Reading time estimate
• post-title – Main heading
• post-author – Author card with avatar
• post-content – Full post content
• post-navigation-link – Prev/next posts
• post-author-biography – Author bio
• comments – Complete comment system

Benefits: ✅ All blocks styled by theme.json ✅ Editable in Site Editor ✅ Minimal custom CSS needed ✅ SEO-optimized structure

2. page.html – Static Page Template

The page.html template is intentionally minimal, providing maximum flexibility for users to build custom page layouts.

Philosophy: Pages are unique—each needs different layouts. Keep the template simple and let users customize in the editor.

Minimal Implementation:

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

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|xl"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--xl);padding-bottom:var(--wp--preset--spacing--xl)">
    <!-- wp:group {"align":"wide","className":"blog-header","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group alignwide blog-header" style="margin-bottom:var(--wp--preset--spacing--lg)">
        <!-- wp:post-title {"level":1,"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|lg"}}}} /-->

        <!-- wp:group {"align":"wide","layout":{"type":"constrained","justifyContent":"left","contentSize":"100%"}} -->
        <div class="wp-block-group alignwide">
            <!-- wp:post-content {"layout":{"type":"default"}} /-->
        </div>
        <!-- /wp:group -->
         
    </div>
    <!-- /wp:group -->
</main>
<!-- /wp:group -->

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

That’s it! Just 2 blocks:

1. post-title – Page heading
2. post-content – User’s custom content

Why So Simple?

• Pages vary widely (About, Contact, Services)
• Users build custom layouts
• No constraints needed
• Maximum flexibility

Use Cases:

• About page
• Contact page
• Services page
• Privacy policy
• Terms of service
• Landing pages

3. 404.html – Error Page Template

A professional 404.html template turns errors into opportunities by providing helpful navigation.

Essential Elements:

• Large “404” visual
• Friendly error message
• Search box
• Navigation links
• Recent posts
• Homepage button

User-Friendly Implementation:

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

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|2xl","bottom":"var:preset|spacing|2xl"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group"
    style="padding-top:var(--wp--preset--spacing--2-xl);padding-bottom:var(--wp--preset--spacing--2-xl)">
    <!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|lg"}},"layout":{"type":"constrained","contentSize":"600px"}} -->
    <div class="wp-block-group alignwide">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"clamp(3rem, 10vw, 6rem)","fontWeight":"800","lineHeight":"1"},"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|sm"}}},"textColor":"neutral-300"} -->
        <h1 class="wp-block-heading has-text-align-center has-neutral-300-color has-text-color"
            style="margin-top:0;margin-bottom:var(--wp--preset--spacing--sm);font-size:clamp(3rem, 10vw, 6rem);font-weight:800;line-height:1">
            404</h1>
        <!-- /wp:heading -->

        <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|md"}}}} -->
        <h2 class="wp-block-heading has-text-align-center"
            style="margin-top:0;margin-bottom:var(--wp--preset--spacing--md)">Page Not Found</h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|lg"}}},"textColor":"neutral-700","fontSize":"md"} -->
        <p class="has-text-align-center has-neutral-700-color has-text-color has-md-font-size"
            style="margin-top:0;margin-bottom:var(--wp--preset--spacing--lg)">The page you're looking for doesn't exist
            or has been moved. Let's get you back on track.</p>
        <!-- /wp:paragraph -->

        <!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search for content...","width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"style":{"border":{"radius":"8px"}}} /-->

        <!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|xl"}}}} -->
        <hr class="wp-block-separator has-alpha-channel-opacity"
            style="margin-top:var(--wp--preset--spacing--xl);margin-bottom:var(--wp--preset--spacing--xl)" />
        <!-- /wp:separator -->

        <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|md"}}}} -->
        <h3 class="wp-block-heading has-text-align-center"
            style="margin-top:0;margin-bottom:var(--wp--preset--spacing--md)">Helpful Links</h3>
        <!-- /wp:heading -->

        <!-- wp:navigation {"ref":4,"overlayMenu":"never","style":{"spacing":{"blockGap":"var:preset|spacing|sm"}},"layout":{"type":"flex","justifyContent":"center","orientation":"vertical"}} /-->

        <!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|md"}}}} -->
        <hr class="wp-block-separator has-alpha-channel-opacity"
            style="margin-top:var(--wp--preset--spacing--xl);margin-bottom:var(--wp--preset--spacing--md)" />
        <!-- /wp:separator -->

        <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|md"}}}} -->
        <h3 class="wp-block-heading has-text-align-center"
            style="margin-top:0;margin-bottom:var(--wp--preset--spacing--md)">Recent Posts</h3>
        <!-- /wp:heading -->

        <!-- wp:latest-posts {"postsToShow":3,"displayPostDate":true,"displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":75,"featuredImageSizeHeight":75} /-->

        <!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|md"}}}} -->
        <hr class="wp-block-separator has-alpha-channel-opacity"
            style="margin-top:var(--wp--preset--spacing--xl);margin-bottom:var(--wp--preset--spacing--md)" />
        <!-- /wp:separator -->

        <!-- wp:buttons {"style":{"spacing":{"margin":{"top":"0"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons" style="margin-top:0"><!-- wp:button {"width":100} -->
            <div class="wp-block-button has-custom-width wp-block-button__width-100"><a
                    class="wp-block-button__link wp-element-button" href="/">← Back to Homepage</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
    <!-- /wp:group -->
</main>
<!-- /wp:group -->

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

UX Best Practices:

• ✅ Friendly tone (not punishing)
• ✅ Multiple navigation options
• ✅ Search functionality
• ✅ Recent content showcase
• ✅ Clear path home

SEO Consideration: This prevents “soft 404” errors by providing valuable content and internal links, reducing bounce rate.

4. search.html – Search Results Template

The search.html template displays search results with options to refine the query.

Key Features:

• Search query display
• Refine search box
• Results list
• Pagination
• No results handling

Complete Implementation:

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

<!-- wp:group {"tagName":"main","className":"blog-archive","style":{"spacing":{"padding":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|xl"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group blog-archive" style="padding-top:var(--wp--preset--spacing--xl);padding-bottom:var(--wp--preset--spacing--xl)">
    
    <!-- wp:group {"className":"blog-header","align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|lg"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group blog-header alignwide" style="margin-bottom:var(--wp--preset--spacing--lg)">
        
        <!-- wp:query-title {"type":"search","textAlign":"center","level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|sm"}}}} /-->
        
        <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|md"}}},"textColor":"neutral-700"} -->
        <p class="has-text-align-center has-neutral-700-color has-text-color" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--md)">Browse through the search results below or try a different search.</p>
        <!-- /wp:paragraph -->
        
        <!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Refine your search...","width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"style":{"border":{"radius":"8px"}}} /-->
        
    </div>
    <!-- /wp:group -->
    
    <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"align":"wide","layout":{"type":"constrained"}} -->
    <div class="wp-block-query alignwide">
        
        <!-- wp:post-template {"style":{"spacing":{"blockGap":"0"}}} -->
            
            <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|md"}}}} /-->
            
            <!-- wp:group {"className":"post-meta","style":{"spacing":{"blockGap":"var:preset|spacing|sm","margin":{"bottom":"var:preset|spacing|sm"}}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
            <div class="wp-block-group post-meta" style="margin-bottom:var(--wp--preset--spacing--sm)">
                
                <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-100"}}}}} /-->
                
                <!-- wp:post-date {"format":"M j, Y","isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-700"}}},"typography":{"fontSize":"0.875rem"}}} /-->
                
                <!-- wp:post-author-name {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|neutral-700"}}},"typography":{"fontSize":"0.875rem"}}} /-->
                
            </div>
            <!-- /wp:group -->
            
            <!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|sm"}},"typography":{"fontSize":"clamp(1.5rem, 3vw, 2rem)","fontWeight":"700","lineHeight":"1.3"}}} /-->
            
            <!-- wp:post-excerpt {"moreText":"Continue reading →","excerptLength":40,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} /-->
            
        <!-- /wp:post-template -->
        
        <!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|xl"}}}} -->
            <!-- wp:query-pagination-previous /-->
            <!-- wp:query-pagination-numbers /-->
            <!-- wp:query-pagination-next /-->
        <!-- /wp:query-pagination -->
        
        <!-- wp:query-no-results -->
            
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|2xl","bottom":"var:preset|spacing|2xl"}}},"layout":{"type":"constrained","contentSize":"600px"}} -->
            <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--2xl);padding-bottom:var(--wp--preset--spacing--2xl)">
                
                <!-- wp:heading {"textAlign":"center","level":2,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|md"}}}} -->
                <h2 class="wp-block-heading has-text-align-center" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--md)">No Results Found</h2>
                <!-- /wp:heading -->
                
                <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|lg"}}},"textColor":"neutral-700"} -->
                <p class="has-text-align-center has-neutral-700-color has-text-color" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--lg)">Sorry, we couldn't find any results for your search. Try different keywords or browse our recent posts below.</p>
                <!-- /wp:paragraph -->
                
                <!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}}} -->
                <hr class="wp-block-separator has-alpha-channel-opacity" style="margin-top:var(--wp--preset--spacing--lg);margin-bottom:var(--wp--preset--spacing--lg)"/>
                <!-- /wp:separator -->
                
                <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|md"}}}} -->
                <h3 class="wp-block-heading has-text-align-center" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--md)">Popular Posts</h3>
                <!-- /wp:heading -->
                
                <!-- wp:latest-posts {"postsToShow":5,"displayPostDate":true,"displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":75,"featuredImageSizeHeight":75} /-->
                
                <!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|md"}}}} -->
                <hr class="wp-block-separator has-alpha-channel-opacity" style="margin-top:var(--wp--preset--spacing--lg);margin-bottom:var(--wp--preset--spacing--md)"/>
                <!-- /wp:separator -->
                
                <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                <div class="wp-block-buttons">
                    <!-- wp:button -->
                    <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/">← Back to Homepage</a></div>
                    <!-- /wp:button -->
                </div>
                <!-- /wp:buttons -->
                
            </div>
            <!-- /wp:group -->
            
        <!-- /wp:query-no-results -->
        
    </div>
    <!-- /wp:query -->
    
</main>
<!-- /wp:group -->

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

Important Blocks:

• query-title with type="search" – Shows “Results for X”
• query with inherit:true – Uses search query
• query-no-results – Handles no matches gracefully

5. index.html – Fallback Template

The index.html template is your safety net, handling any content type without a specific template.

Minimal Fallback:

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

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|xl"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group"
    style="padding-top:var(--wp--preset--spacing--xl);padding-bottom:var(--wp--preset--spacing--xl)">
    <!-- wp:post-content {"align":"wide"} /-->
</main>
<!-- /wp:group -->

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

When Used:

• Custom post types without templates
• Plugin-created content
• Edge cases
• Development fallback

Why Minimal? Rarely used if you have proper templates, so keep it simple and functional.

CSS code for Single Post Template

create a new css file in assets/css/single.css with this code:

/**
 * Single Post Enhancements
 * Minimal custom styles - Gutenberg handles most styling
 *
 * @package Versana
 * @since 1.0.0
 */

/* ==========================================================================
   Post Navigation Links
   ========================================================================== */

/**
 * Previous/Next Post Navigation
 * Enhanced styling for post navigation links
 */

.single-post-navigations{
    margin-block-start: var(--wp--preset--spacing--xl, 3rem);
}

.wp-block-post-navigation-link {
    padding: var(--wp--preset--spacing--md, 1.5rem);
    background: var(--wp--preset--color--neutral-100, #fff);
    border: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    transition: all 0.3s ease;
    display: block;
    margin-block-end: var(--wp--preset--spacing--md, 1.5rem);
}

.wp-block-post-navigation-link:hover {
    border-color: var(--wp--preset--color--primary, #1A73E8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateX(4px);
}

.wp-block-post-navigation-link.post-navigation-link-previous:hover {
    transform: translateX(-4px);
}

.wp-block-post-navigation-link a {
    text-decoration: none;
    color: var(--wp--preset--color--neutral-900, #111);
}

.wp-block-post-navigation-link .post-navigation-link__label {
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    color: var(--wp--preset--color--neutral-700, #424242);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: block;
    margin-block-end: 0.5rem;
}

.wp-block-post-navigation-link .post-navigation-link__title {
    font-size: var(--wp--preset--font-size--lg, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
}

/* ==========================================================================
   Post Author Biography
   ========================================================================== */

/**
 * Author Bio Box
 * Professional author information display
 */
.wp-block-post-author-biography {
    padding: var(--wp--preset--spacing--lg, 2rem);
    background: var(--wp--preset--color--neutral-200, #f5f5f5);
    border-radius: 12px;
    border-left: 4px solid var(--wp--preset--color--primary, #1A73E8);
    max-width: 100%;
    margin-block-start: var(--wp--preset--spacing--xl, 3rem);
}

.wp-block-post-author-biography .wp-block-post-author-biography__heading {
    font-size: var(--wp--preset--font-size--lg, 1.25rem);
    margin-block-end: var(--wp--preset--spacing--sm, 1rem);
}

.wp-block-post-author-biography .wp-block-post-author-biography__bio {
    line-height: 1.7;
    color: var(--wp--preset--color--neutral-700, #424242);
}

/* ==========================================================================
   Comments Section
   ========================================================================== */

/**
 * Comments Container
 * Clean, modern comment styling
 */
.wp-block-comments {
    margin-block-start: var(--wp--preset--spacing--xl, 3rem);
    max-width: 100%;
}

.wp-block-comments-title {
    font-size: var(--wp--preset--font-size--2xl, 2rem);
    margin-block-end: var(--wp--preset--spacing--lg, 2rem);
}

/**
 * Individual Comment
 */
.wp-block-comment-template li {
    padding: var(--wp--preset--spacing--md, 1.5rem);
    background: var(--wp--preset--color--neutral-100, #fff);
    border: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    margin-block-end: var(--wp--preset--spacing--md, 1.5rem);
}

/**
 * Nested Comments (Replies)
 */
.wp-block-comment-template .children {
    margin-inline-start: var(--wp--preset--spacing--lg, 2rem);
    margin-block-start: var(--wp--preset--spacing--md, 1.5rem);
}

/**
 * Comment Author
 */
.wp-block-comment-author-name {
    font-weight: 600;
    font-size: var(--wp--preset--font-size--md, 1.125rem);
}

.wp-block-comment-author-name a {
    text-decoration: none;
    color: var(--wp--preset--color--neutral-900, #111);
}

/**
 * Comment Date
 */
.wp-block-comment-date {
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    color: var(--wp--preset--color--neutral-700, #424242);
}

.wp-block-comment-date a {
    text-decoration: none;
    color: inherit;
}

/**
 * Comment Content
 */
.wp-block-comment-content {
    margin-block-start: var(--wp--preset--spacing--sm, 1rem);
    line-height: 1.7;
    color: var(--wp--preset--color--neutral-700, #424242);
}

/**
 * Comment Reply Link
 */
.wp-block-comment-reply-link {
    margin-block-start: var(--wp--preset--spacing--sm, 1rem);
}

.wp-block-comment-reply-link a {
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    font-weight: 600;
    color: var(--wp--preset--color--primary, #1A73E8);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.wp-block-comment-reply-link a:hover {
    opacity: 0.7;
}

/**
 * Comment Edit Link
 */
.wp-block-comment-edit-link a {
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    color: var(--wp--preset--color--neutral-700, #424242);
    text-decoration: none;
}

/**
 * Comments Pagination
 */
.wp-block-comments-pagination {
    margin-block-start: var(--wp--preset--spacing--lg, 2rem);
    padding-block-start: var(--wp--preset--spacing--md, 1.5rem);
    border-block-start: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.1));
}

/**
 * Comment Form
 */
.wp-block-post-comments-form {
    margin-block-start: var(--wp--preset--spacing--xl, 3rem);
    padding: var(--wp--preset--spacing--lg, 2rem);
    background: var(--wp--preset--color--neutral-200, #f5f5f5);
    border-radius: 12px;
}

.wp-block-post-comments-form .comment-form-comment label {
    display: block;
    font-weight: 600;
    margin-block-end: 0.5rem;
}

.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wp--preset--color--neutral-300, rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    font-size: var(--wp--preset--font-size--base, 1rem);
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.wp-block-post-comments-form textarea:focus,
.wp-block-post-comments-form input[type="text"]:focus,
.wp-block-post-comments-form input[type="email"]:focus,
.wp-block-post-comments-form input[type="url"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary, #1A73E8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.wp-block-post-comments-form .form-submit input[type="submit"] {
    background: var(--wp--preset--color--primary, #1A73E8);
    color: var(--wp--preset--color--neutral-100, #fff);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wp-block-post-comments-form .form-submit input[type="submit"]:hover {
    background: var(--wp--preset--color--secondary, #E91E63);
}

/* ==========================================================================
   Post Content Enhancements
   ========================================================================== */

/**
 * Drop Cap Enhancement
 */
.has-drop-cap:not(:focus)::first-letter {
    font-size: 5em;
    line-height: 0.68;
    margin: 0.05em 0.1em 0 0;
    color: var(--wp--preset--color--primary, #1A73E8);
    font-weight: 700;
}

/**
 * Blockquote Enhancement
 */
.wp-block-quote {
    border-inline-start: 4px solid var(--wp--preset--color--primary, #1A73E8);
    padding-inline-start: var(--wp--preset--spacing--md, 1.5rem);
    font-style: italic;
    margin-block: var(--wp--preset--spacing--lg, 2rem);
}

.wp-block-quote cite {
    font-style: normal;
    font-weight: 600;
    color: var(--wp--preset--color--neutral-700, #424242);
    margin-block-start: var(--wp--preset--spacing--sm, 1rem);
    display: block;
}

/**
 * Pull Quote Enhancement
 */
.wp-block-pullquote {
    border-block: 4px solid var(--wp--preset--color--primary, #1A73E8);
    padding: var(--wp--preset--spacing--lg, 2rem);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/**
 * Mobile Optimizations
 */
@media (max-width: 781px) {
    .wp-block-post-navigation-link {
        padding: var(--wp--preset--spacing--sm, 1rem);
    }
    
    .wp-block-comment-template .children {
        margin-inline-start: var(--wp--preset--spacing--md, 1.5rem);
    }
    
    .wp-block-post-author-biography {
        padding: var(--wp--preset--spacing--md, 1.5rem);
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/**
 * Focus States
 */
.wp-block-post-navigation-link a:focus-visible,
.wp-block-comment-reply-link a:focus-visible,
.wp-block-post-comments-form input:focus-visible,
.wp-block-post-comments-form textarea:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #1A73E8);
    outline-offset: 2px;
}

/**
 * Reduced Motion
 */
@media (prefers-reduced-motion: reduce) {
    .wp-block-post-navigation-link {
        transition: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .wp-block-comments,
    .wp-block-post-comments-form {
        display: none;
    }
}

Gutenberg-First Benefits

1. Zero Custom CSS (Most Templates)

Traditional approach requires heavy CSS:

/* Traditional - DON'T DO THIS */
.post-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

Gutenberg-first approach:

<!-- wp:post-title /-->

Result: All styling comes from theme.json automatically!

2. Site Editor Compatibility

All templates are fully editable in Appearance → Editor → Templates.

Users can:

• Add/remove blocks
• Change colors
• Adjust spacing
• Reorder sections
• Customize layouts

No code knowledge required!

3. theme.json Power

Define styles once in theme.json:

{
  "styles": {
    "blocks": {
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--2-xl)",
          "fontWeight": "700"
        }
      }
    }
  }
}

Benefits:

• Applies to all post titles
• Editable in Global Styles
• Consistent across site
• No duplicate CSS

4. Performance Advantages

Traditional Theme:

custom.css:        50KB
template-parts.css: 30KB
single-post.css:   20KB
───────────────────────
Total:             100KB

Gutenberg Theme:

single.css:        6KB (minimal enhancements)
blog.css:          15KB (layouts)
───────────────────────
Total:             21KB (79% reduction!)

Conditional CSS Loading

Load CSS only when needed:

function versana_enqueue_dynamic_assets() {
    $theme_version = wp_get_theme()->get( 'Version' );
    
    // Single post CSS - only on blog posts
    if ( is_singular( 'post' ) ) {
        wp_enqueue_style(
            'versana-single',
            get_template_directory_uri() . '/assets/css/single.css',
            array(),
            $theme_version
        );
    }
    
    // Blog CSS - we need it on single post because of sidebar handlings
    if ( is_home() || is_archive() || is_search() || is_singular( 'post' ) ) {
        wp_enqueue_style(
            'versana-blog',
            get_template_directory_uri() . '/assets/css/blog.css',
            array(),
            $theme_version
        );
    }
}
add_action( 'wp_enqueue_scripts', 'versana_enqueue_dynamic_assets' );

Result:

• 404 page: 0KB custom CSS
• Page template: 0KB custom CSS
• Single post: 6KB CSS
• Archives: 15KB CSS

Impact: Faster load times, better Core Web Vitals.

Minimal Custom CSS Strategy

What Needs Custom CSS?

Only enhance what Gutenberg can’t handle well:

single.css enhancements:

1. Post Navigation – Prev/Next styling
2. Author Bio Box – Professional card design
3. Comments – Thread styling
4. Comment Form – Input styling

Everything else: theme.json handles it!

Example: Comment Form Styling

.wp-block-post-comments-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wp--preset--color--neutral-300);
    border-radius: 8px;
    font-family: inherit;
}

.wp-block-post-comments-form textarea:focus {
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

Uses theme.json variables:

• var(--wp--preset--color--neutral-300)
• var(--wp--preset--color--primary)

Benefits:

• Respects theme colors
• Updates globally
• Consistent design

Accessibility Best Practices

Semantic HTML Structure

<main>                    <!-- Main content landmark -->
    <article>             <!-- Post article -->
        <h1>Title</h1>    <!-- Primary heading -->
        <time>Date</time> <!-- Semantic date -->
        <div>Content</div>
    </article>
    
    <aside>               <!-- Comments sidebar -->
        <section>         <!-- Comment section -->
    </aside>
</main>

Screen Reader Benefits:

• Clear landmarks for navigation
• Proper heading hierarchy
• Semantic elements

Keyboard Navigation

All interactive elements are keyboard accessible:

/* Focus states */
.wp-block-post-navigation-link a:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

WCAG 2.1 AA Compliance:

• ✅ Visible focus indicators
• ✅ Sufficient color contrast
• ✅ Keyboard accessible
• ✅ Screen reader friendly

ARIA Labels

<!-- wp:comments {"ariaLabel":"Post comments section"} /-->
<!-- wp:query-pagination {"ariaLabel":"Search results pagination"} /-->

Helps screen reader users understand context.

SEO Optimization

Structured Data (Automatic)

Gutenberg blocks add Schema.org markup automatically:

Article Schema:

{
  "@type": "Article",
  "headline": "Post Title",
  "datePublished": "2026-02-05",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  }
}

No manual coding required!

Internal Linking

Single Post Template:

• ✅ Previous/Next post links
• ✅ Category links
• ✅ Tag links
• ✅ Author archive link

404 Template:

• ✅ Recent posts
• ✅ Navigation menu
• ✅ Homepage link

Search Template:

• ✅ Related results
• ✅ Popular posts

Result: Strong internal link structure for SEO.

Heading Hierarchy

<h1>Post Title</h1>           <!-- Only one H1 -->
  <h2>Section Heading</h2>     <!-- Main sections -->
    <h3>Subsection</h3>        <!-- Sub-sections -->

SEO Benefits:

• Clear content structure
• Better crawlability
• Improved rankings

Responsive Design

Mobile-First Approach

All templates adapt automatically:

Mobile (< 781px):

• Single column
• Stacked elements
• Full-width images
• Touch-friendly buttons (44px min)

Tablet (782-1024px):

• Adjusted spacing
• Optimized images
• Comfortable reading

Desktop (> 1025px):

• Maximum content width (800px)
• Wide-aligned images
• All features enabled

Responsive Typography

Use clamp() for fluid text:

<!-- wp:heading {
    "style":{"typography":{"fontSize":"clamp(1.5rem, 3vw, 2rem)"}}
} -->

Breakdown:

• Minimum: 1.5rem (24px) on mobile
• Preferred: 3vw (scales with viewport)
• Maximum: 2rem (32px) on desktop

No media queries needed!

Testing Your Templates

Visual Testing Checklist

Single Post:

• [ ] Featured image displays
• [ ] Meta info correct
• [ ] Content readable
• [ ] Comments work
• [ ] Navigation links function
• [ ] Author bio shows

Page:

• [ ] Title displays
• [ ] Content renders
• [ ] Blocks work properly
• [ ] Wide/full alignment

404:

• [ ] Large 404 visible
• [ ] Search functional
• [ ] Links work
• [ ] Recent posts show
• [ ] Homepage button works

Search:

• [ ] Query displays
• [ ] Results show
• [ ] No results handled
• [ ] Pagination works
• [ ] Refine search functions

Performance Testing

Run Lighthouse audit on each template:

Target Scores:

• Performance: 90+
• Accessibility: 100
• Best Practices: 100
• SEO: 100

Common Issues:

• Unoptimized images → Use WebP
• No lazy loading → Enable in WordPress
• Slow server → Use caching

Browser Testing

Test all templates in:

• ✅ Chrome/Edge (90%+ market)
• ✅ Safari/iOS (15-20%)
• ✅ Firefox (5-10%)
• ❌ IE11 (deprecated 2022)

Common Mistakes to Avoid

1. Over-Customizing Templates

Wrong:

/* Duplicating theme.json styles */
.post-title {
    font-size: 2rem;
    color: #1A73E8;
    font-weight: 700;
}

Right:

<!-- wp:post-title /-->
<!-- Uses theme.json automatically -->

2. Hard-Coded Values

Wrong:

<div style="margin-bottom: 2rem;">

Right:

<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|lg"}}}} -->

3. Ignoring Mobile

Wrong: Designing only for desktop

Right:

• Start with mobile design
• Test on real devices
• Use responsive units
• Touch-friendly targets

4. Skipping Accessibility

Wrong: No focus states, poor contrast

Right:

• WCAG 2.1 AA compliance
• Keyboard navigation
• Screen reader testing
• Clear focus indicators

Customization Examples

Add Related Posts to Single Template

After content, before comments:

<!-- wp:separator /-->

<!-- wp:heading {"level":2} -->
<h2>Related Posts</h2>
<!-- /wp:heading -->

<!-- wp:query {"query":{"perPage":3,"postType":"post"}} -->
    <!-- wp:post-template -->
        <!-- wp:post-featured-image /-->
        <!-- wp:post-title {"isLink":true} /-->
        <!-- wp:post-excerpt {"excerptLength":15} /-->
    <!-- /wp:post-template -->
<!-- /wp:query -->

Add Breadcrumbs to Single Post

At the top, before featured image:

<!-- wp:group {"className":"breadcrumbs"} -->
    <!-- Use a breadcrumbs plugin or custom code -->
<!-- /wp:group -->

Remove Author Bio

Delete the <!-- wp:post-author-biography --> block.

Custom 404 Message

Edit the paragraph in 404.html:

<!-- wp:paragraph -->
<p>Oops! This page took a vacation. 
   Let's find you something interesting instead.</p>
<!-- /wp:paragraph -->

Conclusion

Building WordPress core templates Gutenberg style in 2026 is about embracing native WordPress features and minimizing custom code. By leveraging Gutenberg blocks and theme.json, you create:

✅ Lightweight templates (minimal CSS) ✅ Maintainable code (Gutenberg updates apply) ✅ Flexible designs (Site Editor compatible) ✅ Accessible content (WCAG compliant) ✅ SEO-friendly structure (automatic Schema) ✅ Fast-loading pages (conditional CSS)

Key Takeaways

1. Five templates cover everything: single, page, index, 404, search
2. Gutenberg-first approach beats custom CSS
3. theme.json handles most styling needs
4. Minimal custom CSS (6KB for enhancements)
5. Conditional loading improves performance
6. Accessibility built-in, not added later

Start with these core templates, customize as needed, and enjoy best-seller quality results with minimal maintenance!

---

FAQ

Q: Do I need custom CSS for any templates? A: Only single.css needs minor enhancements (comments, navigation). All other templates use 100% Gutenberg + theme.json.

Q: Can users edit these templates? A: Yes! All templates are fully editable in Appearance → Editor → Templates.

Q: What about custom post types? A: Create single-{post-type}.html for custom styling, or use single.html as fallback.

Q: How do I add a sidebar to single posts? A: Sidebar is already added inside the single.html, just adjust the setting for the sidebar on theme options page.

Q: Will these work with page builders? A: These are pure WordPress templates—no page builder needed or compatible. They use native Gutenberg only.

Q: How many templates does WordPress actually need? A: Minimum: index.html. Recommended: All five we covered for complete coverage.