Posted on

Supercharge the Default WordPress Theme With Twentig, a Toolbox for Twenty Twenty

Page layout from the Twentig WordPress plugin.
Custom page pattern from the Twentig plugin.

I am often on the hunt for those hidden gems when it comes to block-related plugins. I like to see the interesting places that plugin authors venture. That is why it came as a surprise when someone recommended I check out the Twentig plugin a few days ago. Somehow, it has flown under my radar for months. And, it has managed to do this while being one of the more interesting plugins for WordPress I have seen in the past year.

Twentig is a plugin that essentially gives superpowers to the default Twenty Twenty theme.

While I have been generally a fan of Twenty Twenty since it was first bundled in core, it was almost a bit of a letdown in some ways. It was supposed to be the theme that truly showcased what the block editor could do — and it does a fine job of styling the default blocks — but there was a lot of potential left on the table. The Twentig plugin turns Twenty Twenty into something worthier of a showcase for the block editor. It is that missing piece, that extra mile in which WordPress should be marching its default themes.

While the new Twenty Twenty-One default theme is just around the corner, Twentig is breathing new life into the past year’s theme. The developers behind the plugin are still fixing bugs and bringing new features users.

Of its 34 reviews on WordPress.org, Twentig has earned a solid five-star rating. That is a nice score for a plugin with only 4,000 active installations. As I said, it has flown under the radar a bit, but the users who have found it have obviously discovered something that adds those extra touches to their sites they need.

What Does Twentig Do?

It is a toolbox for Twenty Twenty. The headline feature is its block editor features, such as custom patterns and page layouts. It also offers a slew of customizer options that allow end-users to put their own design spin on the default theme. However, my interest is primarily in how it extends the block editor.

Let’s get this out of the way up front. Twentig’s one downside is that it adds a significant amount of additional CSS on top of the already-heavy Twenty Twenty and block editor styles. I will blame the current lack of a full design system from WordPress on most of this. Styling for the block editor can easily bloat a stylesheet. Adding an extra 100+ kb per page load might be a blocker for some who would like to try the plugin. Users will need to weigh the trade-offs between the additional features and the added page size.

The thing that makes Twentig special is its extensive patterns and pages library, which offers one-click access to hundreds of layouts specifically catered to the Twenty Twenty theme.

Custom hero pattern from the Twentig WordPress plugin in the block editor.
Inserting one of the hero patterns.

It took me a few minutes to figure out how to access the patterns — mainly because I did not read the manual. I expected to find them mixed in with the core patterns inserter. However, the plugin adds a new sidebar panel to the editor, which users can access by clicking the “tw” icon. After seeing the list of options, I can understand why they probably would not fit into WordPress’s limited block and patterns inserter UI.

It would be easier to list what the plugin does not have than to go through each of the custom patterns and pages.

The one thing that truly sets this plugin apart from the dozens of other block-library types of plugins is that there are no hiccups with the design. Almost every similar plugin or tool I have tested has had CSS conflicts with themes because they are trying to be a tool for every user. Twentig specifically targets the Twenty Twenty theme, which means it does not have to worry about whether it looks good with the other thousands of themes out there. It has one job, which is to extend its preferred theme, and it does it with well-designed block output.

The other aspect of this is that it does not introduce new blocks. Every pattern and page layout option uses the core WordPress blocks, which includes everything from hero sections to testimonials to pricing tables to event listings. And more.

Twentig does not stop adding features to the block editor with custom patterns. The useful and sometimes fun bits are on the individual block level, and I have yet to explore everything. I continue to discover new settings each time I open my editor.

Whether it is custom pullquote styles, a photo image frame, or an inner border tweak to the Cover block (shown below), the plugin adds little extras that push what users can do with their content.

Custom inner border style from the Twentig WordPress plugin on the Cover block.
Inner border style for the Cover block.

Each block also gets some basic top and bottom margin options, which comes in handy when laying out a page. At this point, I am simply looking forward to discovering features I have yet to find.

Areas Themes Should Explore

One of the things I dislike about many of these features being within the Twentig plugin is that I would like to see them within the Twenty Twenty theme instead. Obviously not every feature belongs in the theme — some features firmly land in plugin territory. The default WordPress themes should also leave some room for plugin authors to explore. But, shipping some of the more prominent patterns and styles with Twenty Twenty would make a more robust experience for the average end-user looking to get the most out of blocks.

Block patterns were not a core WordPress feature when Twenty Twenty landed. However, for the upcoming Twenty Twenty-One theme, which is expected to bundle some unique patterns, the design team should explore what the Twentig plugin has brought to the current default. That is the direction that theme development should be heading, and theme developers can learn a lot by stealing borrowing from this plugin.

Posted on

9 Top Free WordPress Author Bio Box Plugins

Drawing attention to the author or authors on your site may be a key piece of your overall strategy. Perhaps you’re trying to establish a more personal tone. Perhaps you’re trying to build a reputation. Perhaps you’re trying to attract quality contributors. These are but a few potential reasons why you might want to make sure your readers connect the content with the person writing it.

Out of the box, WordPress provides users with a biographical info section in the User Profile screen where post authors and site users or members can add information about themselves.

WordPress User Profile - Biographical info
The default WordPress User Profile author bio box is not the be-all and the end-all of bio boxes.

Depending on your theme and how its settings are configured, information about the author can display in Post author archives…

Post Author Archive Page
Not happy with your post author archive page? You can have it as you like it…with plugins! (Theme: WordPress Twenty Twenty)

And at the end of every post…

WordPress Twenty Twenty Theme - Post Author Bio
A post author bio at the end of every post? I guess you can have too much of a good thing!

With some WordPress themes, however, you may find that all that glitters is not gold.

For example, you might want an author box that lifts your writers above the ground with cheerful thoughts and links to their social profiles, and discover that, while you love your theme with a love that shall not die, you can’t customize its bio boxes to your heart’s content.

So, do your current author boxes perform as well as they could? Or are they a tragedy of Shakespearean proportions? If you’re looking to liven up your author profiles, then one of the plugins below may just do the trick.

So, without further ado…

  • 1. Simple Author Box

    Simple Author Box may have started out as a way to create simple and beautiful minimalistic design for author bio boxes without having to break into the code, but since being taken over by WebFactory Ltd, the plugin now offers a huge range of customization options for your author bio box.

    Simple Author Box Settings screen.
    Simple Author Box settings screen.

    This plugin gives you the ability to easily customize everything about your bio box. The range of settings and options is quite impressive.

    For starters, you can edit your author bio directly from the plugin’s settings screen, add/edit social media icons, and even set up a custom gravatar.

    Tabbed sections offer everything from toggle settings that let you do things like display a bio box anywhere on your site using a shortcode or code snippet, show author email address, or hide various elements and features, to customizing its appearance, changing different colors of elements like author name, borders, backgrounds, etc., and then make it stand out from the rest of your site’s content using unique typography styles.

    You can also preview changes to your bio box in real-time while you play with the settings.

    Simple Author Box Live Preview Feature
    Extemporize your inner bard with Simple Author Box’s settings and live preview feature.

    Beware when tapping into the suite power of this plugin’s sweet customizable options. Deceive not thy sweet self into thinking that having complete control of your bio box designs will make thee a cutting-edge bio box designer.

    Simple Author Box plugin bio box example.
    “Could beauty have better commerce than with honesty?” Create eye-catching bio boxes with Simple Author Box plugin.

    The free version of Simple Author Box incorporates mobile responsiveness, a Gutenberg block, and is fully customizable to match your existing theme design.

    Upgrade to Pro for advanced features like changing author box position in the content, linking the author’s name to their website or page, adding author avatar hover effects and changing image position, social icons settings, color palette and font and font sizes for additional elements, as well as enabling guest authors and co-authors, and adding widgets to your site.

    Interested in 1. Simple Author Box?

    Details

  • 2. Branda

    If you’re looking to add feature-rich author boxes that blend in perfectly with your website or blog, try our WordPress white labeling plugin Branda.

    Branda is our full white label solution for WordPress, so it lets you customize your site’s front-end and back-end, including author boxes.

    Branda author box settings screen.
    Branda’s author box settings screen is found in the Front-End section of the plugin’s customization settings menu.

    Branda takes care of every aspect of your author box design from configuring design options, visibility, and elements of the author box, to customizing author and social media profiles, colors, avatars, etc. You can also use custom CSS.

    Branda Author Box example.
    “This brand[a] she quenched in a cool well…” to thine own site be true.
    Branda is the only premium and 100% free white label plugin for WordPress. So, if you’re looking to customize a whole lot more than just author boxes on your site, with Branda, all the world’s your stage.

  • 3. WP Post Author

    WP Post Author by AF Themes is another great plugin you can use to add an author bio box with custom settings to your WordPress site.

    The plugin offers a widget and shortcode designed to be used in WordPress single post author and author pages, and custom styling can be added through a CSS box.

    WP Post Author Settings screen.
    WP Post Author bio box plugin settings screen.

    Although this plugin may have fewer customization options than the previous plugin, it still offers an impressive range of useful options and settings for tweaking your site’s author bio boxes styling.

    WP Post Author Bio Box Example.
    WP Post Author bio box example. Simple, plain bio box, I do love thee so!

    Interested in 3. WP Post Author?

    Details

  • 4. Author Bio Box

    If all you need is a simple plugin that will make your site’s author bio boxes stand out from the content, the Author Bio Box plugin offers a one-page settings screen with colorful design and border styling options.

    Author Bio Box Settings screen.
    Author Bio Box plugin settings screen.

    The plugin also gives you the choice of displaying author bio boxes only in posts, the home page and posts, or none.

    Author Bio Box example
    There are no tricks in this plain and simple Author Bio Box.

    Interested in 4. Author Bio Box?

    Details

  • 5. Starbox

    Starbox offers a fairly functional free version, with various toggle and dropdown options, plus customizable fields for adding author information.

    Starbox Settings screen.
    Starbox author box plugin settings screen.

    Fields are limited in the free version, but you have complete control and many more options to choose from when you buy the Starbox PRO premium version of the plugin.

    The free Starbox plugin aims to make it as easy as possible to add attractive author boxes to your website. Activating the plugin adds additional fields to the default WordPress user profile page allowing your users to enter links to their Facebook and Twitter social media profiles, submit their job title, company name, company URL, as well as the default biographical info.

    The plugin’s settings let you choose whether to activate the author boxes on posts and/or pages, display the box before, after, or before and after the post content, and more. The free version provides six themes for styling the author boxes on your site. Depending on your chosen theme, the author box may include a latest posts tab. You can also quickly change the size of the text used to display the name and author bio, independently from each other. A handy preview panel lets you see how your choices will display in real-time.

    Starbox Author Bio Box Example.
    “It is not in the stars to hold our destiny” but Starbox can definitely help authors become masters of their own fate.

    While most author box plugins rely on Gravatar to display your profile picture, Starbox also gives you the option of uploading an image directly to your user profile page. Through the individual user profile pages, users can choose from one of the available themes, and set the author box position themselves.

    Author boxes can also be manually inserted directly into posts, pages, and the sidebar areas of your website by using the included shortcodes. This makes it easy to add multiple author boxes to a single post or page.

    This author box plugin is packed with useful features, making it a popular and highly recommended choice. The premium version of Starbox gives you the ability to add links to more social media websites and also offers a number of themes to choose from, incorporating HTML5. However, the free version is more than capable of displaying professional author bio boxes on your WordPress website.

  • 6. About Author

    With the About Author author bio box plugin, you must first create a shortcode that includes your choice of template style and the information you want to include in your template, and then you configure your author settings and select the template you have created.

    About Author Settings screen
    About Author plugin settings screen.

    This can feel a little confusing at first, but it gives you the option of configuring and using multiple post author templates throughout your site, including posts, pages, sidebars, etc.

    About Author author box plugin example.
    “Let me be that I am and seek not to alter me.” But you can alter this bio box using shortcodes and templates.

    With the free version, you can create functional author bio boxes with customizable font, color, and social media options but you are limited to two template styles, two profile image layouts, and a few other restrictions. The Pro version gives you 10 design author templates, more profile image layouts, more social media settings, profile header backgrounds, multiple author options for images, widgets, and shortcodes, responsive design, and more.

    Interested in 6. About Author?

    Details

  • 7. Molongui Authorship

    The plugin developers claim that Molongui Authorship “provides you all the missing features you might need to properly manage and credit all the contributors to your site.”

    This may not be an exaggerated claim. This comprehensive and feature-rich author box plugin is suitable for all types of WordPress sites, especially sites featuring multi-authors, co-authors, and guest authors.

    The plugin’s settings screen has a number of tabs for configuring and customizing a wide range of options from layouts, templates, typography, avatars, and social media icons, to SEO metadata, byline modifiers, conditional logic, shortcodes, and more. It also integrates with the WordPress Theme Customizer.

    Molongui Authorship plugin settings screen.
    Molongui Authorship plugin settings screen.

    Choose the free version of the plugin if you just want to display an enhanced author box on your site. If your strategy depends on attracting content authors or promoting multi-authoring, guest authoring, or co-authoring on your site, then the premium version unlocks a range of additional elements and advanced customization features (like shortcodes and the ability to make links ‘nofollow’) that will let you dive deep under the hood to tinker, tweak, and finetune your author bio box settings to your heart’s content.

    Molongui Authorship plugin bio box example.
    “O Romeo, wherefore art thou?” Maybe try searching in the house of Molongui.

    The premium version also includes export/import settings tools, REST API, and access to premium support (in case you run into a tragedy).

    Interested in 7. Molongui Authorship?

    Details

  • 8. Co-Authors Plus

    Co-Authors Plus is another plugin you can install if you collaborate with multiple authors on the same post and need an easy way to give all authors credit.

    Co-Authors Plus isn’t an ‘author bio box’ plugin in the sense that it helps you define the design and structure of author bio elements. Instead, this plugin makes it simple to credit more than one person for the creation of an article. As such, this plugin is great if you plan to publish articles with two or more authors and want to give both equal credit for their contributions.

    Co-authors plus lets you add multiple authors to posts.
    Need to add multiple authors to your posts? Co-authors plus lets a wavering multitude play upon it.

    The plugin upgrades the core authors meta box, which is displayed on the edit post and page screens. This lets you search for existing users on your blog and then add them as a co-author for the post or page you are working on. You can drag and drop the authors that have been added to a post in order to change the order their bio boxes are displayed in when your post is published.

    When you assign a co-author to a post or page, they can then edit that page according to their WordPress user role settings.

    Another interesting feature of this plugin is the ability to add bylines without having to create a user account for each author. This makes it easy to create guest author accounts, allows you to credit guest posters by giving them a byline, and eliminates the need to create an actual user account for one-time authors who submit content for your WordPress site or blog.

    Note: To display multiple bio boxes on a single post, you will need to manually add some code to your theme’s templates files, so bear this in mind before downloading and installing this plugin. If you don’t mind messing with code, there is helpful documentation on the plugin’s site to help you achieve this without drama.

    Also, if you are using the Genesis theme framework on your website, then you will want to install the Genesis Co-Authors Plus plugin. This free tool works alongside this plugin, enabling support for multiple author boxes on a single post.

    Interested in 8. Co-Authors Plus?

    Details

  • 9. Meks Smart Author Widget

    Meks Smart Author Widget lets you display your author/user profile info inside a WordPress widget.

    Meks Smart Author Widget settings.
    Meks Smart Author Widget settings.

    The widget provides a range of flexible display options, including custom avatar size, linking avatar image and user display name to author archive page (you can also override the author link URL and link to any page or URL you like), and a smart feature that can auto-detect and display the current post author on single post and author templates.

    Meks Author Widget displaying on sidebar.
    “Sit by my side, and let the world slip…” Display thy author info on the sidebar[d].

    Note: This plugin provides only an author box widget. To display the author info on a widgetized area of your site (e.g. your sidebar) and within your posts/pages, we recommend installing both this plugin and one of the other plugins listed in this post.

    Interested in 9. Meks Smart Author Widget?

    Details

Hiding the Original Author Box

Many themes already include an author box, and if this is your case, then you will probably find that the plugins above add a second author box to your pages.

This was the case when I tried creating this post using the WordPress Twenty Twenty theme.

Twenty-twenty theme with duplicated author boxes.
Yiikes… the Twenty Twenty theme creates double, double toil and trouble!

So, I used a theme called Newsphere instead from AF Themes to create this tutorial.

Newsphere Theme for WordPress by AF Themes
One author box only … now, Newsphere is the winner of dis content!

Of course, you don’t want two author boxes displaying throughout your site, so in order to remove the original author box, you will need to dig into your code a little.

As always, if you’re making changes to your theme, it’s better to use a child theme.

In order to remove the default author box for your theme, you will need to find out where the code is located. Most often author boxes will show up on your single post pages, and so you will want to check your single.php file and search around for the code that pulls in your author box.

In many themes, however, the single.php pulls in other files, and the code you need will be in one of those other files.

For example, when searching for themes that I could use for testing, I looked at the WordPress Twenty Twenty theme. I didn’t find information about my author box, but I found that the singular.php file (normally single.php in most themes) pulls in a file called content, which looked like what I wanted.

Twenty Twenty: Singular Template (singular.php)
“O single.php-soled jest, solely singular.php for the singleness.”

I then went to the content.php file and tracked down the code that was displaying my author box.

Depending on the theme, this could be just a little bit or a lot of code. With the Twenty Twenty theme, it was just a little bit of code.

Twenty Twenty: content.php template file
“Out, damned spot! Out, I say!”

I could simply delete that code. (Again, remember that using a child theme is best. You could just copy the original content.php file into your child theme and then delete the part you need to delete.)

Here’s the code I would want to delete in the Twenty Twelve theme.

Author bio code in content.php file
“You can take him and cut him out”…
Instead of deleting the code, however, another way to do it is to simply comment out that portion of the code. You can do this as follows:

<?php
/*

…code…

*/
?>

Here’s an example:

Section of commented out code from content.php template.
This better work…I’m all commented out!

This worked. Now, the Twenty Twenty theme displays just one author bio box … the one we have added via the plugin.

Twenty Twenty theme with a single author bio box displayed.
Twenty Twenty theme now displays only one author bio box. All’s well that ends well.

And that’s it. If you’d like to spice up your author profiles, methinks one of the above plugins should work out for you – making your bios stand out a little more and hooking these up to the authors’ social profiles at the same time. Try them. You may love all, trust a few, and do wrong to none.

Posted on

Where Gutenberg Went Wrong: Theme Developer Edition

Screenshot of the block-based themes in the WordPress theme directory.
Themes with block editor styles on WordPress.org.

With full-site editing just around the bend, it is a fair question to ask whether the WordPress ecosystem is prepared for such a transition, particularly on the theme development side of things.

It is no secret that theme developers have struggled to keep up with the barrage of changes between Gutenberg plugin updates and, ultimately, major WordPress versions. It is also a fair question to ask who is steering the ship. Where are the site developers, theme authors, and other designers who spend every day crafting the front end of the web? Where are the forward-thinking solutions that make sure the project maintains backward compatibility?

There have been some efforts to mend the broken divide between the Gutenberg project and theme developers such as the fortnightly block-based themes meetings. However, those meetings, by and large, are general updates on things the Gutenberg team has already developed or will ship soon. Those meetings are a good stepping stone toward better communication, but the project needs a project planner with both the vision of the future landscape and a sense of the day-to-day issues that theme authors contend with.

The reality is that there are only 132 themes out of 7,455 that list block editor styles as a feature in the official repository. We are a year and a half into the lifespan of the block editor officially merging into WordPress, yet the face of the platform is made up mostly of themes that have shoehorned some basic block styles into mediocre designs. The themes that truly stand out with full block-editor support are few and far between. Many of those are also bidding heavily on Elementor or other page builders.

Whether you like the block editor is of little consequence when there is no buy-in from theme authors. Every week, I check the theme directory for new themes, hoping to find a hidden gem. Every week, I am disappointed to see new themes dropping in 2020 with no support for the block editor. There is an entire segment of users who might enjoy the editor if only they had something more than Twenty Twenty to play around with — it is a fine theme but is not everyone’s cup of tea.

Screenshot of ThemeForest's block-based themes.
ThemeForest’s listing of block-styled themes.

ThemeForest sellers are besting free WordPress.org theme authors 18 to 1 in terms of support with over 2,300 themes listed as Gutenberg-optimized. Granted, themes from the massive marketplace are known to have every feature they can in an attempt to one-up the competition. Also, many of them either have built-in page builders or support third-party solutions.

Still, for the flagship feature of the platform, end-users should expect something more from the official theme directory. A third-party marketplace should not be the only game in town. At the moment, much of the offerings on WordPress.org feel lackluster at best. The handful that go the extra mile, such as the Rosa 2 and Go themes, have mature businesses funding the effort.

There is some broken trust between theme authors and WordPress at the moment. Some shout it loudly (as folks can attest from WP Tavern comments section). Others are more quietly trying to figure all this out.

Even Carolina Nymark, one of the representatives for the official Themes Team, shared some concern. “How do all of you theme authors keep up with the changes to Gutenberg?” she asked in a tweet. When the team leads are not up to speed, it is not good for the project as a whole.

“I don’t,” replied Anders Norén, the primary developer behind Twenty Twenty, to Nymark’s question. “I wait until something breaks (in the beta releases) and try to fix it then. Trying to support changes in the Gutenberg plugin while maintaining support for the block editor in Core is bad for your health.”

There is a major concern from theme authors about the future. It is hard to get excited about the current possibilities when there is uncertainty over what theme development will look like in 12 months. There is no clear and detailed roadmap about how things will work, and many theme designers feel like they are playing catchup from week to week. Instead, they should be able to more clearly look ahead and push early ideas into play.

My ultimate fear is that the Themes Team will one day flip the switch and require all themes going into the directory to support the block editor like it had to do with the customizer in 2015. If theme authors do not organically make the transition such a day may come. The team will be stuck as the bad guys in the middle.

Where Do We Go from Here?

It is easy to identify some of the major pain points for theme authors. Changes between updates will inevitably break something with the theme design.

Breaking HTML changes.

Breaking CSS changes.

Missing class names.

Different methods of handling alignment, depending on the block.

Dealing with inline styles after years of being taught to avoid them.

All of these issues are roadblocks for theme authors. And, when things get in the way of theme authors doing their jobs, they trickle down to end-users.

This is not the WordPress of the last decade. The WordPress that promised to not break things with updates. The WordPress where a one-off theme by a non-professional designer still worked four months later.

The Gutenberg project is still in its infancy. It can be fun to play with, but it can also be messy. I am as much of an evangelist for the block editor as anyone, but I can recognize when there is a clear and present issue of trust between theme authors and the developers of the project.

Currently, theme authors who are attempting to cover all of their bases are designing for at least a couple of versions of WordPress, multiple versions of Gutenberg, and the classic editor plugin. It is a dizzying array of testing for one theme. Those with a dozen or more themes…well, it is not an ideal situation.

A holistic approach needs to be taken toward theme and site design. Theme authors need to see the details of the roadmap and contribute to it, carving the features they see as relevant into stone for the coming years. They need to know that the buttons block design they sweated over for hours this past week will continue working next week.

It all starts at the project management level.

If a breaking HTML change needs to happen, theme authors need more than, “X change needs to happen for Y feature to work.” They need to see ownership of the mistake in the initial planning phase for X, backward-compatible code solutions, and a path toward fewer of the same mistakes happening.

Theme designers still need some sort of design framework. The current utility classes are like a poor man’s version of Tailwind that is being pieced together as the project adds new features without the foresight to look at the future landscape. Maybe the upcoming Global Styles feature can tackle that on a larger scale that provides compatibility across themes.

Ultimately, there needs to be more communication between the Gutenberg team and theme authors who are building themes for the official WordPress theme directory. Perhaps there should even be a new team or sub-team formed focused solely on theming in the block era and working directly with Gutenberg developers to identify pain points. Whatever happens, someone needs to inspire the next generation of themes into being. Until then, most theme authors are stuck wondering what they will need to fix next.

Up next: block/plugin development edition?

Posted on

Get Involved With Block-Based WordPress Theme Experiments

As the WordPress theme review team wound down their team meeting yesterday, they were finalizing what their focus area for 2020 would be. The general agreement among members was that block-based themes should be at the top of the list. There was some pushback from a minority that did not want to see block-based themes at all. The reality is that themes will be changing in the next year or two.

As a team, this is the group of people who will ultimately need to set guidelines based on something WordPress has never done before. They will also need to work diligently to bring theme authors up to speed on how themes of the future will be built.

At this point, there are many unknowns, but work on tickets for full-site editing is happening at a quick pace.

Allan Cole, Theme Imagineer at Automattic, later invited team members to get involved with the Theme Experiments project on GitHub. It is a way for developers in the WordPress community to help steer the theme-development ship. Currently, the repository is fairly bare-bones and represents only the early work toward creating themes from blocks. Each sub-directory in the repository will be an individual experiment that explores creating themes using blocks or block templates.

The initial documentation for block-based themes was introduced in early December 2019. Since then, a handful of contributors have put together some working theme examples to get the ball rolling.

The repository is open to contributions from anyone. This would be a good moment for members of the larger theme development community to start sending in pull requests to share their experiments.

To test any of the experiments in this repository, you need to be running the latest version of the Gutenberg plugin. You must also enable the “Full Site Editing” and “Full Site Editing Demo Templates” options from within the plugin’s “Experiments” screen.

Parisienne Theme

Screenshot of the Parisienne theme built from blocks.
Screenshot of the Parisienne theme.

Currently, the only approved theme experiment is the Parisienne theme. It’s a test of how block templates and template parts work. A live demo of the theme is available.

Don’t expect to be blown away. There are many missing pieces in the Gutenberg plugin, such as blocks for displaying posts and similar items. The idea is to explore how templating will work and provide feedback to the Gutenberg development team.

One major concern I have at this point is the flat nature of the two sub-directories for housing templates and template parts. With the seven template part files in this theme, I worry that we are not learning from the mistakes of the past. The sub-folders could become unruly, particularly /template-parts, and house dozens upon dozens of files in a real-world scenario. This is no different from how themes currently work other than the location of the template files. Now would be a good time to reimagine the folder structure and optimize the organization of theme templates. For example, group sidebar templates under a /template-parts/sidebar folder instead of dumping everything into one location.

Twenty Nineteen and Twenty Twenty

Screenshot of the Twenty Nineteen Blocks experimental theme.
Early look at a block-based Twenty Nineteen theme.

The repository has two open pull requests for experimenting with blocked-based versions of the Twenty Nineteen and Twenty Twenty default themes. Of the two, the Twenty Nineteen Blocks theme seemed the least broken, despite the original not being designed specifically for the block editor.

Porting the most recent default WordPress themes is important because it provides theme authors a way to compare how old methods of handling features will work in the new block system.

Posted on

WordPress 5.3 Beta, Twenty Twenty Default Theme, Google Native Lazy Loading 🗞️ October 2019 WordPress News w/ CodeinWP

In WordPress, things keep moving at a slow but steady pace. In September, WordPress 5.3 receives a new beta, the Twenty Twenty theme is almost ready, Google releases a native lazy loading plugin for WordPress, a Jetpack-like plugin arises, while the Gutenberg team shares a full-site editing prototype. But that’s just a small taste of all the topics we covered in this October 2019 WordPress news roundup.
Posted on

Twenty Twenty Bundled in Core, Beta Features Overview

Screenshot of a blog post using a paragraph, gallery, and pullquote block in the editor when using the Twenty Twenty WordPress theme.

Twenty Twenty, the upcoming default WordPress theme, was committed to core and shipped with WordPress 5.3 Beta 1 yesterday.

Like most core themes, Twenty Twenty is simple in function. It comes packaged with a handful of custom features and options, but it remains true to the mission of being an easy-to-use default theme.

The theme has personality. Its headings are bold and opinionated. Its pull quotes grab your attention. It’s unafraid of making a splash with its design. This is a blog theme that’s meant to showcase what the block editor is capable of doing. It is a refreshing change of pace from the current slew of themes landing in the directory.

Twenty Twenty is not ideal for every use case. Some users will no doubt dislike the design choices. Others will love everything about it.

Note: Twenty Twenty is still in beta, so its features could change between now and the official release of WordPress 5.3.

Customizer Options

Screenshot of the Colors section in the customizer when using the Twenty Twenty theme.
Hue-only picker for the accent color in the customizer.

The theme has a few custom options available within the customizer:

  • A retina logo option, which scales the logo image to half its size to make it sharper on hi-res screens.
  • An option for showing or hiding a search icon in the header.
  • A choice between showing the full post text or summary (excerpt) on archive pages.
  • A header and footer background color.
  • An accent color used for links and other elements.
  • Support for the core custom background feature.

The accent color option is an interesting choice. Rather than providing the full breadth of all colors, the theme includes a hue-only color picker. This feature allows users to select from a more limited set of colors within an accessible color range.

There is also a ticket for removing core custom background image support to help users avoid accessibility issues.

Custom Page Templates

Screenshot of the cover template and options in the customizer for the Twenty Twenty theme.
Cover template options in the customizer.

Twenty Twenty has a fresh take on creating a cover page not seen in previous default themes. The “Cover Template” works for both posts and pages. When selecting it, the template displays the post featured image similar to the cover block in core. The featured image spans the full width of the screen and extends behind the header and navigation area. The post title and byline/meta are set over the image.

The theme provides a few options for customizing the output of the cover area and allows the user to:

  • Set a fixed background for a parallax effect.
  • Add an overlay background color that sits over the featured image.
  • Change the color of the text on top of the image.
  • Choose a blend mode for the overlay background color.
  • Alter the overlay background color opacity.

Having a core theme explore this feature is a nice. Ideally, users would be able to create a featured cover area on a per-post basis and adjust the colors for the specific image on that post. However, core has yet to bundle such a feature with the block editor. There is an open Gutenberg ticket for expanding the editor outside of the post content that may help theme authors address this common feature, but we’re likely several releases from seeing that become a reality.

The theme also includes a wide (full width) template, which is a fairly common feature. At the moment, this template doesn’t seem to do anything in particular when assigned to a page. There’s an open GitHub ticket that addresses what it should do at some point. Considering that the theme has no left/right sidebar, it’d be interesting to see how this template functions.

Page Loading Speed

Page load is something to keep an eye on. Twenty Twenty currently ships a 100 kb stylesheet on top of the block editor’s 40 kb CSS file (from the Gutenberg plugin). This number doesn’t include the font and JavaScript files also loaded for the page. This is a far cry from the behemoth 223 kb stylesheet included in Twenty Nineteen, but it’s still concerning because more development time means that more code will likely get added as tweaks are made and bugs are fixed.

To be fair, the block editor has many elements to style with no unified design framework for theme authors to take advantage of. Keeping a Gutenberg-ready stylesheet under 100 kb that also styles each block is a feat of engineering few can master.

Follow Twenty Twenty Development

Theme development is currently happening on the Twenty Twenty GitHub repository. If you want to track its changes as the theme is imported into core, the changes are happening on the Import Twenty Twenty Trac ticket.

The theme still has work to be done before it’s ready for public release. Now would be a great time to start testing it and reporting issues.

Posted on

First Look at Twenty Twenty: New WordPress Default Theme based on Chaplin

Anders Norén unveiled the designs for the new Twenty Twenty theme today. As speculated earlier this week, WordPress will repurpose Noren’s Chaplin theme in order to expedite shipping the new default theme on the constrained 5.3 release timeline.

Although the new default theme will be based on Chaplin, it will not retain the same style.

“Using an existing theme as a base will help us get going on development faster,” Norén said. “Very little of the style of Chaplin will remain though, so it will still look and feel very much like its own thing.”

The screenshots he shared in the announcement look like a completely different theme. With just a few color and typography changes, along with a centered column for content, Twenty Twenty has its own distinct character.

Norén said he designed it to be a flexible, all-purpose theme suitable for businesses, organizations, and blogs, depending on the combination of blocks.

“The promise of the block editor is to give users the freedom to design and structure their sites as they see fit,” he said in the post introducing Twenty Twenty. “The responsibility of a theme is to empower users to create their inspired vision by making the end result look as good, and work as well, as the user intended.”

The theme uses Inter for the typeface, selected for its legibility and bold personality when used in headings. It also comes in a Variable Font version, which Norén said will be a first for WordPress default themes. The benefits are that it reduces the number of requests and decreases the page size.

Those who are adventurous can download Twenty Twenty right now from GitHub and play around with the theme in its current state. Once it is stable, Norén and his team plan to merge it into core and continue development on Trac. There will be weekly meetings held in the #core-themes Slack channel for those who want to contribute to the design and development. The first one is scheduled for Monday, September 9, 2019, 02:00 PM CDT.

Posted on

Anders Norén to Design Twenty Twenty Default Theme, Shipping in WordPress 5.3

WordPress 5.3’s release lead coordinators announced a new batch of focus leads during yesterday’s core dev chat.

Anders Norén, one of the most well-respected theme authors in the community and an early adopter of Gutenberg, will be leading the design of the upcoming Twenty Twenty default theme. He is working alongside team Theme Wrangler Ian Belanger, a developer who is currently sponsored by Bluehost as a core contributor. Carolina Nymark is also collaborating as a rep from the Theme Review team.

Reactions to the news were overwhelmingly positive. I have never seen the WordPress community more excited about a default theme. Those who have followed Norén’s work for a long time are hopeful that Twenty Twenty will be a theme they can actually use to build websites.

Will WordPress Repurpose the Chaplin Theme for Twenty Twenty or Start from Scratch?

Norén has released 20 free themes on WordPress.org with 2.85 million downloads and a cumulative rating of 4.98 out of 5 stars. Chaplin, his most recent release, is a beautiful example of the possibilities that the block editor opens up for users who want to design their own sites without having to search through dozens of panels of Customizer options. It provides the bones for an agency or business style theme but the block editor enables users to create advanced page layouts that would suit many different types of websites.

Chaplin would make a good candidate for WordPress’ next default theme, since it showcases the block editor as the main vehicle for editing the home page layout. Users can easily create unique customizations with different combinations of blocks that won’t look just like every other site using the same default theme.

Norén would not confirm whether WordPress will be re-purposing Chaplin for Twenty Twenty or if he will be starting from scratch, as the team is not ready to make the announcement yet. WordPress 5.3 is expected November 12, so the timeline may be somewhat constrained for creating an entirely new theme, but it’s not entirely outside the range of possibility.

“This is probably (yes, most definitely) the best thing that’s going to happen for WP + Gutenberg adoption since the 5.0 release,” Matt Medeiros commented on the news about Norén designing Twenty Twenty. “His Chaplin theme has been a joy to use and provoked me to embrace using Gutenberg with his theme.

“Right now, Gutenberg feels like an early version of iOS stuffed into a Blackberry Bold when you don’t get the right theme. I hope he can give us something as enjoyable as Chaplin.”

With WordPress 5.3 beta 1 expected September 23, an announcement with more details regarding Twenty Twenty’s design and scope should be available soon.