How We Constructed a New House for WordPress.com Builders Utilizing the Twenty Twenty-4 Theme – WordPress.com Information


In the previous couple of weeks, our staff right here at WordPress.com has rebuilt developer.wordpress.com from the bottom up. If you happen to construct or design web sites for different individuals, in any capability, bookmark this website. It’s your new dwelling for docs, assets, the most recent information about developer options, and extra. 

Somewhat than creating a novel, customized theme, we went all-in on utilizing Twenty Twenty-4, which is the default theme for all WordPress websites. 

That’s proper, with a mix of built-in Web site Editor functionalities and conventional PHP templates, we have been in a position to create a website from scratch to deal with all of our developer assets. 

Under, I define precisely how our staff did it.

A Twenty Twenty-4 Little one Theme

The developer.wordpress.com website has existed for years, however we realized that it wanted an overhaul with a view to modernize the appear and feel of the location with our present branding, in addition to accommodate our new developer documentation

You’ll most likely agree that the location wanted a refresh; right here’s what developer.wordpress.com regarded like two weeks in the past:

The old developer.wordpress.com homepage with the headline 'Howdy, Developers' on a blue background with several CTAs to get started and try WordPress.com for free

As soon as we determined to revamp and rebuild the location, we had two choices: 1) construct it completely from scratch or 2) use an present theme. 

We knew we needed to make use of Full Web site Modifying (FSE) as a result of it will enable us to simply use present patterns and provides our content material staff the greatest writing and enhancing expertise with out them having to commit code.

We thought-about ranging from scratch and utilizing the official “Create Block Theme” plugin. Constructing a brand new theme from scratch is a good possibility if you happen to want one thing tailor-made to your particular wants, however Twenty Twenty-4 was already near what we needed, and it will give us a headstart as a result of we are able to inherit most kinds, templates, and code from the mother or father theme.

We shortly selected a hybrid theme method: we’d use FSE as a lot as attainable however nonetheless fall again to CSS and traditional PHP templates the place wanted (like for our Docs customized submit sort).

With this in thoughts, we created a minimal little one theme based mostly on Twenty Twenty-4.

Spin up a scaffold with @wordpress/create-block

We initialized our new theme by operating npx @wordpress/create-block@newest wpcom-developer

This gave us a folder with instance code, construct scripts, and a plugin that may load a customized block.

If you happen to solely want a customized block (not a theme), you’re all set.

However we’re constructing a theme right here! Let’s work on that subsequent.

Modify the setup into a baby theme

First, we deleted wpcom-developer.php, the file accountable for loading our block by way of a plugin. We additionally added a capabilities.php file and a model.css file with the anticipated syntax required to determine this as a baby theme. 

Regardless of being a CSS file, we’re not including any kinds to the model.css file. As a substitute, you may consider it like a documentation file the place Template: twentytwentyfour specifies that the brand new theme we’re creating is a baby theme of Twenty Twenty-4.

/*
Theme Title: wpcom-developer
Theme URI: https://developer.wordpress.com
Description: Twenty Twenty-4 Little one theme for Developer.WordPress.com
Creator: Automattic
Creator URI: https://automattic.com
Template: twentytwentyfour
Model: 1.0.0
*/

We eliminated all the demo recordsdata within the “src” folder and added two folders inside: one for CSS and one for JS, every containing an empty file that would be the entry level for constructing our code.

The theme folder construction now regarded like this:

A WordPress child theme folder structure

The construct scripts in @wordpress/create-block can construct SCSS/CSS and TS/JS out of the field. It makes use of Webpack behind the scenes and offers an ordinary configuration. We are able to prolong the default configuration additional with customized entry factors and plugins by including our personal webpack.config.js file. 

By doing this, we are able to:

  1. Construct particular output recordsdata for sure sections of the location. In our case, we have now each PHP templates and FSE templates from each customized code and our mother or father Twenty Twenty-4 theme. The FSE templates want minimal (if any) customized styling (due to theme.json), however our developer documentation space of the location makes use of a customized submit sort and web page templates that require CSS.
  2. Take away empty JS recordsdata after constructing the *.asset.php recordsdata. With out this, an empty JS file shall be generated for every CSS file.

Because the construct course of in WordPress Scripts depends on Webpack, we have now full management over how we need to modify or prolong the construct course of. 

Subsequent, we put in the required packages:

​​npm set up path webpack-remove-empty-scripts --save-dev

Our webpack.config.js ended up wanting just like the code beneath. Discover that we’re merely extending the defaultConfig with just a few additional properties.

Any extra entry factors, in our case src/docs, could be added as a separate entry within the entry object.

// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );

// Utilities.
const path = require( 'path' );

// Add any new entry factors by extending the webpack config.
module.exports = {
	...defaultConfig,
	...{
		entry: {
			'css/international':  path.resolve( course of.cwd(), 'src/css',   'international.scss' ),
			'js/index': path.resolve( course of.cwd(), 'src/js', 'index.js' ),
		},
		plugins: [
			// Include WP's plugin config.
			...defaultConfig.plugins,
			// Removes the empty `.js` files generated by webpack but
			// sets it after WP has generated its `*.asset.php` file.
			new RemoveEmptyScriptsPlugin( {
				stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
			} )
		]
	}
};

In capabilities.php, we enqueue our constructed property and recordsdata relying on particular circumstances. For instance, we constructed separate CSS recordsdata for the docs space of the location, and we solely enqueued these CSS recordsdata for our docs. 

<?php

operate wpcom_developer_enqueue_styles() : void {
    wp_enqueue_style( 'wpcom-developer-style',
        get_stylesheet_directory_uri() . '/construct/css/international.css'
    );
}

add_action( 'wp_enqueue_scripts', 'wpcom_developer_enqueue_styles' );

We didn’t must register the model recordsdata from Twenty Twenty-4, as WordPress handles these inline.

We did must enqueue the kinds for our traditional, non-FSE templates (within the case of our developer docs) or any extra kinds we needed so as to add on prime of the FSE kinds.

To construct the manufacturing JS and CSS domestically, we run npm run construct

For native growth, you may run npm run begin in a single terminal window and npx wp-env begin (utilizing the wp-env bundle) in one other to begin an area WordPress growth server operating your theme.

An active wpcom-developer child theme on a local WordPress installation

Whereas constructing this website, our staff of designers, builders, and content material writers used a WordPress.com staging website in order that adjustments didn’t have an effect on the present developer.wordpress.com website till we have been able to launch this new theme.

theme.json

Twenty Twenty-4 has a complete theme.json file that defines its kinds. By default, our hybrid theme inherits all the model definitions from the mother or father (Twenty Twenty-4) theme.json file. 

We selectively overwrote the elements we needed to vary (the colour palette, fonts, and different model components), leaving the remainder to be loaded from the mother or father theme. 

WordPress handles this merging, in addition to any adjustments you make within the editor. 

Lots of the default kinds labored effectively for us, and we ended up with a compact theme.json file that defines colours, fonts, and gradients. Having a duplicate of the mother or father theme’s theme.json file makes it simpler to see how colours are referenced.

You possibly can change theme.json in your favourite code editor, or you may change it instantly within the WordPress editor and then obtain the theme recordsdata from Gutenberg.

WordPress settings with a red arrow pointing to the Export tool

Why may you need to export your editor adjustments? Types can then be transferred again to code to make sure they match and make it simpler to distribute your theme or transfer it from an area growth website to a stay website. This ensures the FSE web page templates are saved in code with model management. 

Once we launched this new theme on manufacturing, the template recordsdata loaded from our theme listing; we didn’t must import database data containing the template syntax or international kinds.

World kinds in SCSS/CSS

World kinds are added as CSS variables, and they are often referenced in CSS. Altering the worth in theme.json may also be certain that the opposite colours are up to date.

For instance, right here’s how we reference our “distinction” colour as a border colour:

border-color: var(--wp--preset--color--contrast);

Some plugins require these recordsdata in a theme, e.g. by calling get_header(), which doesn’t robotically load the FSE header template. 

We didn’t need to recreate our header and footer to cowl these circumstances; having only one supply of fact is quite a bit higher.

By utilizing do_blocks(), we have been in a position to render our wanted header block. Right here’s an instance from a header template file:

<head>
<?php
wp_head();
$fse_header_block = do_blocks( '<!-- wp:template-part {"slug":"header","theme":"a8c/wpcom-developer","tagName":"header","space":"header", "className":"header-legacy"} /-->' );
?>
</head>
<physique <?php body_class(); ?>>
<?php
echo $fse_header_block;

Our new dwelling for builders is now stay!

The new developer.wordpress.com homepage with a black background, a pixelated W logo, and the headline 'Powerful WordPress Hosting for Developers'

Try our new-and-improved developer.wordpress.com website at the moment, and go away a remark beneath telling us what you assume. We’d love your suggestions. 

Utilizing customized code and staging websites are simply two of the numerous developer options out there to WordPress.com websites that we used to construct our new and improved developer.wordpress.com.

If you happen to’re a developer and taken with getting early entry to different development-related options, click on right here to allow our “I’m a developer” setting in your WordPress.com account.

the Developer Features page on WordPress.com with an "I am a developer" toggle and cards displaying developer features like SFTP, SSH, WP-CLI, Staging sites, and Custom code

Be a part of 105.7M different subscribers

Related Articles

Latest Articles