This will be the first in a series of GeneratePress tutorials I feature on my site. In this article I will be going over the basic Customize settings we should apply to the GeneratePress Theme.
This is the theme I recommend for your WordPress website. I showed you how to download it in a previous tutorial.
In this tutorial we will be going over the following tasks:
Before we dive into the Customization options, it’s important to note that like with any other theme you install on WordPress, GeneratePress allows you to copy one of their pre-made website layouts and import it into your own website.
Alternatively, you can create your website from scratch by following my system and creating a site to your own specifications and liking.
In any case you will need to familiarize yourself with the settings and options available on GeneratePress and GenerateBlocks, which we will be going through in this and the next few tutorials.
You don’t need to decide immediately. You can test both options and then decide on a later stage.
To install one of GeneratePress’s pre-made sites follow the following tutorial video from their channel:
Whatever option you choose, you will need to customize your WordPress website with your own brand guidelines.
Customize GeneratePress with your Brand Guidelines
In the last tutorial we defined our website branding guidelines. Now, it’s time to set up the branding elements we decided on, into our website.
We will do this through the GeneratePress theme Customize settings.
Before we start, we will be setting up a Test Post. With this Test Post we will be able to see how the Customization changes we make will look on the website.
Creating a Test Post
To create a new Post, log into your WordPress dashboard. Click on POSTS from the left-hand menu and press on ADD NEW.
Click on the ADD TITLE section and write ‘Test Post’ instead.
We now need to fill in the Test Post with some content. We’ll use a Lorem Ipsum Generator to fill in some dummy text.
What does lorem ipsum mean?
Webmasters and web site designers use, what is called as Lorum Ipsum text, to act as a placeholder until they have the real text/content in place.
To generate Lorem Ipsum text head on to Lipsum.com, scroll down to mid page and click on the GENERATE LOREM IPSUM button. You now have a wall of temporary text to copy and paste into your Test Post.
Copy the Lorem Ipsum text from this page and paste it into the space underneath the title on the Test Post page on WordPress.
Since we’re setting up this Test Post to understand how our posts will look like, we also need to include other aspects in the content, like Titles, Sub-Headings, pictures etc. So, after every Lorem Ipsum paragraph we will insert a sub heading and within the text we will also insert a few pictures.
Insert Pictures
To insert pictures type /image in the Test Post in between any 2 Lorem Ipsum paragraphs you previously pasted. Then press the UPLOAD button or the MEDIA LIBRARY link if you already have a picture you can use in the media library.
Insert Subheadings
To insert subheadings, type /Heading at the top of a Lorem Ipsum paragraph. By default, this will be an H2 subheading.
Write something in this subheading. For the Test Post I like to write ‘This is an H2 Sub-Heading’ so I can clearly see what type of Heading number it is.
We want to have one H2 heading in our Test Post, but we also want an H3, H4 etc.
Repeat the step above to add more Headings in other parts of the page, however this time after typing /heading, hover over the heading and from the pop-box that comes up click on the H2 button and change it to H3, H4, or any other Heading type you want.
Insert Featured Image
To conclude our Test Post, we want to add a featured image also.
For this, go on the right-side settings list within your Test Post. Make sure that at the top it’s set on the ‘Post’ tab and click on FEATURED IMAGE.
Now press SET FEATURED IMAGE and choose one of the images you have in your library.
Publish the Test Post
Now that we have inserted a sample of each basic element we need for the Post, click on the PUBLISH button in the top-right corner, and click PUBLISH again in the next window.
Your test post is now live.
You can click on it to see how it appears.
It’s time to start styling our test post with the Branded colors and font types that we have previously chosen.
WordPress Customize Settings
Head back to the WordPress Dashboard. You can get there from the current Test Post screen, by clicking on the WP Logo button on the top left corner of the page.
Now we will go through the settings under the ‘Customize’ option of WordPress and adjust some of them.
To access the Customize settings from the main WordPress dashboard click on APPEARANCE in the left-hand menu and then click on CUSTOMIZE. (Appearance > Customize)
In the Customize Settings you will find the following options to customize the GeneratePress theme.
- Site Identity
- Layout
- Colors
- Typography
- Background Images
- General
- Menus
- Widgets
- Homepage settings
- Additional CSS
In the next part of this article I will show you which of these Customize settings you should adjust now. We will also be addressing some of these settings, in more detail, in separate dedicated tutorials.
Let’s go through them one by one.
The beauty of this WordPress settings, is that every change you make in the Customize settings will be reflected in the window pane on the right-side of the page.
By default WordPress shows you the Homepage. You can change this by going to the Posts section in WP left-hand menu. Now hover over the ‘Test Post’ you just created and click on the VIEW option.
This will take you to you new Test Post page and at the top, you will see a menu banner that includes the option, ‘Customize’. Click on this.
This will take you to the same exact Customize Menu that we got to from the WP dashboard. The difference is that now you have your Test Post in the right-hand main window. So any changes we make to the Customization will be reflected shown in the main Test Post section.
So, for example, when you change the font type for the Body, you will notice this change immediately in the Test Post article section.
This is why we did the Test Post so that we can immediately and clearly see the effect of our changes on the Post, and we can adapt accordingly as we go along.
Customizing Site Identity
First up on the left-side menu is SITE IDENTITY. Click on this and see the options that come up, as follows:
Site Title
Here insert the name of you site. Now since we are using our own logo for the site title, we will be hiding this feature on our website so tick the box that says, ‘Hide site title’.
Tagline
You could enter a motto for your website or keep it empty. If you keep it empty, then go ahead and click also the box that says, ‘hide site tagline’.
Logo
Here is where you upload the logo. If you’re following my tutorials in chronological order, then this has already been done (see here).
In this part of the settings however, you can also adjust the size of the logo. From Logo Width you can drag the blue ball to the right and left to experiment with the size of the logo and see how large or small you want to have it.
Site Icon
This is where we include the Favicon, which we have already done in this tutorial.
Once you’re ready from all the changes, press on the PUBLISH button at the top of this left menu. Then press the back < button to go back to the Customize settings.
Customizing Layout
The Layout customization options define how our website layout will look. Certain elements, like Primary Navigation Menu, Headers, Sidebars and Footer can be set from here.
We will not be adjusting these settings in this tutorial however, since we have a whole article dedicated to building your website header later.
Customizing Colors
In the Colors settings section, we can set up the brand colors we had chosen in our website branding tutorial. Open the palette from coolors.co to see the Hex numbers of your brand colors.
To set these colors in WordPress choose the corresponding Hex codes under the Global Colors option. This will save your brand colors in the GeneratePress theme, and you will not need to remember the Hex code every time to use your brand colors.
They will be saved under your Global Colors options in WordPress, and you can then choose the colors directly from there.
Delete any extra colors left in the Global Colors section so as not to confuse you.
You can change the colors of various website elements from here, like Link colors, Headings, Buttons, and so on.
Customizing Typography
In this part we will be adapting the settings for the text on your site.
Font types, font sizes, font weight, etc. will be set for headings, paragraphs, titles and so on.
Click on TYPOGRAPHY on the left-side menu (Appearance > Customize > Typography).
You should see 2 options (blue buttons), ‘Add Font’ and ‘Add Typography’.
Click on the ADD FONT button first and look for the font type you picked from Fontjoy in our branding tutorial. Make sure that the ‘Google Font’ option is switched on.
Now click on the ADD TYPOGRAPHY button. Here you will be setting the
- font type (font family),
- bolding (font weight),
- Upper case/lower case (Text Transform – we suggest keeping this as default but choose ‘Capitalize’ for Headings settings),
- font size,
- line height,
- letter spacing,
- paragraph bottom margin.
You will have to set these separately for each type of content, such as Paragraph, Headings, Body, H1, H2, etc.
Go through each one by clicking on PUBLISH after you finalize each Target Element and then click ADD TYPOGRAPHY again to address the next Target Element.
Here is an example of my settings:
Next to each option you will notice 3 icons in grey. These are desktop, tablet and mobile.
In these settings you can set different font preferences for each type of display.
So, for example you might want to decrease the font size just for mobile or tablet viewing, or increase the spacing on mobile only, etc.
Font Size
For SEO purposes google recommends that font size is not less than 16px.
I personally like to go with 17px or 18px for the body and slightly larger font size for the Headings depending on what type of heading they are, example H1 would obviously be bigger than H3 and so on.
Line Height
For line height I prefer to set this at 2 or over but this will also depend on the Font type you choose. See how it looks on your eyes and decide accordingly.
Remember the clearer it is to read the better experience it is for your visitor and the better this is for google ranking (indirectly) since the visitor may stay on your site for longer.
Letter Spacing
I leave letter spacing as default and usually increase slightly the Paragraph Bottom Margin in the body as I like some clear spacing between the end of one paragraph and the next paragraph.
Customizing Background Images
This setting allows you to insert an image to be the background of your site, or parts of the site. I am not a fan of image backgrounds since it becomes extremely tricky to strike a good balance between design and content clarity over a background image.
You don’t need to do anything in this customization settings because I will show you a different way of inserting image backgrounds, in a later tutorial. This method will give you more control over the location of the background.
Customizing General
The General Customization settings can be left as default.
Customizing Menus
The Menu customization settings define your top menu, (aka Main Menu) and your footer menu settings. We will be addressing these in detail in another tutorial, while building our Menus. At this stage you can skip this setting.
Customizing Widgets
With GenerateBlocks, the page builder that we downloaded earlier, we will not need to use Widgets.
Widgets are basic website design features that are pre-installed in a Theme when you download it and which you can switch on or off for your website. Such as, Footers, Sidebars, Headers, etc.
In the next tutorial I explain how GenerateBlocks elements work to create any feature you want on your WordPress website without having to use Widgets.
Customizing Homepage Settings
The Homepage settings have already been customized when we discussed and chose our Blog vs Silo Structure options.
No need to do anything else here.
Customizing Additional CSS
This part of the Customization settings allows you to insert CSS code to alter your website more specifically to your needs. This is usually done by people who are more familiar with coding and who are looking for something very specific to include in their site.
If you are not familiar with CSS I urge you not to touch this customization setting at all.
I personally never use this setting.
GeneratePress Theme Customization Done, What Next?
Now that the basic settings on our theme have been adjusted to reflect the website branding colors and style, we can move on to the next part.
In the next tutorial I will introduce you to the awesome features of GeneratePress and GenerateBlocks that we will use to build up our website.
Don’t forget to check out my other WordPress tutorials here.
