Creating a Block Theme from Scratch

The is the beginning of my WP block theme from scratch explorations. This page will be edited to be a more complete tutorial, but for now it is serving more as a quick-form note.

Information here is gathered from various places, and I will add references as I go, but I have to start with Full Site Editing and the Frost Theme as the primary places of learning. More information will be added as I flesh out these posts

File Structure

In the local WordPress install (I recommend using Local by Flywheel), within the wp-content/themes folder, add a folder for the new theme and create the following structure of empty files. I will be calling my theme Builder:

builder
    parts
        footer.html
        header.html

    templates
        404.html
        index.html
        page.html
        single.html

    functions.php
    style.css
    theme.json

Update the style.css

Add the following to the styles.css. This is required information for the theme. More information can be found on the WordPress site.

/*
Theme Name: Builder
Theme URI:
Author:
Author URI:
Description:
Tags:
Requires at least: 6.0
Tested up to: 6.0
Requires PHP: 5.6
Version: 0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: builder
*/

/* Optional, uses CSS grid to place body elements */
.wp-site-blocks {
	display: grid;
	height: 100vh;
	grid-template-rows: auto 1fr auto;
	font-family: sans-serif;
}

Update the footer.html

Here, I am only using the built in WordPress site-wide search

<!-- wp:group {"align":"full", "layout":{"inherit":true}} -->
<div class="wp-block-group">
	<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search"} /-->
</div>
<!-- /wp:group -->

Update the header.html

<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull">
	<!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"}} -->
		<div class="wp-block-group alignwide">
			<div>
				<!-- wp:site-title /-->
				<!-- wp:site-tagline /-->
			</div>
			<!-- wp:navigation {"isResponsive":true,"style":{"spacing":{"blockGap":"20px"}}} -->
				<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
			<!-- /wp:navigation -->
		</div>
	<!-- /wp:group -->
</div>
<!-- /wp:group -->

404.html

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
	<!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group">
		<h1>404: Nothing found</h1>
	</div>
	<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->

index.html

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
	<!-- wp:query-title {"type":"archive","level":2,"fontSize":"large"} /-->
	<!-- wp:term-description /-->

	<!-- wp:spacer {"height":"20px"} -->
	<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
	<!-- /wp:spacer -->

	<!-- wp:query {"query":{"perPage":5,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"align":"full","layout":{"inherit":true}} -->
	<div class="wp-block-query alignwide">
		<!-- wp:post-template -->
		<!-- wp:post-title {"fontSize":"large","isLink":true} /-->
		<!-- wp:post-featured-image {"isLink":true} /-->
		<!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
		<div class="wp-block-group">
			<!-- wp:post-author {"showAvatar":false} /-->
			<!-- wp:post-date /-->
			<!-- wp:post-terms {"term":"category"} /-->
		</div>
		<!-- /wp:group -->
		<!-- wp:post-excerpt {"moreText":"Read more","showMoreOnNewLine":false} /-->
		<!-- /wp:post-template -->

		<!-- wp:spacer {"height":"40px"} -->
		<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
		<!-- /wp:spacer -->

		<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
			<!-- wp:query-pagination-previous {"label":"Previous"} /-->
			<!-- wp:query-pagination-next {"label":"Next"} /-->
		<!-- /wp:query-pagination -->

	</div><!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->

page.html

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
	<!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group">
		<!-- wp:post-title {"level":1} /-->
	</div>
	<!-- /wp:group -->
	<!-- wp:post-content {"layout":{"inherit":true}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->

single.html

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
	<!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group">
		<!-- wp:post-title {"level":1} /-->
	</div>
	<!-- /wp:group -->
	<!-- wp:post-content {"layout":{"inherit":true}} /-->
	<!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group">
		<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"className":"post-meta","layout":{"type":"flex"},"fontSize":"small"} -->
		<div class="wp-block-group post-meta has-small-font-size">
			<!-- wp:post-date /-->
			<!-- wp:paragraph -->
			<p aria-hidden="true">•</p>
			<!-- /wp:paragraph -->
			<!-- wp:post-author {"showAvatar":false} /-->
			<!-- wp:paragraph -->
			<p aria-hidden="true">•</p>
			<!-- /wp:paragraph -->
			<!-- wp:post-terms {"term":"category"} /-->
			<!-- wp:post-terms {"term":"post_tag"} /-->
		</div>
		<!-- /wp:group -->
		<!-- wp:spacer {"height":60} -->
		<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
		<!-- /wp:spacer -->
		<!-- wp:comments-query-loop -->
		<div class="wp-block-comments-query-loop">
			<!-- wp:comments-title {"style":{"spacing":{"margin":{"bottom":"30px"}}}} /-->
			<!-- wp:comment-template -->
			<!-- wp:columns {"style":{"spacing":{"blockGap":"10px","margin":{"bottom":"30px"}}}} -->
			<div class="wp-block-columns" style="margin-bottom:30px">
				<!-- wp:column {"width":"48px"} -->
				<div class="wp-block-column" style="flex-basis:48px">
					<!-- wp:avatar {"size":48,"style":{"border":{"radius":"24px"}}} /-->
				</div>
				<!-- /wp:column -->
				<!-- wp:column {"style":{"spacing":{"blockGap":"10px"}}} -->
				<div class="wp-block-column">
					<!-- wp:comment-author-name /-->
					<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"10px"}},"layout":{"type":"flex"}} -->
					<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
						<!-- 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-query-loop -->
	</div>
	<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->

functions.php

<?php
/**
 * Functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package builder
 * @since 0.1
 */

/**
 * Enqueue the style.css file.
 * 
 * @since 0.1
 */
function builder_styles() {
	wp_enqueue_style(
		'builder-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'builder_styles' );

if ( !function_exists( 'builder_setup' ) ) {
	function builder_setup() {

		// Add support for Block Styles.
		add_theme_support( 'wp-block-styles' );

		// Remove core block patterns.
		remove_theme_support( 'core-block-patterns' );
	}
}
add_action( 'after_setup_theme', 'builder_setup' );

theme.json

{
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "740px",
			"wideSize": "1200px"
		}
	}
}

Current state

This is where we currently are, nothing really interesting, but a solid start.

Screen capture of the current state of the website theme. This is using default web styles
Screen capture of Builder theme at this point


Posted

in

by