The GeneratePress Customizer tabs and sub tabs a full listing

The easiest way to set up GeneratePress is to simply work your way through the options (tabs in the customizer) and make changes as you go.

This post lists the most important options in the GeneratePress Customizer. I’ll pay special attention to the layout tab and it’s many sub tabs because these are the most confusing to most new users.

Site Identity tab

  • Text Site Title and Tagline or…
  • Image logo, retina logo and site icon

Image logos are 350×70 px (700×140 px retina)
Site Icon is 512×512 px


The Layout tab AND sub tabs
The layout tab looks overwhelming at first but most of the tabs are very straightforward and do what they say on the tin without any real complication or confusion.

Container tab

  • Width: content + sidebar area
  • Separating Space: space between the different containers, header, footer, content, sidebar and between blog posts in listing pages etc.
  • Content Layout: one container or separate containers
  • Content Padding & mobile Content Padding: affects main blog post content box

Separating Space is more obvious if you use separate containers and can see the background colour between the content and sidebar containers.

Header tab

  • Full width or contained
  • Alignment: left, right, centre
  • Header Padding: for slim style headers etc
  • Mobile Header: removes site id and header widget area on mobile devices and then displays a mobile header with hamburger icon
  • Mobile Header Logo: if used keep small and square 50×50 px
  • Sticky Mobile Header: enable/disable hide when scrolling down

Primary/Secondary Navigation tabs
The settings in these two tabs are similar. However, the secondary navigation has a few less settings.

What the primary and secondary tabs have in common

  • Mobile menu label
  • Navigation width: full/contained
  • Inner navigation width: full/contained
  • Navigation alignment: left/centre/right
  • Navigation location: above/below header, in the sidebar, float left/right, no navigation
  • Menu item and sub menu item: width/height

Settings only available to primary navigation

  • Navigation drop down: hover/click-menu item/click-arrow
  • Navigation search: enable/disable
  • Navigation logo: add/remove
  • Navigation logo placement: sticky/sticky+static/static

The sticky navigation tab

  • You can enable sticky navigation on: mobiles/desktops/both/none.
  • You can slide or fade in the sticky navbar. But this is only noticeable if the hide when scrolling down box is NOT ticked.
  • You can set a height for the menu that only affects the primary navigation bar AFTER it becomes sticky.

Don’t get confused!
You can enable sticky navigation on: mobiles/desktops/both/none. Do this via the sticky navigation tab.

BUT! The Layout > Primary Navigation > Logo Placement: sticky/sticky+static/static is a completely different setting.

Sticky logo placement and sticky navigation are NOT the same thing. Sticky logo placement only affects the logo inside the primary navigation bar. Sticky navigation affects the actual navigation bar itself.

The Slide-out Navigation tab

Slide-out Navigation can be enabled on: mobiles/desktops/both/none.
Don’t forget that you also need to go to manage locations and choose a menu that will slide out when the hamburger is clicked.

The slide out navigation hamburger icon displays in addition to (at the end of) the row of primary navigation menu links on desk tops or large screen devices.

But if you enable slide out navigation on mobiles, there will be just one hamburger to click. And that hamburger icon will open the menu you selected in manage locations for the slide out menu.

So, you can have the primary navigation bar links AND the slide-out hamburger on desktops.
But just the slide out menu on mobiles.

The slide-out navigation tab also has a menu height setting. This affects the space above and below the links inside the slide out menu.

The Page Header tab

  • Layout > Page Header: has two options
  • Page Header Location and…
  • Single Post Header Location

The page header is the featured image. But there’s an important point to note here! If you want to use full width GeneratePress Page Headers, you must choose the setting of Layout > Page Header: Page Header Location: Above Content Area.

This hooks the GeneratePress Page Headers into a full width area of the page layout.

The problem is that placing featured images in this position can look silly on single blog posts.

The settings I use to solve this problem are listed below…

  • Layout > Page Header: Page Header Location: Above Content Area
  • Layout > Page Header: Single Post Header Location: Inside Content Area

Layout > Page Header: Single Post Header Location, (the blog post setting) has two extra options…

  • Below Post Title (the main title of the blog post sits on top of the featured image)
  • Hide

The Sidebars tab

Layout > Sidebars: this is where you set the default sidebar/content layouts.

There are three main settings

  • Sidebar Layout (pages)
  • Blog Sidebar Layout (blog page/category listing pages/archive listings)
  • Single Post Sidebar Layout

But, you can also override these settings on a page by page or post by post basis using the GeneratePress Layout settings box that you find under the page and post editor.

There are two other important settings in the sidebars tab…

  • Padding (between the sidebar container and the widget content)
  • Width (the percentage width of the left and right sidebar, each sidebar occupies 25% of the page width unless you choose a different setting)

The Blog tab

The blog tab has a lot of settings. I’ll come back to this and cover it in great detail later!

The Footer tab

  • Width: full width/contained
  • Number of widget area columns: 0-5
  • Back to top button: enable/disable
  • Footer widget area padding: controls entire block, not individual widgets
  • Footer padding: controls footer credits area
  • Copyright: (footer credits) use text and php snippets such as %current_year% %copy%

WooCommerce

The WooCommerce tab has a lot of settings. I’ll come back to this and cover it in great detail later!


The section above covers the sub tabs inside the layout tab. We’re now going to dealing with the other tabs in the main customizer.

The Colors tab

The colors tab has thirteen sub tabs. The tabs include…

  • Body
  • Header
  • Navigation (primary/secondary and the sub navigation drop down colors)
  • Buttons (this background and text color setting affects all links with a class=”button”)
  • Content
  • Sidebar widgets
  • Footer widgets
  • Forms
  • Footer (and back to top button)
  • WooCommerce

Some important points about the color tab

Most of the sub-tabs in the color tab have similar options…

  • Background (and sometimes hover) color
  • Text color
  • Link color
  • Link color hover
  • Link color visited

This list goes into more detail about the color sub tabs…

  • Header sub tab also contains site title and tagline color settings
  • Navigation sub tabs contain hover and current page color settings
  • Content sub tab has a lot of settings. You can set the color of blog post titles for both the blog post itself and the blog post titles that display on archive and blog listing pages. You can set the color of entry meta text (category links). And you can set the color of headings h1 to h5.
  • Sidebar widgets, you can set the background color, text color and widget title color for sidebars.
  • Footer widgets, you can set the background color, text color and widget title color for the footer widget area.
  • Footer tab. The footer is independent of the footer widgets area. You might know this as the footer credits area. The footer tab also contains the color options for the back to top button.
  • Forms. The forms color tab only controls the actual input boxes, experiment with this to see what it does.
  • WooCommerce. If you have WooCommerce installed you can use the WooCommerce color tab settings to change all kinds of things. Such as product prices, star ratings and the sale sticker background. I recommend WooCommerce users experiment with the WooCommerce color tab to see exactly what it does.

Typography tab

The standard typography settings in GeneratePress have been very well thought out. Unless I have a good reason to change them, I leave most of these settings alone.

Some of the typography tabs you might want to edit include…

  • Header: site title and tagline
  • Headings: h1 to h6 headlines
  • Widgets: the widget typography settings affect both sidebar and footer widgets

How typography works in GeneratePress
First go to the Customize > Typography > Body sub tab. The font you use in the body tab will be inherited by every other element on your site, unless you specifically override that setting, so choose your body font carefully.

Choose a Google font from the drop down list.
GeneratePress will automatically load all of the font variants available for that font. Every font weight or variant takes time to load, so try not to use too many. If you know you won’t be using one of the variants, such as 900 italic for instance, delete that font variant from the list.

Set the font size, line height (space between lines of text) and paragraph margin (space between one paragraph and the next), by dragging the sliders.

A quick reminder, I think the standard body font used by GeneratePress is an excellent choice. It uses fonts that are built into your pc or mac so there’s no Google font download needed which means your site will load faster.

Just work your way through the typography sub tabs one at a time and change the settings to suit your design.

Most of the typography sub tabs have settings for…

  • Font family
  • Font weight
  • Font size
  • Text transform (uppercase/lowercase/capitalize)

Some typography sub tabs have extra settings for…

  • Line height
  • Widget title and widget content size
  • Bottom margin (space below the widget title for instance)
  • Media queries: these enable you to set specific sizes of headline for instance. So when a user views your site on a desktop computer they see large h1 headings, but if they view the same page using a mobile or small screened device, the headline is displayed using a smaller font size.

Background images tab

You can apply a background image to many of the elements in your website. However, I urge you to be cautious. If used carelessly, background images can make your site look amateurish.

Clean and simple almost always looks professional.

You can add background images to…

  • Body
  • Header
  • Primary and secondary navigation bars and the sub navigation drop-down links
  • Content area
  • Sidebars (the chosen image displays inside every sidebar widget)
  • Footer widgets and footer credits areas

General tab

  • Load essential icons only
  • Load essential Font Awesome icons instead of the full library.

Cache dynamic CSS

Cache CSS generated by your options to boost performance.

The remaining tabs are the standard tabs found in the customizer of any WordPress theme.

  • Menus
  • Widgets
  • Homepage settings
  • Additional CSS