The GeneratePress WordPress theme is highly customizable. In this part of this WordPress tutorial series, you’ll learn how to the basics of customizing your website and blog.
It’s recommended that you have written at least a couple blog posts at this point in order to see in real-time how the layout changes effect your website’s look and feel. Once you have done that, see below for a step-by-step walkthrough of customizing a WordPress theme.
Before we get into the meat of this WordPress theme customization tutorial, let me point you to the previous lesson—an introduction to GeneratePress. If you haven’t already checked it out, I recommend to do so as it explains the many benefits of GeneratePress and how to get it installed on your WordPress site.
How to Customize the GeneratePress WordPress Theme
Below you will find ten steps to customize the GeneratePress WordPress theme to something similar to this website and one of my other blogs Cereal Guru.
While most WordPress theme options are found on the Customize page under Appearance, some customization options are configured in other areas of your WordPress dashboard. This includes our first task of customizing the sidebar layout.
1) Edit or Remove WordPress Sidebar
From your WordPress dashboard, click on Appearance then Widgets. On the next page, you’ll see a box containing the layout of your right sidebar.
You can remove each section of the sidebar by individually expanding and clicking on delete. Similarly, you have the option to edit the sidebar sections by modifying each section’s properties or adding new sections.
In this tutorial, we’ll be removing all sections from the right sidebar except for recent posts.
After you are satisfied with you sidebar changes, you can refresh your website and see the changes take effect immediately.
In order to make your sidebar slightly wider and taller, you need to customize a few settings. From your WordPress dashboard, click on Appearance then Customize
Go to Layout then Sidebars. Here, change the Widget Padding to the following values:
- Top: 25 px
- Right: 25 px
- Bottom: 25 px
- Left: 25 px
By changing the widget padding of the sidebar from the default of 40 px to 25 px, your sidebar will not only be wider but taller as well.
2) Enable a Grid Theme for Your WordPress Homepage
By default, the GeneratePress theme displays a list of all your posts on the homepage in reverse chronological order. In order to create a 3×3 grid that displays a featured image and title for each blog post, we need to configure a few options.
From your WordPress dashboard, click on Appearance then Customize. Alternatively you can click on the blue Customize Your Site button on the homepage of your dashboard if you still have the Welcome to WordPress dialog opened.
Under Layout and Blog, make the following changes:
- Change Excerpt word count to 0
- Clear the Read more label
In addition, uncheck the following options:
- Display post date
- Display post author
- Display post categories
- Display post tags
- Display comment count
If you scroll down under the Featured Image section, you can optionally change the location of the featured image from Below Title to Above Title.
Finally, at the very bottom, check the box that says Display posts in columns. By default, 2 columns are selected, but you can change this to 3 or any other number you desire.
Depending on how many posts you have written, you will see the changes reflect immediately on the right side of your screen.
3) Customize Your Post Grid
Now that you have a nice 3×3 post grid for your WordPress theme, let’s customize it to make it look nicer.
Each box or post in your grid is called a container. Under Layout and Container, make the following changes:
- Change Container Width to 1200 px
- Remove Separating Space by setting to 0 px
In addition, change the Content Padding to the following values:
- Top: 30 px
- Right: 30 px
- Bottom: 0 px
- Left: 30 px
By making these changes, your post grid will not only be wider as a whole, but the individual posts will have less space in between; therefore, making your grid appear larger.
The next thing we need to do is change the background color from grey to white in order to blend the post grid into the background.
To do this, go to Colors then Body. In here, change the background color to a pure white. You’ll immediately see that your post grid blends together with the background of your page.
4) Remove Space between Images in WordPress
Whether you’re following along in this WordPress tutorial, or just want to remove the space between your images and title, you can add a bit of custom CSS to accomplish this.
From your WordPress dashboard, click on Appearance then Customize. Click on Additional CSS at the bottom on the left side. Here, add the following three lines of custom CSS.
.post-image {
margin-bottom: 0!important;
}
As soon as you finish typing this CSS, you’ll see the extra space below the featured images go away in the preview on the right.
5) Add WordPress Header Image or Logo
By default, your WordPress header will consist of a title and tagline. This is fine, but if you have a logo, you can replace the default header with an image.
From your WordPress dashboard, click on Appearance then Customize. Under Site Identity check the following boxes:
- Hide site title
- Hide side tagline
This will remove the site title and tagline from your WordPress header.
Next, just below click on Select logo. Here you can choose your logo to upload. In my case, my logo is wider than it is tall. This works out since you don’t want to take up too much precious real estate in your header.
If you’d like, you can change the background color of your header to match that of your logo. To do this, go to Colors then Header. Change the color of the header from white to black or whatever color you prefer for your logo.
Finally, if you want to remove some of the padding around your header image, you can do this by going to Layout then Header. Under the Header Padding section, set the following values.
- Top: 10 px
- Right: 40 px
- Bottom: 10 px
- Left: 40 px
By changing the padding around your header logo from the default of 40 px to 10 px, you’ll have 60 extra pixels of visible content on your user’s screen.
6) How to Change Font Size and Line Height in WordPress
It’s super easy to change the font size and line height in WordPress. From your WordPress dashboard, click on Appearance then Customize. Go to Topography then Body.
By default, the font size of GeneratePress is 17 px, but I recommend you change it to 18 px. The reason for this subtle font size change is because a larger font size (within reason) tends to cause your readers to scroll more frequently thus making them feel like they are making more progress. Studies have shown that blogs with font sizes between 16 px and 18 px have the most positive psychological effect on readers.
A similar psychological effect can be accomplished by increasing your line height ever so slightly. By default the line height of GeneratePress is 1.5, but you can optionally bump this up to 1.6 without making too much of a noticeable difference.
7) How to Edit Primary Navigation in WordPress
To edit the appearance of your primary navigation bar in WordPress, go to Topography then Primary Navigation, similar to above.
Here you can change it from a 15 px to a 16 px font size.
You can also set the Text transform property from none to UPPERCASE to make all your menu items all capital letters.
8) How to Change WordPress Headings Size
To change the size and appearance of your WordPress headings, go to Topography then Headings.
For your H1 headings (which are in fact your post titles), change it from the default 300 to 400 font weight. This gives your title a bit more pop.
You can also change the sizes and fonts of the various headings from this page if desired.
9) Remove the Featured Image from above Your WordPress Post
It’s best SEO practice to have your post title followed by some text rather than an image. Unfortunately, the default for GeneratePress is to have the featured image at the top of your post.
This is easily fixable by going to Layout then Blog. Under the Featured Images section, change the tab from Archives to Single. By doing this, the settings we will be changing next will be applied to a single blog post.
Uncheck the box that says Display featured image. When you do this, the featured image will immediately disappear in the preview on the right.
I recommend embedding the featured image manually in your post after an introduction paragraph or two. This way, you’re following SEO best practices and your readers still get to enjoy your featured image.
Similarly, while we’re in here, you can optionally uncheck the box next to Display post navigation under the Single tab under Content. This will remove the links to the previous and next blog posts at the bottom of every post.
10) How to Remove Powered by GeneratePress in the Footer
Since you have the premium version of GeneratePress, you have the power to remove the “Powered by GeneratePress” link in your website footer.
To do this, go to Layout then Footer. In the Copyright box, type the following:
%current_year% %copy% Your Website Name
- %current_year% shorthand will automatically update to the current year
- %copy% is the copyright symbol ©
You’ll end up with a website footer that looks something like this.
2019 © Cereal Guru
Additional Recommended WordPress Customization
There are a couple additional WordPress settings that you want to customize that are independent of the GeneratePress theme. Namely, we want to change the format of the URL for blog posts and remove the date. Also, we want to change how the author’s name is displayed on a blog post.
1) Remove Date from WordPress Post URL
From your WordPress dashboard, click on Settings then Permalinks. Since we don’t want the day, month, and year in the URL for our WordPress blog posts, change the setting from Day and name to Post name.
Finally, click the blue Save Changes button at the bottom.
Instead of a URL with a date:
https://cereal.guru/2019/06/21/
sample-post
/
Posts will now be available at a URL similar to this without a date:
https://cereal.guru/
sample-post
/
Although it doesn’t hurt to have the date in the URL of your WordPress blog posts, it’s just much more human readable and sharable to eliminate the date.
2) Change the WordPress Author Display Name
By default, your WordPress username is used as the display name for your blog post author. Most of the time, the username is a single word consisting of lowercase letters and potentially numbers.
You can easily change the author display name for WordPress. Click on the Howdy link with your username in the upper right corner of your WordPress dashboard.
Here, fill out your first name, last name, and nickname.
After that, choose a suitable option under the Display name publicly as dropdown.
Finally, click on the blue Update Profile button at the bottom to save these changes.
UP NEXT: Add Google Analytics to WordPress
Now that you have customized the GeneratePress theme to your liking, let’s take a look at installing Google Analytics on your WordPress website.
In the next part of this WordPress tutorial series, we’ll be looking at installing Google Analytics using a plugin. While this is a fairly simple procedure, the insight you get into the behavior of your website visitors is tremendously powerful.
As always, if you have any questions about customizing your WordPress theme, let me know in the comments below. I’ll be more than happy to help you out.
