WordPress comes with a one-stop-shop for customizing the appearance of your website theme. The theme in terms of a website is the header and footer or whatever is above and below the content of your page.
Even the general formatting of the content in your pages and blog posts can be controlled with the customizer. You can control the size and spacing of headings, paragraph text, and even button formats.
The WPHubSite theme is an extremely powerful theme (more than most) that is built for both speed and customization. It gives you a lot of power on how you can customize your website and make it look exactly the way you want it to. If the theme doesn’t give you enough power to customize your site then you also have access to the power of Site Builder.
Site Builder does more than just allow you to create custom pages, it also works for customizing headers, footers, archive pages, taxonomy pages (categories & tags), and even add parts to a page. That means you can add a piece of a page at several different locations such as before the content. That’s all advanced customizations, though, which is covered in a different help article.
For now, we’ll work on getting to know the WPHubSite Theme customizer. But first the table of contents.
Table of Contents
- Customize Your WPHubSite Theme
Customizing Your WPHubSite Theme
Step 1: As with most changes to your website, you need to first log in to the WordPress admin dashboard. You can do this by typing your website URL and adding /login/ at the end. For example, type in domain.com/login/ or account.wphubsite.com/login/.
Step 2: Hover your cursor over the Appearance option in the WordPress menu.
Step 3: Click on the Customize option.
The main screen of the WPHubSite Theme customizer.
This section and the following sections have no steps but each option of the customizer will be explained. Many options have other sub-options within them. These will be explained as necessary.
This is the main screen and below an explanation of what each section controls. Some items are linked to a more extensive description of what you can do in it.
Global: This section contains settings that affect your entire website such as typography (headings & content size/spacing), colors for text/links/etc., default container settings, and button defaults.
Header: Control settings for the header of your website including your logo, how the navigation looks, and your site’s identity (logo & site icon).
Breadcrumb: You can turn on and off breadcrumbs as well as choose where to place them (inside the header, after the header, or before the page title).
Blog: Format how your blog archive pages are formatted and also how single posts are formatted. You can even rearrange the structure of the blog information as well as turn specific features off (such as comments or author info).
Sidebar: For pages that you’d like to have a sidebar, you can can configure how that sidebar looks. You can even choose the default for the entire site and even each section of your website (pages, posts, and archives).
Footer: Turn the footer off completely or choose to display columns. You can also turn the footer bar on or off which can show the site copyright information and more.
Menus: Set up menus for your site including the main menu (at the top of your pages) or even a footer menu. You can create as many menus as you’d like and assign them to different places on your website using widgets or the theme settings. You can also learn even more about menus in the menus help article.
Widgets: Some page types allow you to insert widgets on them (such as the sidebar). Widgets can add a number of different features to your website including search, recent posts, text, images, html (for inserting HubSpot forms, meetings, or other features), and tons more.
Homepage Settings: These are the same settings that you can find in the WordPress Settings menu of the admin dashboard. They can also be set here if you’re already in the customizer.
Note: When you’ve made changes in the customizer, before anything is live on your website, you need to always click the Publish button.
Customizing settings for different device types
Before getting into each section, it’s important to understand the icons noted in the image to the right. Many settings can be edited separately for desktop, tablet, and mobile.
Item 4 shows what mode you’re in (desktop in this case). You can continue to click the icon to toggle between desktop, tablet, and mobile. Settings with this icon next to it can be set independently for each device type.
Note: If you don’t set separate device settings then the settings from the desktop will be used.
Item 5 is the main screen size toggle buttons which shows your website in desktop, tablet, and mobile. These icons can be used to see how your website looks on each device. Keep in mind that not all settings are unique for each device.
Customizing the global base typography.
The settings from the global section affect your whole website. You will still be able to control different parts of your website with the Site Builder but this section is an easy way to set up some overall site defaults.
Typography
- Base typography lets you set several defaults for how the content text on your website looks.
- Select the font family you like from a huge list from Google Fonts.
- Choose the default size for fonts.
- Weight lets you make content text thinner or thicker.
- Line height is important because it adds more or less space between each line of text.
- Paragraph margin is the space beneath each paragraph of text. It’s nice to leave paragraphs separated a bit for easy reading.
- Headings let you set defaults for each heading type up to H6. The top section of headings lets you choose the default font family, weight, and text transformation for all heading types. It’s a good idea to keep the font family the same for every heading level (1-6).
- Set a different font size for each heading. Make sure each one differs enough so it’s easy to see how content is structured on your website.
- You might also change the font weight for some of the heading types.
- Text transformation might also be different. For example, you may capitalize the first letter of each word for H1 and H2 but not for the rest.
Colors
- Base colors let you set the color of all the content text on your website, link colors, and link hover colors.
- The theme color changes elements of the theme including buttons, selected text backgrounds, and more.
- The background color sets the overall color of your websites main content background. It may not show up if you have background colors turned on in various rows of the Site Builder.
- Heading colors lets you choose the color of text for each heading type.
Container: This one is great because you can choose how each page layout is structured. The layout option is the default for all page types. If the page type is set to default then it will use the one you chose on the layout option.
Here are the layouts you can choose from:
- Boxed
- Content Boxed
- Full Width/Contained
- Full Width/Stretched
If you’re going to use the Site Builder then the best option to choose for those pages is Full Width/Stretched. You can control how the content shows from within the Site Builder.
Buttons: This lets you choose the defaults for all buttons on your website. You are able to change everything about individual buttons also with the Site Builder from padding to font size.
Customizing the header.
Site Identity: You can set your site logo in here or if you’d rather use text or even your site’s tagline then you can turn those on in here. The site icon is also good to add because this shows up in browser tabs as an image and Google also shows it in mobile search results.
Primary Header: Choose the format of the header of your website such as where to show the logo (or site title) and the primary navigation. You can also choose how the menu looks on a mobile device specifically.
Primary Menu: You will set up the primary menu below but you can format it first in this section. It’s possible to add something to the end of the menu too such as a call-to-action or search icon.
Transparent Header: This one is a bit tricky but it’s great to make the header overlay the content of your website. It’s great to use for large images that fill the entire screen and your header lays over the top. It’s tricky because you have to make sure every page that has the transparent header has enough padding so the header doesn’t overlay the content.
There are more advanced settings you can use for the header also which will be covered in another help article.
Customizing the blog.
Blog/Archive: Change around the format of your blog archive pages. The archive pages consist of three main pages, the main blog list of all your blog posts, the category archive, and tag archive. You can turn on and off settings and even rearrange each element. There
Single Post: Choose what elements show up on blog posts and in what order. You can put the featured image above the title and even reorganize all the meta information.
There are more advanced ways of controlling how your blog, archives, and single posts are formatted which will be in an advanced help article.
Customizing the footer.
Footer Widgets: This enables the footer widgets which can be controlled in the widgets section of the customizer. If you turn the footer widgets on then there are also some additional settings such as top border color, thickness, background color, and content settings such as colors.
Footer Bar: The footer bar, if turned on, is just below the footer widgets. You can choose to put copyright information in here, free text, a widget, or even a menu. There are additional formatting options for this section as well to change colors, backgrounds, and more.
There are more advanced ways of controlling the footer of your website which will be covered in a more advanced help article.
Customizing menus.
Without creating menus and adding pages to them in WordPress, your pages won’t show up in your menu. Yes, menus are completely independent of the creation of pages and page structures. This is by design, though, because not all pages should show up in the menu. Menus are designed to give you full control of what shows up in each menu.
There are two main menu locations in the WPHubSite theme by default, the primary and footer menu. The primary menu is the main navigations of your website and is typically near your logo or site title at the top of your page.
Use the Create New Menu button to create your first menu item and name it something that makes sense. You should either name the main menu Primary or Main. Be sure to also select the menu location. You can even choose both if you want the same menu to show up in the header and the footer.
After you create a menu then you can add items (pages, posts, categories, or even custom links) to your menu.
Note: It’s always a good idea to keep the menu as simple as you can. No more than 5 items are recommended.
You don’t have to select a location for a menu you’re creating, either. It’s perfectly acceptable to create a menu that doesn’t go in one of the main areas and instead use it in a widget for a sidebar or somewhere else in your website. There are no rules to what you can add to a menu and where you can use it. The WPHubSite Site Builder lets you add a menu anywhere in your pages (not recommended) or templates.
To learn more about the process of creating menus and all the advanced features of them, check out the menus help article.
Advanced customization management.
There’s a lot you can do with the customizer as you’re customizing how your website looks. One great feature is that you can save your settings as a draft. If you choose the Save Draft option then the Publish button turns to a Save Draft button. That will save your customizations without making them live. That way you can continue to work on your customizations to get them perfect, not lose your settings, and then publish them when you’re ready.
Another great feature with this tool is that if you have a draft saved you can share the special URL (item 6) that lets people who don’t have access to the customizer see your customizations. This is a great way to get feedback and approval before making your customizations live.
It’s also possible to set customizations on a schedule so they publish on a specific date and time. This information is based on your WordPress settings so be sure to go through your settings and set the correct time zone.
Advanced Customizer Options (Pro Modules)
There’s more to the customizer than what’s shown above. Not all features are turned on by default. The reason they’re not all turned on is because the more features you turn on, the more they can potentially slow down your website. Because these options aren’t always needed they are turned off by default but available for you to turn on.
Sometimes the benefit of the additional pro functions outweighs the potential speed decrease (usually very small). Follow these instructions to access the advanced WPHubSite theme options that can be turned on.
Step 1: Click the WPHubSite link in the Appearance section of the WPHubSite WordPress menu.
Now you can access many customizer options directly from here and turn on and off pro modules.
Item 2: This section consists of links to some customizer sections and will bring you directly into the WordPress customizer.
Item 3: The items with the colored bar next to them are already activated. The activated modules contain standard settings that won’t slow your site down and are necessary for all websites. It’s not a good idea to deactivate any of these.
Item 4: Any item that is not activated can be activated by clicking the Activate link next to that item. There are some great features available in these modules especially if you choose to use only the theme to do most customizations for your website.
Note: Some of the pro modules can slow your website speed down. It’s important to weight the benefit it will bring your visitors vs. how much it slows your website down. Most will be negligible but please do test.
We will be adding more help articles for these pro modules.
That’s it! You’ve made it through all the customizations of the WPHubSite WordPress theme. With some playing around you should be able to create a really slick website with WPHubSite and our powerful theme.
When you start adding in the power of HubSpot into your website then you’ll really see some powerful inbound marketing features to engage and wow your audience.
Customize Your WPHubSite Theme With The WordPress Customizer Video
This video covers all the different parts of the WPHubSite Theme you can customize with the WordPress Customizer. It goes into each section but does not provide the subtle detail that the above article contains. It’s still useful to use both the article and the video together.