The Gutenberg-Ready Twenty Nineteen WordPress Theme

Since 2011, almost every year, the WordPress team have released a new theme.

However, the team didn’t release a theme for 2018 because there were no major WordPress releases.

This year, we’re back on track and there’s a new default theme, called “Twenty Nineteen”. This new theme is needed to take full advantage of this flexibility offered by Gutenberg.

Twenty Nineteen offers significant creative freedom. However, it’s almost a blank slate to begin with, and that can be a little daunting.

If you are starting a new site from scratch and have just installed WordPress 5, your front page will look very plain with Twenty Nineteen activated:

Take a look at that image above and then take a look at this publicity image below from WordPres. After comparing the two, you may think there’s a lot of work to do!

---

How to Set Up the Twenty Nineteen Theme

I’m going to guide you through the theme set up:

• From the dashboard go to Appearance on the left-hand menu.
• Select Customise. Here are the initial settings for your theme.
• Click Site Identity to start the process.

• Here give your site a name, a tagline, and add a logo.
• You may choose to omit the tagline, but it is useful for search engine indexing and social media sharing. The site icon is a useful identifier on browser tabs and bookmarks.
• The logo is round so when you upload an image you will need to crop it into a square. This can be difficult if your logo has a horizontal or vertical shape.

• You can click on any of the blue pencil icons on the preview screens to edit invidual parts of the screen.
• Make sure to click Publish at the top of the left-hand sidebar to save any changes.
• To change the color scheme, select the Colors tab and then click on Custom.
• Use the slider to choose a color, using the Preview pane to see the changes.

• To add a menu, select the next tab Menus.
• Click on Create New Menu.
• Menus appear in three different locations:
  • Primary menu – below the site name and tagline
  • Social – below the primary menu
  • Footer – at the bottom of the page.
• Create a menu from this customization panel. Give your menu a name, select your location and click Next.

When creating a social menu, if you use the custom links option, WordPress will recognize the URL and give it the correct icon. For example, if you have a link that includes facebook.com, WordPress will automatically add the Facebook icon.

• Add widgets or remove the default ones from the Widgets tab.

On the Homepage settings tab, you choose whether your homepage will show your most recent posts or a static page.

Leaving the customisation section behind, you can now to make the front page look good by using one of Gutenberg’s fabulous image blocks.

• Create your first post
• Use the Cover block to create a visual impact at the top of your homepage.

• Using this block, drag an image or video into place, or select one from your Media Library.
• Use the right-hand menu to make the image a fixed background for an interesting scrolling effect, and choose an overlay color to suit your theme.

• Above the block, there is a toolbar that lets you decide the spacing of the image and alignment of the text. Here I have chosen full width with centered text.
• Below the image, create a text block and use a drop cap for visual appeal. You can also have a gallery block to give the page a bit of pizazz. See this blog on image blocks for more details on how to do that.

The “Twenty Nineteen” pages are fully responsive so look great on mobile devices too.

This page still has the headline and author information showing. On the official theme information page, the headline is still in place, but many publicity images for the theme show it without a headline.

If you decide you want to get rid of the header section on the homepage, this will need a little CSS.

• Go back to Customise and in Additional CSS pane add this:

---

Conclusion

The “Twenty Nineteen” theme has plenty of interesting features and can quickly make your site look pretty good. These features include the fixed background image, drop caps, color overlays and easy galleries.

There are some downsides to Twenty Nineteen, such as the circular logo and the lack of an option of a sidebar.

{snippet gutenbergvideo}