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.

Categories
General

A Slight Design Tweak

After spending several months with Twenty Eleven’s awesome out-of-the-box looks, I finally decided to drop in a few tweaks. What you see before you now is almost entirely the result of Twenty Eleven’s built-in theme options, with absolutely no CSS work, and a few custom fonts.

With the built-in options, I set the background and link color to the shade of blue that my previous themes used and “borrowed” the background image from Fruit Shake for some extra texture. I didn’t tweak any of the CSS this time, but I did add a Custom Design upgrade to utilize Snicker for the headers and Ubuntu for the body text.

Premium Themes Live on WordPress.com

WordPress.com users have always been able to choose from over a hundred free themes, but our infrastructure has prevented users from uploading custom themes, like several popular premium themes. Well, we’re going to change that (or at least offer a great work-around) with the launch of the premium theme store!

Starting today, WordPress.com users will find a new “Premium” link at Appearance -> Themes in their Dashboard where they’ll find Headlines and Shelf, the first of many premium themes to be available for purchase to WordPress.com users.

As always, there are definitely more premium and free themes to come!