| WordPress

The New 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:

your front page will look very plain

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!

Compare this with the publicity images from WordPress


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.

Click on 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.

Cropping your logo can be difficult if the logo has a horizontal 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.

You can then use the slider to choose a colour, using the preview panel 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.

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.

WordPress will recognize the url and give it the right icon

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

You can 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.

use the Cover block to create a visual impact at the top of your home page

  • 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.

you can choose an overlay colour 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.

You can also have a gallery block to give the page a bit of pizazz

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:

Go back to Customise and in Additional CSS 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.


The video introduction to Gutenberg

WordPress 5 is here with a brand new editor called Gutenberg that changes the way posts and pages are created and edited. This video is your complete guide to Gutenberg! Thanks to our friends at Glowhost for making this video possible: Save 60% on your first invoice when you host your WordPress site with GlowHost. Click here and use the coupon "WPGUTENBURG".


About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.