How I Customized Twenty Nineteen Theme

I’ve updated my blog theme.

I’d been using Konstantin Kovshenin’s Publish for a few years. I like the minimalist design and distraction-free reading.

But the theme is retired by WordPress now, and I don’t fully understand what that means in regard to Gutenberg and WordPress 5.0—whether the theme would still update appropriately. And apart from that, Publish is definitely not optimized for blocks, and I’m learning to love blocks.

So after doing some research, I decided to switch to Twenty Nineteen, which is brand new and optimized for WordPress 5.0 and the new block interface. It’s another minimalist design, but more reader-friendly, I think. And it’s really designed for longer-form content, which is something I think blogs need these days. Twitter and social media, generally, has really removed the need to post quick quotes or single-paragraph post to personal blogs. But then what’s a blog for? I think longer-form, “anchor” content from which your social media posts should emanate—that should form the foundation of whatever story your telling across your online profiles.

But I’m not a fan of some of the theme’s out-of-the-box features. White space is good, but not that much white space. Narrow columns are nice for reading, but not for informational, multi-column pages.

That said, here are some CSS customizations I made to my site—ones I think other users might be looking for, given the comments and questions I’ve seen on WordPress forums about this theme. I’m sharing here because I haven’t found many answers, or other resources, on customizing this theme.

Moving the Cover Image Up

First, I reduced the padding on the bottom of the site header. The stock theme just has too much white space between the header and the content—on a smaller screen (like my Dell XPS13), it’s too much scrolling. I think the theme’s creators agree, too, as they both did the same thing on their blogs.

Here’s the code to reduce the site header bottom padding:

.site-header {
padding-bottom: 0;
}

Increasing Page Width

As I mentioned above, the narrower columns in this theme are nice for reading. But they aren’t ideal for informational pages that include more than one column. I like multi-column pages, so I needed to increase the width of pages (not blog posts).

Here’s the code to do that:

body.page .entry .entry-content > *,
.entry .entry-summary > * {
max-width: none;
}

Removing Those Annoying Lines

Twenty Nineteen is a truly minimalist theme, but for whatever reason, the authors added these small divider lines above every blog post title and page title (see above Welcome in the screenshot to the right). I’m not sure why, as the huge, bold headers are more than sufficient to provide natural, intuitive-looking breaks in the content.

Here’s the code to remove those lines across all of your page titles and blog post titles (but not from the bottom of posts/above the author name, where I think the lines serve a bit more of a purpose):

.entry .entry-title:before {display:none;}

Changing the Font (i.e. what I couldn’t do)

I don’t like the theme’s font. It’s too serif. I want something a little more blocky. Like Minion or Georgia.

I tried to do this with the built-in theme customizer options, but the problem is that lots of this theme’s elements don’t answer to those commands. For example, none of my bulleted list were updating along with the paragraph text. Nor does (as expected) the site sub-title (which I’m not using now, but may want to use in the future). I suppose I can edit each individual block to match whatever font I choose, but that’s a pain.

Any thoughts on how to do this?

Published by Nick Freiling

Founder/CEO of PeopleFish. I write on technology, market research and economics. Bylines at Startup Grind, FEE, the American Enterprise Institute and the Mises Institute.

Leave a comment

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