Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Themes
Code

Twenty Nineteen Teardown: Using the New WordPress Default Theme

by
Difficulty:BeginnerLength:LongLanguages:

Twenty Nineteen is the latest WordPress default theme currently available and was included with the WordPress 5.0 release. It's already proving pretty popular, with over 800,000 active installations to date.

Twenty Nineteen Theme

It's also available to WordPress.com users too, which bumps up the user base even more. It's described as a minimal and non-generic theme with simple but sophisticated typography, and it supports multiple languages including:

  • Arabic
  • Chinese
  • Greek
  • Hebrew
  • Japanese
  • Korean
  • Thai

The design is pitched to appeal to a variety of different types of sites such as a photo blog, small business, non-profit, or typography-driven blog.

I personally like the design and am sure it will continue to do well. It feels light and accessible, is pleasing to the eye, and benefits from a very clean and elegant look.

However, the minimalist design may polarize some users who are looking for more of a design statement from a default WordPress theme. It's still early days, though, and I'm sure as more resources become available to help users customize Twenty Nineteen, this will help with further positive adoption.

However, if you think you need it heavily customized then it might be less work to start with an alternative theme instead. I can see this theme being very popular on text-heavy sites (i.e. blogs) though. The typography, spacing, and minimalist design seem to suit that type of site very well.

For Theme Developers

If you develop WordPress themes then you'll probably be interested in the features included with Twenty Nineteen—and, in particular, how it works with the new editor (code-named Gutenberg) included with WordPress 5.0.

Twenty Nineteen has been carefully designed to work seamlessly with the new editor and serves as a demonstration of how to properly integrate with it. If you choose not to support this new way of creating page content with blocks in your theme then it will have very limited appeal going forward. Maybe not so much in the short term, but I anticipate users will quickly grow to expect tight editor integration as a minimum requirement for themes.

The editing experience is very slick and matches the admin view to the front-end view as closely as possible. Every core block included with WordPress 5.0 has custom styles applied to match the theme. And it does a pretty good job of this.

It's usually beneficial to keep themes in a regular development cycle to keep them up to date with the latest features and best practices expected in a modern theme. With this in mind, Twenty Nineteen theme is a good benchmark to compare your theme against.

If you're familiar with the popular _s WordPress starter theme then you'll have a head start as Twenty Nineteen is partially based on this and another theme: the Gutenberg starter theme.

Features at a Glance

Let's now take a look at some of the standout features of Twenty Nineteen. But before we do, it's worth mentioning that the theme version we're using for this article is v1.2. If you're using a later version then it's possible some of the theme features may have changed in the meantime.

Perhaps the most immediately noticeable aspect of Twenty Nineteen is the lack of sidebar support. By default, you're restricted to a single-column layout on all pages. So if you're looking to use multi-column layouts out of the box, you're going to be disappointed.

There is a footer widget area located below the site content. Some might say this is technically a sidebar, but it can't be used to display a sidebar in the traditional column layout sense—unless you employ some custom CSS wizardry, of course!

Footer widget area

Featured images can be added to posts and pages and are recommended to have dimensions of 2000 x 1200 pixels for best results. There's even a theme option in the customizer to tint the color of all featured images.

Featured image

You can enable tinting via the customizer. Just open up it and click on the Colors menu. Then check the box labeled Apply a filter to featured images using the primary color.

Apply tinting to featured image

Whatever image is set as the featured image will display at 100vh on page load. This unit specifies the percentage of the viewport height inside the browser window.

It's useful as no matter what device you're using, or whatever the height of the browser window currently is, specifying 100vh will always result in the height of the browser viewport (i.e. the visible area of the browser window).

The same customizer settings screen can also be used to set a custom theme accent color via a new slider color picker control. This looks great, and the control feels pretty slick when dragging the slider handle to update colors in real time.

Theme color settings

However, if you want to set a specific color value then there's no obvious way to do that, which is a bit perplexing. You gain slightly more precise control by using the left and right arrow cursor keys to nudge the slider value, but the step value of the slider isn't enough to cover every possible color value. It would have made more sense to also show a text input control to allow exact color values to be entered.

Another feature Twenty Nineteen supports is a site logo, which can also be configured via the customizer. Clicking on Site Identity and then Select Logo displays the WordPress media dialog box. Simply upload an image or select an existing one from the media library as your new logo. It will then be inserted in the customizer panel and in the preview window.

Adding site logo

It doesn't matter too much about the size of the image used for the logo, but I'd recommend using one with matching dimensions for the width and height. You do, however, have the option to crop the image before it's inserted into the customizer if the image aspect ratio isn't close to 1:1.

You might find the logo feature a bit limiting, though, as it only renders a small rounded logo to the left of the site title and tagline. A dark circle is also rendered around the logo image when hovered over.

If you want a more rectangular logo that requires flexibility in the positioning and size, then you'll need to apply custom styles. A filter would also need to be applied to change the default square dimensions to match your logo.

As for navigation menus, Twenty Nineteen registers three separate locations that you can display individual menu items in:

  • Primary
  • Footer Menu
  • Social Links Menu

The Primary and Footer Menu menu locations are standard menus, and you add menu items in the usual way. The Primary menu also supports sub-menu items, but the Footer Menu does not by default.

Primary menu supports sub menu items

Here you can see the same menu used for the Footer Menu, which only outputs a flat list of links this time.

Footer menu outputs flat list of menu items

The Social Links Menu, on the other hand, expects you to add links to your social media profiles. In the customizer menu editor, add a custom URL for each social media profile you want displayed. If the link matches one of the supported social media sites then it will be replaced in the menu by an icon matching the specified social media domain.

Social links menu

The Social Links Media icon colors are inverted when a featured image is applied to the page.

Social links menu colors when tinting applied to featured image

Supported social media links include:

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
  • YouTube and many more

Editor Support

As mentioned previously, Twenty Nineteen integrates really well with the new WordPress 5 Gutenberg editor. This is done by explicitly declaring which core editor features are supported via the add_theme_support() function. There are several calls to this function in Twenty Nineteen in functions.php, which is located in the root theme folder.

The add_theme_support() calls relevant to block support are:

  • add_theme_support( 'wp-block-styles' )
  • add_theme_support( 'align-wide' )
  • add_theme_support( 'editor-styles' )
  • add_theme_support( 'editor-font-sizes' )
  • add_theme_support( 'editor-color-palette' )

Each of these represents a particular feature of the new editor. Let's take a look at each one in turn.

Block Styles Theme Support

In the editor, all core blocks have default styles applied to make them render well out of the box. However, these default block styles are not applied by default on the front end unless you add this to your theme:

You can, of course, override any of the core default styles as required, but it's a good idea to include support for them so you only have to override the styles you need to, rather than defining everything from scratch.

Align Wide Theme Support

With this feature enabled, you now have two additional alignment options inside the editor: align wide and align full.

New block alignment options

These options aren't available for all blocks, but most blocks support them, including the image block, gallery block, and table block.

It's down to you to implement the actual styles for this feature as WordPress only adds alignwide or alignfull CSS classes to the relevant block wrapper HTML element. Don't worry, though, Twenty Nineteen includes all the necessary styles needed for wide and full-width content, so you don't need to do anything else by default.

Editor Styles Theme Support

This is where the magic happens that does the actual work of matching the post editing experience with the front end. All that's needed is:

Unfortunately, though, it's not quite that simple. You also need to point WordPress to the stylesheet you want to use to override editor styles to match the front-end styles.

Twenty Nineteen uses the style-editor.css file located in the theme root folder to do this.

Editor Font Sizes Theme Support

Certain blocks such as the paragraph block allow you to choose from a preset list of font sizes. This can be customized via add_theme_support( 'editor-font-sizes' ). To do this, an array is passed as the second parameter containing the new font choices.

Twenty Nineteen adds four unique font sizes as follows:

Block font size options

Editor Color Palette Theme Support

The WordPress editor implements a default color palette that is available to style core blocks. And, as you might have guessed, these colors can be customized.

Twenty Nineteen implements its own block color palette as:

This adds five unique colors to the custom color palette: 

  • Primary
  • Secondary
  • Dark Gray
  • Light Gray
  • White
Block color palette options

Tooling

It's pretty common these days for themes and plugins to include some sort of tooling to assist with building and compiling the final source code files. This might include, for example, running JavaScript code through the Babel compiler if you want to use React or ES6+ code in your project. Another common use case is compiling SCSS or LESS code down to CSS.

Other build step examples include:

  • packaging source code into a zip file
  • language translation
  • image optimisation
  • file minification
  • running unit tests
  • deployment

This isn't an exhaustive list. There's so much you can do with post processing and automation, which is why there are many tutorial series dedicated entirely to this subject!

Twenty Nineteen includes custom scripts inside package.json located in the root theme folder to compile the various SCSS files into CSS.

In addition, all the relevant CSS vendor prefixes are added to the final CSS code, and an RTL CSS file is produced from the main style.css file. This is done via RTLCSS, which saves you having to author and maintain separate RTL and LTR style sheets. Just code the LTR as normal, and RTLCSS will automatically create the RTL style sheet version for you. Neat, eh?

It's worth taking a closer look at the scripts included in Twenty Nineteen as it can easily be reused for other themes or even in a child theme.

Style Sheets

Twenty Nineteen uses normalize.css (8.0.0) to define sensible CSS defaults for all leading browsers. In general, there seem to be a significant amount of styles to cover a wide range of scenarios, including full RTL support.

In the root theme folder, you'll find specific styles for:

  • main theme styles (style.css)
  • customizer specific styles (style-editor-customizer.css)
  • admin editor specific styles (style-editor.css)
  • RTL autogenerated styles (style-rtl.css)
  • printing hard copies of Twenty Nineteen webpages (print.css)

Each stylesheet is authored in SCSS and is compiled to CSS via scripts contained in package.json, as previously mentioned.

Various style sheets included with Twenty Nineteen

The Future

Twenty Nineteen is a polished, solid theme as it stands, and it's a great choice to demonstrate the new features of WordPress 5.0. In particular, this is true of the new editor, which is a very pleasant editing experience due to careful styling of the editor blocks that match front-end styles.

The theme is still improving all the time, though, with plenty of changes planned in upcoming versions. Some of the proposed updates include:

  • add a search option in the page header
  • add starter content from the theme demo
  • make the default primary color filterable
  • improvements to the mobile menu on touch-screen devices

These and many more upcoming changes can be found on the WordPress Core Trac page.

And Finally...

Overall, Twenty Nineteen is a great new addition to the collection of default WordPress themes. I've enjoyed using it so far, and I highly recommend checking it out if you haven't already.

Let me know in the comments what you think of the new default theme. Do you plan to use it on any of your production sites? If so, what type(s) of site do you have in mind?

I'll be following up this tutorial soon with a one- or two-part series on extending Twenty Nineteen via a child theme. So if there's anything in particular you'd like to see covered then be sure to let me know in the comments!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.