The two most likely culprits are a broken preloaded plugin or a broken theme. Let’s look at how to fix both.

Broken Plugin

The quickest way to fix this is to go in with ftp or go to your webhosting file manager and rename the plugin directory to plugin.nw. Preloaded plugins sorted.

Broken Theme

Themes are trickier. You have to rename the active theme, then rename one of the default WordPress themes to the name of the broken active theme. For instance. Say I’m using the theme “Broken” – I rename “Broken” to “Broken.nw” I then rename “twentynineteen” to “Broken” I can now go into theme selection in my WordPress and choose a working theme. Now that everything is working I can rename “Broken” back to “twentynineteen” then “Broken.nw” to “Broken”

This happened to a client recently. They had selected a third party theme and a WordPress update broke everything. All they were getting was this critical error:

It turned out the theme that they had installed broke the latest version of WordPress. The convoluted instructions above for renaming the theme brought the site back online.

This is one of the reasons I have resorted to using the WordPress default themes and then customizing them myself. When you use a third party theme it relies on that third party to keep the theme updated. It adds a dependency over which you have no control. Personally I prefer to keep things as simple as possible.

To access your hosting file manager, you need to log into your hosting account, select cpanel, then look for file manager under the files section. I will update this post as I encounter and fix more WordPress problems.

In other news it’s great to see the Government give out the password security advice that I gave in my last blog post. Perhaps they were reading it Let’s hope everyone updates their systems to take this into account! There’s nothing more infuriating than a prescriptive password system telling you to use a capital letter. And a number. And a punctuation mark.

The recent default WordPress themes have seen a trend towards minimalism, with themes that are optimized for readability. The last two themes have added extensive support for the WordPress block editor. Out of the box, they offer enough functionality to provide a good looking website with a minimum of tweaking, but have the flexibility for advanced customization. Or in the words of the developers, they offer a blank canvas.

The first thing to do with any new theme is to create a child theme. Themes, particularly new ones, are regularly updated and if you don’t create a child theme, you run the risk that a theme update will overwrite any customizations that you might have painstakingly implemented.

The new Twenty TwentyOne theme looks good without any tweaking. It has good looking typography and it supports dark mode.

It has deleted the company logo and I see from the specifications that the logo dimensions have changed. Twenty twenty required a 300 x 300 pixel logo, whereas twenty twentyone needs a 300 x 100 pixel one. The new theme supports dark mode so it will also be important to ensure that any logo works against both a light and dark background!

It has also capitalized the company name for some reason and there’s a lot of white space at the bottom of the page. The page titles are in a rather large font but I think it might be worth sticking with. I’ll take a deep dive into it when I have more time.

UPDATE: Perfomance of the updated website was shocking. It took over a minute for the main page of the website to load! As a result, the whole website has been reinstalled and the php version updated. Load times are back to normal. If you notice any issues please get in touch.

Twenty Nineteen has a simple, yet elegant feel. There is a real emphasis on typography. This first image shows a static page with a featured image. The featured image is maximized to cover the full page and a filter (blue) is applied over the top.

Page down and this is what the rest of the page will look like.

This is a static page on the Twenty Seventeen theme with a featured image. The featured image will be full screen on the home page and then is used more as a website banner, for the rest of the site.

This is a Twenty Nineteen static page. The typography really stands out. The theme has better support for all the new features that the Gutenberg editor offers.

This is a similar page with the Twenty Seventeen theme. The typography is really clear, although it’s not quite as clear as the Twenty Nineteen theme. Graphically though the Twenty Seventeen theme delivers a better impact.

This site is now running the latest version of WordPress 5 and that comes with 3 builtin themes twenty-sixteen, twenty-seventeen and twenty-nineteen. These themes are maintained by WordPress so they make a solid starting point for any WordPress development. Any updates to WordPress will be reflected in these themes as they are part of the core WordPress installation. In addition to relying on the default themes, we are going to attempt to minimise plugin use, as this is another area that can weaken security and introduce problems with site updates.

The first thing to do is to create a child theme. A child theme inherits all the functionality and styling of the parent theme. Any changes you make to the theme are made in the child theme, that way the parent theme can safely be updated without overwriting your changes. To do this go into the wp-content directory and create a new folder twentyseventeen-child or twentynineteen-child and create the following files:

For the twenty-seventeen theme

style.css

 /*
 Theme Name: Twenty Seventeen Child
 Description: The custom theme Twenty Seventeen Child using the parent theme Twenty Seventeen.
 Author: Tulltech
 Author URI: https://tulltech.co.uk
 Template: twentyseventeen
 Version: 1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 */

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'twentyseventeen-style'; 
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

For the twenty-nineteen theme

style.css

/*
 Theme Name:   Twenty Nineteen Child
 Theme URI:    http://example.com/twenty-nineteen-child/
 Description:  Twenty Nineteen Child Theme
 Author:       Tulltech
 Author URI:   http://tulltech.co.uk
 Template:     twentynineteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twentynineteenchild
*/

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'twentynineteen-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

You can also add a custom image to give the new child theme a picture. The file should be named screenshot.png with dimensions 1200×900, although any reasonable sized 4:3 image should look okay.

The major feature of the 5.0 release is the Gutenberg editor. Gutenberg feels like a major step forward. On our old site we used a Visual Composer from WPBakery which was very good. But whenever you introduce new factors into your site, you also introduce possible incompatibilities. With the Gutenberg editor you are using functionality that is baked into WordPress. For instance, you can switch to the code editor and copy your whole page and paste it into a new page. When you turn the visual editor back in, the page has been copied perfectly.

Gutenberg has a number of tools called blocks. Blocks allow you to add all kinds of content without needing specialized technical knowledge.

You can add blocks then drag them around. There are blocks that allow you to create advanced layouts, from simple columns to more complicated tables. Gutenberg gives the user a lot of power in a relatively simple interface.

I say relatively simple, but I have installed WordPress for clients and they haven’t considered the interface simple at all. Hopefully Gutenberg will change this for them, although as a programmer it’s easy to lose sight of the fact that what appears simple is quite technical for some users.