5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme

With the release of WordPress version 5 came a brand new default 2019 Theme. The Twenty Nineteen theme features a great design and is lightweight and fast.

I’ve been playing with the Twenty Nineteen Theme today whilst testing the next version of our Shape Divider Block, that is part of our Caxton plugin

They are few things that I wanted to change;

5 customizations for the 2019 WordPress Theme

Time needed: 25 minutes.

Here’s the five customizations that I’ll show you how to do

  1. How to reduce the height of the 2019 Theme Featured image

    By default the 2019 featured image is set to fill the full height of the screen. This looks great, but the downside is that your readers have to scroll to see your content.  I’ll show you how to reduce the height of the feat

  2. How to increase the width and reduce the margin of the 2019 Theme 

    The 2019 Theme page width is narrow – I’ll show you how to fill the right the way across the page.

  3. How to remove margin underneath the Featured image so that the first row using Gutenberg sits flush

    If you use the new Block editor you might want to first row to sit flush under the navigation. Here I will show you how.

  4. How to change the colour overlay of the 2019 Featured image per page

    I’ll show you how to change the overlay color per page

  5. How to change fonts on the 2019 Theme

    I’ll show you how to change the fonts on the 2019 theme

How to reduce the height of the 2019 Theme featured image

By default the 2019 featured image is set to fill the full height of the screen. This looks great, but the downside is that your readers have to scroll to see your content. 

To reduce the height of the 2019 Theme featured image,  we just need a simple bit of CSS. Put this in the WordPress customizer. Click on customize / additional css. Change the value 70vh to whatever you would like, with 100 being full height. 

.site-header.featured-image {
   min-height: 70vh;
 }

The 2019 Featured image (without tweak)

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 1

The 2019 Featured image (after tweak)

That lovely wave effect is created by using our Caxton plugin, Shape Divider Block. 

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 2


How to increase 2019 Theme page width

The 2019 Theme page width is a little bit narrow so I wanted the text to fill the right the way across the page. Luckily this is super easy – we just need to use our Caxton Layout Block . 

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 3

Text now fills the page width

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 4

How to remove the margin underneath the 2019 Theme Featured image

To fully utilise the new Gutenberg Editor that is part of WordPress Version 5, I wanted to remove the margin underneath the 2019 Theme Featured image. 

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 5
By default the 2019 Theme has a margin underneath the Featured Image

The margin looks great when you just want to have text under the featured image, but in my case I wanted to use our Caxton Shape Divider Block to create a nice transition into the page content. So I needed to reduce the margin under the featured image so that the first row sat flush underneath. Luckily all we need is a simple line of CSS. 

.site-header.featured-image {
  margin-bottom: 0rem;
}

And the result is that the first row now sites nicely underneath the 2019 Theme featured image. 

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 6

How to change the colour overlay of the 2019 Theme Featured Image per page

The 2019 Theme lets us add a colour overlay onto our Featured Images.

By default the coloured overlay is applied ‘site-wide’.

I wanted to match the colour overlay of the 2019 Featured Image to the first row in each of my pages. Below shows the result of my customization. See how the colour overlay is different in each page, and matches the colour of the first row on my page. 

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 7

So again a simple bit of CSS is all we need. But we need to add one small step so that we target each page we want to change.  

First we need to grab the id of the page for which we want to change the overlay colour of the Featured Image.  To do this, click on edit page and look in the address bar. You will see a number after ‘post=’.

This is the id of the page. 

In the example below the page id is 2964

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 8

Now we have the id of the page we need to target that page with our css.

So use the following code, replacing the page id with your page id and also changing the background colour to your colour. You could also change the opacity of the overlay here as well. 

.page-id-2964.image-filters-enabled .site-header.featured-image:after {
    background: #e3b1b1;
    opacity: .38;
}

How to change the fonts on the WordPress 2019 Theme

This last one is super easy.

All you have to do is install the free Easy Google Fonts plugin.

You can then change the fonts within the WordPress customizer. Click on customize / typography / default typography. 

5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme 9


Comments

15 responses to “5 tips, tricks and css tweaks to easily customize the WordPress 2019 Theme”

  1. […] Si usáis Twenty Nineteen, el tema por defecto de WordPress desde la versión 5.0, seguro que os gustarán estos cinco trucos para personalizar el tema. […]

  2. Thanks for these great tips. I’m using TwentyNineteen and your great Caxton plugin to do some mods. Do you know how to target the featured image for blog posts (not pages) to change the color of the overlay? You’ve got code above in this post to target pages, but I’d love to have a bit of CSS code change the color overlay of blog post featured images. Thanks!

    1. I figured it out (to target featured images of blog posts and change their color overlay). This works in your CSS / Customizer:

      .page-id-88, .image-filters-enabled .site-header.featured-image .site-featured-image:after {
      background: #e16600;
      opacity: .38;
      }

      …where “88” should be changed to the page ID of your (blog) post. You can change the background color and opacity here as well.

  3. As a typographer, the number one item I needed to change (but could not find any way to do it) is a more feminine font and color for a women’s wellness site. I use Google fonts all the time, but did not realize there’s a super and super simple plugin. Thank you!

    1. Jamie Marsland Avatar
      Jamie Marsland

      thanks Chaz 😉

  4. Fabulous article and plugin. Exactly what I needed.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Thanks Donna, glad to hear it was useful 🙂

  5. As a Newbie, I aam always searching online for articles that caan help me.
    Thank you

  6. Braden Heckman Avatar
    Braden Heckman

    Yo, do you have the code for how you brought the menu topside instead of below the site name and logo?

  7. I am on WordPress 5.2.2, wanted to download Caxton but the Plugin page of WordPress warns me: “Warning: This plugin has not been tested with your current version of WordPress”.
    Also, the demo page (http://demo.caxton.pro/) is unreachable: Server not found.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Amit,

      Don’t worry it has been tested with 5.5.2 – we just need to update the readme tags 🙂

      Kind regards
      Jamie

  8. Hi,
    When I use a multi-column Caxton layout, can I change the ratio of the columns? For example in a 2- column layout can i make the columns 60% – 40% or something else instead of always 50% – 50% ?

  9. Twenty Nineteen is really a powerful theme.

    Take a look at this example: https://www.adwokatpreda.pl/.

  10. I already do what you suggest for the “How to change fonts…” section, but the trouble is that making adjustments does not change the fonts in bulleted lists. Is the only way to make this simple change require going under the hood and adjusting CSS?

  11. hi,

    i’m doing a bridge website using 2019…i tried 2020 and it was a complete disaster. 2019 has some issues when you are putting inline images of clubs/diamonds/hearts/spades etc.
    also how do you input tables and get rid of the various borders?

Leave a Reply

Your email address will not be published. Required fields are marked *