Categories
Technology

A Search Shortcut For Any Theme

Sometimes you find a WordPress theme you love, like Twenty Nineteen, but it’s just missing something you really want, like a search bar at the top. I’ve covered my other Twenty Nineteen tweaks in an earlier post, but folks have asked about this too. Since it works for pretty much any theme, I figured a separate post would be more appropriate.

Since you don’t have a search bar in at the top of your site, you’re probably using WordPress’s built-in Search widget. The first thing you’ll want to do is right-click the widget’s title, choose Inspect Element (or similar, it depends on your browser) and copy its section ID. In my case, that is:

<section id="search-3" class="widget widget_search">

so, the section ID is search-3.

Now, edit your site’s menu. Here you’ll add a Custom Link to your menu, enter only # followed by the section ID as the URL, in my case #search-3 and enter whatever you’d like for the Navigation Label. I went with a magnifying glass emoji 🔍 , and if you choose an emoji too, please enter “Search” in the Title Attribute field so folks with Screen Readers know what the link is for.

(Photo by Francesca Tirico on Unsplash)

Categories
Technology

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.