WordPress Full Site Editing

In the past I’ve been happily fiddling with WordPress themes and plugins manually, but with the new full site Editing system that doesn’t really work any more.

That’s not bad because you can probably get more effect with less effort using the new system.

I’m not a designer, so I’ve usually worked with child themes.

Somehow, an edited theme with the full site editor seems a bit like an old-style child theme. The modifications you make are in the database, and when the parent theme is updated, your changes remain. That was one of the important features of child themes, and that is also how the new system works.

In that sense there’s little need for child themes.

What if you want to use your modified theme on several sites?

Reusing modified themes

The full site editor has an “Export” option which will create a ZIP file that can be installed somewhere else.

Nice!

However, it contains the entire theme with the modifications from the full site editor applied, but with the original name. That means that next time the original theme is updated, the local changes disappear.

Less nice!

The “Create Block Theme” plugin

The nice people at wordpress.org have made a plugin to help with these issues.

It does several things, and it can also either clone an existing theme, including giving it a new name, or create a child theme of the active theme.

Cloning themes

A clone theme is a copy with another name, so an update to the original theme doesn’t overwrite your changes. It is an independent complete theme, and you don’t need to have the original theme installed on the production site.

Being an independent, complete copy, however, also means that updates to the original theme won’t be applied to the copy.

This might be fine, or it might not be, depending on what you want.

Child themes

A child theme only contains the changes from the parent theme, which must therefore be installed on the site.

Updates to the unmodified parts of the parent theme will be applied to the child theme automatically, just like with the pre full-site editing child themes.

First time I did this, the site didn’t work properly. The parent theme had a sidebar for desktop and a top bar for mobile, and both were shown all the time. There was not switch between the two presentations when the browser window changed size, as there should be.

The problem was that the parent theme’s style sheet wasn’t loaded.

This might be a bug in the “Create Block Theme” plugin.

The way around the problem is to export the child theme using the “Create Block Theme” plugin (not the export function in the full-site editor), and add a functions.php file to the ZIP file, containing these lines:

<?php

add_action( 'wp_enqueue_scripts', function () {
    $parenthandle = 'parent-style';
    $theme        = wp_get_theme();
    wp_enqueue_style( $parenthandle,
	get_template_directory_uri() . '/style.css',
	array(),
	$theme->parent()->get( 'Version' )
    );
} );

Install the updated ZIP file on the development site. Now the child theme will load both the style.css from the child and from the parent themes.

Updating the version number

The themes created with the “Create Block Theme” plugin all have version 0.0.1.

If you want another version number, you have to change the ZIP file before it is uploaded to the production site.

Open the ZIP file, and edit the version number in the file style.css.

I’ve opted for a version number made up of the date and time, as YYYYMMDD.HHMM.