Twenty Nineteen Tweaks


The Sorbet theme has served me well for a number of years, but it doesn’t have full support for everything that the new editor introduced in WordPress 5.0 offers, so I figured it was time to move on to the new Twenty Nineteen default theme.

Twenty Nineteen is a beautiful, simple, and clean theme, but there are a few things I didn’t like, so I figured I’d share how I handled them.

Accent Color

This site has used the same shade of blue as its accent color for the past 14 years. Twenty Nineteen has a built-in color slider to choose your accent color, but no way to specify a particular shade. This is because Twenty Nineteen’s color slider only includes shades that are easily visible against the white background and black text. This is definitely a worthy reason to finally change, so I just used the slider to pick the shade of blue that most closely matched my logo.

Square Logo

Speaking of my logo, I love it, it was designed by José Marques, and keeping it contained in Twenty Nineteen’s circular crop was absolutely not what I wanted, so I added the following via Customize > Additional CSS to remove that circle effect:

.site-logo .custom-logo-link {
    border-radius: 0;

Props to Kathryn Presner for reminding me how to do that since my CSS has gotten a bit rusty lately!

Menu Separator

Twenty Nineteen’s menu simply includes space between items, and that just didn’t look right to me. Was “About Categories” an About page, a Category page, or was it a page about categories? This quick addition via Customize > Additional CSS adds a simple separator between the menu items:

#menu-name li:not(:last-child):after {
content: "|";
padding-right: 5px;
color: #000;

.site-header.featured-image #menu-name li:not(:last-child):after {
	color: #fff;

You’ll need replace “name” with the name that you gave the menu. For example, if you called the menu “Main,” you would use “#menu-main” in the code above.

Props to Pascal Cescato for improving on the code that was originally here!

That’s all I’ve done to Twenty Nineteen so far, but I never stop messing with the themes I’m using, so I’m sure there will be more tweaks to share later on. 🙂

Update: I figured the search shortcut deserved its own post.

For further help with Twenty Nineteen, please visit the Twenty Nineteen support forum.

8 responses

  1. Seun Taylor Avatar
    Seun Taylor

    HELLO JAMES, i appreciate your support. Please, i need a css tweak trick to erasing that hyphen in the site description and Header titles…

    1. You can take care of that follow the steps in this support request.

      For further help with Twenty Nineteen, please visit the Twenty Nineteen support forum.

  2. Hi and thanks for your post!
    I’ve tried, it runs, that’s right, but I improved it:
    #menu-(yourMenuName) li:not(:last-child):after {
    content: "|";
    padding-right: 5px;
    color: #fff;

    And there’s no more a separator after the last item in your menu, and you just have to retrieve the name of your main menu (eg. #menu-main if you called your menu ‘main’.
    I will serve this code in my upcoming Twenty Nineteen hacks (fr), I will refer to your post as one of my inspiration sources.

    1. Thanks, that is much better! 🙂

      I have replaced the original code above with yours.

      1. Hi James and thank to your reply.
        As I said, I ‘ve put online, right now, a new post about Twenty Nineteen tweaks, and you’re in inspiration sources (and more); you can find it here: There’s a downloadable child theme too, i2019, including your tweak.
        Best regards, Pascal

        1. Excellent, thanks!

  3. I just switched to the theme as well and googled a fix for the round logo and found your site. I had already noticed the menu looked mushed as well and both of these changes are perfect, thank you!

    1. You’re welcome! 🙂