Customizing The Default GeneratePress Theme (For A Much Nicer Look)

by

I chose to build Boost Your Blog using the GeneratePress theme because it’s known for being lightweight, multi-purpose, and above all fast.

Sadly, it doesn’t look that great out of the box. I spent some time sprucing it up and thought it’d be fun to show you my exact process…

Why I’m using plain GeneratePress

I tried out a few templating systems and went with GeneratePress because it’s just so lightweight and clean. I’m not a fan of themes that come with giant page builders and other gizmos you’ll never use and that just weigh things down. (Slow site = bad for SEO.)

At first, I did consider installing one of the GeneratePress “starter site” themes from their Site Library. These pre-made themes look good but none of them fit exactly what I needed.

I prefer building a site organically from the ground up anyway, rather than trying to bend a pre-designed theme to my specific needs.

Since this is not a photography-heavy travel or food blog or anything, I believe I can get away with using just the default GeneratePress template. But not without doing some big improvements first!

I’m not a designer, but I was still able to improve the default look a lot through the Customizer. Using a few bits of CSS, I further tweaked some specific elements.

Removing unneeded elements

Here’s what GeneratePress looks like by default:

Oh be still, my beating heart!

Yeah, this is not very exciting.

First order of business: delete the search sidebar widget and delete recent comments.
They’re just not needed.

Let’s add a few articles so we get a feel for what it will look like with content in it.

I played with the link color until I landed on teal. Teal seems nice!

Adding some CSS

One thing immediately bothers me and it’s the category tags…

I want them to look better, but for that we’ll need to add some CSS styling.

At this point, I installed the Simple CSS plugin so I can easily add styling within WordPress via Appearance > Simple CSS.

Whoa there, partner! What’s CSS?

CSS is used to define the look of page elements such as a box or header. Knowing at least some CSS can be amazingly helpful as a blogger, as it will let you override the default styles of themes or plugins (even when you’re not given an option for it inside the WordPress admin).

It’s worth spending an hour or two learning the basics of CSS. It’s not a coding language but a markup language, so it’s fairly easy to pick up.

The key things to know are these:

  • What classes and id’s are
  • How to find them inside a page (easiest way: right-click in Google Chrome and select Inspector)
  • How to select a class or id and add curly brackets
  • How to add stuff inside the curly brackets

The codes to change aspects of an element are easy to find by Googling it. Changing the font size of an element with the class my-header would work like this: .my-header { font-size: 20px; };

To make the category links look a bit more like tags or buttons, I applied this CSS:

.cat-links {
    font-size: 0;
    margin: 30px 30px 30px 0;
}

.cat-links:before,
.cat-links a {
    font-size: 15px !important;
    background-color: #fff;   
    border-radius: 10px;
    padding: 7px 15px;
    margin-right: 10px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #eee;
}

.cat-links a:hover {
    background-color: #1fbfaa;   
    color:#fff;
}

Which makes it look like this:

Affiliate, Blogging Tools

You can hover over the above category tags to see the hover effect I added.

Changing the fonts

It’s easy to change the fonts in GeneratePress by going to Appearance > Typography.

By default, there is already a huge selection of fonts available under Add Fonts, which are all sourced from Google’s free font library.

I realized that I actually have access to thousands more fonts via Adobe Fonts because I have an active Adobe Creative Cloud subscription. (I use Lightroom to edit my travel photos.) I installed the Custom Adobe Fonts plugin to access them in WordPress.

Adobe Fonts has a lot more premium fonts than Google, including many that font nerds get excited about.

After playing around a bit I changed my headers to Futura. This is kind of a famous font, actually. Lots of brands and logos use it and it’s the favorite font of Wes Anderson. (All the text in The Grand Budapest Hotel, The Life Aquatic, etc. is Futura)

Neato!

I kept this font for a while but then I changed my mind. Futura is cool but it’s also the kind of font that would say “I’m kind of a famous font, actually”. It maybe draws a bit too much attention to itself.

Then I found the font Sofia and loved it immediately. It’s like a milder version of Futura. I also changed the body text to Proxima Nova.

OK done.

Actually, one more thing! I tweaked the letter spacing a bit.

I’m definitely not a designer but I learned that if just one thing makes a difference in typography, it’s the letter spacing. In Customize > Typography I set it to -0,25 for all the headers. I can’t explain to you why but I think it’s a lot more pleasant that way.

Adding sidebars and headers

The free version of GeneratePress has only some basic header and layout options. For better results, I highly recommend upgrading to GeneratePress Premium.

It’s just $59 for Premium with one year of free updates. It’s not an annual subscription. You don’t have to keep paying every year if you don’t want to.

GeneratePress Premium adds a ton of flexibility to create custom layouts and headers. It also adds super useful features like sticky menu bars, yet it remains very fast and lightweight.

To begin with I thought I’d at a splash of color:

I figured my sidebar would need a mailing list signup box and that it would really need to stand out from everything else.

I don’t really have an eye for color schemes so I went to Adobe Color for some suggestions. I pasted the hex code for the teal in there and it spat out a bunch of complementary colors.

I liked the terracotta red.

I accomplished this using another bit of CSS. This tells it to display the second sidebar element in a different color:

.sidebar .widget:nth-child(2), .sidebar .widget:nth-child(2) .widget-title {
    background-color: #d98768;
    color: #fff;
}

By the way, a lot of these CSS functions I don’t know by heart — I just know how to apply them. I searched for solutions and saw this one mentioned on the GeneratePress forums. Copy/paste and presto.

Using GeneratePress Premium you can easily create big “hero” headers. Activate the plugin module, then go to Appearance > Elements.

Here I created a Header set to display above every post. The screenshot below shows how this looks without changing the settings. (The menu bar is separate from it.)

Later on, I used the setting “Merge on Desktop Only” to make the teal area cover not just the headline but also the menu above it.

I also added a <div> element with the class “header-container” around the title text and set its maximum width to 70% on desktop. This is to prevent the headline from expanding the whole width, which would make it harder to read.

@media screen and (min-width: 800px) {
	.header-container {
 		width: 70%;   
	}
}

I also made a header set to be displayed on every Category page:

I got into a bit of a weird phase here where I was adding really high-contrast elements. I guess it was getting late and I was slipping into Dark Mode.

This made things feel way too heavy, so the following day I went back to using mainly white for the menu bars.

Light Mode it is.

Blocks and detailing

We’re getting close here but there are still a few things to do.

GeneratePress doesn’t seem to come with a lot of Gutenberg blocks. Their pack only comes with 6 that are mostly utility blocks, not post layout elements.

I added the Spectra pack of 20+ blocks. It has some great blocks like a Table of Contents.

Finally, I went through the entire template and tweaked a bunch of little things.

For example, the Recent Posts looks like this by default:

Hmmm, why are all these links underlined?

That makes sense for links within body text, but it’s not needed for a sidebar.

But there’s still something off about it.

These links don’t really draw my eye and don’t feel very ‘clickable’ somehow.

Switching on the dates in the preferences looks better to me.

Let’s add a bit more CSS for a finishing touch:

.wp-block-latest-posts__list li:not(:last-child) {
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
}

This tells the stylesheet to give every list item in the latest posts block (except the last one) a line below it and some extra padding.

I won’t bore you with every other tweak I made but I just generally went around the template looking for small things to tidy up.

I then enabled GeneratePress Premium’s sticky menu bar. I think it’s important that users can always easily navigate to other sections or visit my Recommended page. It reduces Bounce Rate and is generally just a good idea.

I added my photo to the sidebar, made an About page, and did all the other basic prep work.

I considered having a logo designed on 99designs or Fiverr, but that would cost a lot of money and no one cares about logos all that much anyway.

If I do get a custom logo, it’s a luxury I’ll afford one day when this blog has become a megacorp with subsidiaries around the world.

Instead, I just found another font I liked on Adobe Fonts, typed out “Boost Your Blog”, and slapped a bolt icon in front of it. I exported this as an .svg file (this will look sharp at any resolution) and added it to the theme in Customize > Site Identity.

This is okay for now.

Conclusion

I hope this has been in any way insightful or useful.

This design may not win any awards but it’s definitely a huge improvement over just a plain blog template. I won’t mind looking at this template every day.

I’ll get around to making a homepage layout someday. I barely have any content yet, so I’ll wait until later when it’s clearer what the homepage will need to do exactly.

For now, it’s good enough for me to start publishing. All in all, it took me about 5 hours to tweak everything to my liking and give this blog a basic identity.

Leave a Comment