[Pro] Getting started with the Hueman Pro WordPress theme
Congratulations for purchasing the Hueman Pro theme, you've definitely made the right choice !
Note for users of the Hueman free theme : before you start, it is important to have in mind that the Hueman Pro theme includes all the features of the Hueman free theme and the Hueman Addons plugin. If you are a user of the Hueman free theme and the plugin, all your current settings will be preserved and inherited when activating the Hueman Pro theme. ( see how to upgrade from Hueman Free to Hueman Pro ).
Note for users of the Hueman Addons plugin : you need to deactivate the Hueman Addons plugin before activating Hueman Pro.
This documentation page will go through the following topics :
- Install and Activate Hueman Pro
- Start Customizing
- Uploading a Header Logo
- Display your menus
- Add your social profiles
- Customize your website's colors
- Customize your fonts
- Customize your header : create an image background
- Sidebars : choose your page layouts
- Setup the Hueman sidebars and footer widgets
- Customize your footer
- Performance optimization
- Recommended plugins
Install and Activate Hueman Pro
After purchasing the Hueman Pro Theme, it will not be automatically installed in your website. You will need to download the .zip file and install it manually as a Theme ( not a plugin ) and activate it in your WordPress admin.
Once installed, you'll be able to enter your purchase key to activate the theme.
Downloading the Hueman Pro Theme
- You will need to download hueman-pro.zip (Hueman Pro Theme) from your account.
- You can login here http://presscustomizr.com/account/
- Click on DOWNLOADS tab and you will find customizr-pro download link.
- Click on customizr-pro download link and save a copy on your PC.
Note : You need to use Firefox or Chrome browser to do this, Safari browser will automatically unzip your downloaded zip file and you will not be able to install it.
Installing the Hueman Pro Theme
- Login to your website's WordPress dashboard.
- Navigate to Appearance -> Themes
- Click on Add New Theme.
- Click on Upload Theme button
- Click on browse button. You will see a pop up window on your PC.
Navigate and find your hueman-pro.zip file. Select hueman-pro.zip file by double clicking it.
Click on Install button - Wait for the installation proceed to complete. Click on Activate link to activate Hueman Pro Theme.
Check Menu allocation
After completing installation of Hueman Pro Theme, you will need to check your menu.
Your menu items will be intact, but your menu could be dropped from it's location.
In this case, you will need to assign your menu back to your menu location. Navigate to Appearance -> Menus, click on location tab and assign menu back to it's location if it's dropped.
Activating your Hueman Pro Key
- Navigate to Appearance > Hueman Pro Key.
- You will see input for Activation Key.
Enter your key in the input and click Save Changes button.
Start Customizing
You can customize the theme to suit your needs through the customizer panel. To open the customizer panel, do any of the following.
- If you are on any of the posts/pages of your site, you can navigate to the admin bar on top and click on the Customize link.
- If you go to the admin Dashboard, you will be presented with a welcome message and a Customize your site button. Click on this button.
Using the contextualizer
The Hueman Pro theme includes a unique customization technology allowing you to customize any page of your websites independently from the others.
When you are customizing any page, you can either customize the site wide options, or narrow down the scope of your customization to the current page. For this you simply need to click on the contextualization link below an option.
This feature is explained in detail with a use case on this page.
Uploading a Header Logo
- from the customizer, click on Web Page Design > Site Identity
- Under the option Custom Header Logo, click on the Select Image button.
- Open the logo image file.
- Crop the image to suit your needs in the Image Cropper that appears.
- You can see the logo image replacing the site title immediately on the preview.
- Click on Save and Publish.
Display your menus
From the customizer, open the menu panel. There you can assign existing menus to the theme's predefined locations, or create new menus.
Add your social profiles
From the customizer, navigate to the Web Page Design > Social Links. You can start adding your social profiles.
Customize your website's colors
You can customize your website's colors in several sections of the customizer panel :
- Web Page Design
- Header
- Footer
Customize your fonts
“The world is full of beautiful fonts—choosing the right one for your next project can be a daunting task.”
The Hueman Pro theme offers you a wide range of fonts and font combinations. From the customizer, access them through Font Customizer.
You can customize the fonts for the individual elements of your site -- the header, the body, the footer, the posts, the pages, the slider, the comments, the sidebars and even the custom controls that you add to your site.
For each of these, you can choose the font family, the font style, font size, font colour, font weight, line height, letter spacing and more.
Read this complete tutorial on Using the Font Customizer in your theme for a thorough understanding of how to use the Font Customizer.
Customize your header : create an image background
The Hueman Pro theme lets you choose between several header styles. To access those settings, from the customizer, navigate to Header > Header Image and Slider.
You'll find a complete documentation about the header slider builder here, but let's go through a quick overview of this module.
In Header Style, pick the "Full height sider background".
As soon as activate the Large Header Slider in local context like a page or a post, it will be populated by default with the post thumbnail, the title and other contextual informations like author, date and categories when available.
You can change those settings and others like colors, height, font size, effects, by clicking on the gear icon.
Setting up the global slider options
Editing, creating and reordering slides
To edit an existing slide, click on it to expand it and navigate in the tabs to set your images, titles and link.
To create a new one, click on the "Add New" button.
To reorder your slides, drag and drop them.
Sidebars : choose your page layouts
The Hueman theme offers six different layouts and you can choose any of these for each individual post/page as well as a group of pages.
From the customizer, click on Content > Layout options for the main content.
Here you can choose the layouts. The Global layout has 3 Columns Middle Layout as the default. For the other pages, like Home, Posts, Pages, Archives or Search, you can either Inherit Global Layout or choose from one of the 6 options.
Setup the Hueman sidebars and footer widgets
You'll find a complete documentation about the Hueman widgets on this page.
Customize your footer
To redesign your footer, from the customizer, click on Footer > Footer Design : Logo, layout...
You can upload a custom logo image for the footer.
You can also add some footer copyright text under Replace the footer copyright text. If you want this text to replace the default credit text, remove the check against Footer credit text.
Select the number of columns to enable in the footer. You can choose between one to four columns in the footer widget area. You can keep footer widget area disabled as well. The layouts appear as below. Once the layout is chosen, go to Dynamic sidebars and widgets from the customizer and add widgets to the columns.
1 Column
2 Columns
3 Columns (recommended layout)
4 Columns
Performance optimization
Defer the loading of your images
There is an option for that in the Hueman theme. In the customizer, navigate in Advanced Options > Performances and SEO.
Check the "Load Image on scroll" option to delay the loading of non visible images. Images below the viewport will be loaded dynamically on scroll. This can really boost speed performances by reducing the weight of long pages that include many images.
Resize and compress your images
Images can really slow down your website. The best practice is to resize and compress them before uploading them in WordPress.
Your images should not be wider than 1200 pixels for the Hueman Pro theme, make sure you resize them to fit this dimension or below.
Then I recommend a free image optimization service like Tinypng.com to compress them.
For advanced users : use a cache plugin
I would recommend the free W3 Total Cache plugin which will give you excellent results if you setup it properly. We have published a simple guide for the Hueman theme.
Recommended plugins
All the functionality that you need for your site may not be available in the core. You will need to install a few plugins depending on your site's needs. Here are some plugins that we recommend for use on your site.
Nimble Builder : create sections and column layouts live
The Nimble Builder is a lightweight drag and drop page builder designed to work in the WordPress live customizer.
Akismet
Every WordPress installation comes with two plugins pre-installed. One of them is Akismet, and we recommend it first and foremost as a must-have WordPress plugin. Even though Akismet comes pre-installed, it is not activated by default.
Akismet is a comment spam filtering service. Akismet catches blog comment and pingback spam using algorithms that learn from their mistakes and from the actions taken by participating websites. Comment moderation is a time consuming task, and Akismet can save you hours. Akismet will catch spam comments before it lands in your moderation queue as pending. This allows you to focus your energy on moderating comments by real users.
So, if you have enabled comments on your site, it might be worthwhile to activate Akismet.
Contact form : Formidable Forms
Usually a website needs a contact form for readers to communicate with the site owner. One of our favorites is Formidable Forms.
Formidable Forms is a free, simple and flexible contact form plugin. It can handle multiple contact forms as well and supports AJAX submitting, CAPTCHA, Akismet spam filtering and file uploading.
Search Engine Optimization : The SEO framework
The SEO Framework is a most complete SEO solution for your WordPress blog. With tons of features and options this SEO plugin is free and really complete. It is feature-rich and will definitely contribute in optimizing your site for getting indexed by the search engines.
Site Performances : W3 Total Cache/ WP Super Cache
Search engines consider site speed to be an important factor search rankings. This is why it is important to improve site load speed to an optimal level. Caching your website will help you improve site speed as well as balancing huge spikes in traffic.
W3 Total Cache is the fastest and most complete WordPress performance optimization plugin. Trusted by many popular sites, W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.
An alternative and equally popular plugin among our users is the WP Super Cache. Use one or the other and improve your site speed.
Website statistics : Google analytics for WordPress
Google analytics by Yoast makes it easy and convenient to track your site using the latest Google Analytics tracking code and allows you to view key Google Analytics reports in your WordPress install.
In addition to a set of general Google Analytics reports, in-depth Page reports and in-depth Post reports allow further segmentation of your analytics data, providing performance details for each post or page from your website.
E-commerce : Woocommerce
WooCommerce is a free eCommerce plugin that allows you to sell anything. It integrates seamlessly with WordPress. WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.
Image tool : Regenerate Thumbnails
By default when you upload an image to WordPress, it creates different sizes and saves them in the uploads folder. Many WordPress themes define new image sizes, but the problem is that these new image sizes are only applied on the images you upload after activating the theme. To solve this problem you need to generate new sizes for all previously uploaded images using Regenerate Thumbnails.