First steps with the Hueman WordPress theme

Welcome!

It looks like you are interested by the Hueman WordPress theme, or even better, that you've decided to use it to create your website. In both cases, the following article may be interesting for you.

Installation of the Hueman WordPress theme

This goes without saying, but you need of course to have  WordPress installed to start using the Hueman WordPress theme. :)

Installing your theme is pretty easy! There are two methods to install the theme. You can either install it directly from the repository at wordpress.org or you can install manually by downloading the theme first.

Method 1:

1. Go to Appearance > Themes from WordPress admin Dashboard.
2. Click on the Add New button.
3. Type in "Hueman" in the Search box and press enter.
4. From the results, hover over the Hueman theme and click on the Install button.

Method 2:

1. Go to the Hueman theme directory on http://wordpress.org/.
2. Click on the Download button.
3. After downloading you should have a hueman.zip file. This is a compressed file containing all of the required templates and images required for the theme to function properly.

Upload the theme

1. Go to Appearance > Themes from the WordPress admin Dashboard.
2. Click on the Add New button.
3. Click on the Upload Theme link.
4. Select the hueman.zip file.
5. Click Install Now.

Activate the theme

1. Go to Appearance > Themes from the WordPress admin Dashboard.
2. Hover over the theme thumbnail and click on the Activate button.

Adapting existing content

If you are changing theme from another one and have plenty of existing content, menus and widgets on the website already, you need to do the following after having activated the new theme:

1. Go to Appearance > Menus and add the menu areas back to where you want them. The menus will be hidden until you add links to them. This way you can choose how many menu areas to show on the website.
2. Go to Appearance > Widgets and add the widgets back to your sidebars, or use some of the new custom widgets.
3. Install the Regenerate Thumbnails plugin and activate it. Then go to Tools > Regenerate Thumbnails and run it once. This will crop existing thumbnails to the new sizes used in this theme.
4. If you have not used the Featured Image feature in your earlier theme, you can use the Easy Add Thumbnail plugin to automatically set featured images for old articles.

Install the Hueman Addons free plugin

The  Hueman Addons is a free WordPress plugin and the companion of the Hueman theme. The plugin has been created because it includes features considered as plugin terrirory that can’t be included in a WordPress theme as per the WordPress.org platform rules.

The Hueman theme reveals its full potential with the  Hueman Addons plugin and WordPress version 4.7 +. If you did not install the Hueman Addons plugin yet, you can do it from your WordPress admin in Plugins > Add New.

What does the Hueman Addons actually add ?

The Hueman Addons plugin allows you to customize any page of your website ( home, single post, single page, list of posts, serah results, etc... ) independently from the others.

When you want to change the design of a particular page, navigate to this page of your website, and then click on the customize link of the top admin bar. This will open the live customizer

In the customizer, you'll see links allowing you to set the value of an option for a given context.

This is for example very useful if you need to display a specific menu only on one page, or if you need to set a specific banner header image for a post.

It can also be used to set specific colors, footer layout, site layout by page.

In fact almost all options of the customizer can be set at a local level, including the custom css.

Navigate to the WordPress live customizer

You can customize the theme to suit your needs through the  live customizer. To open the customizer panel, do any of the following.

1. 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.

   

2. If you go to the admin Dashboard, you will be presented with a welcome message and a Customise your site button. Click on this button.

   

3. From the admin Dashboard, click on Appearance > Customize from the left navbar.

   

The customizer panel is opened up and there are several options under different heads.

Uploading a Header Logo and a Site Icon

Add a Logo to the Header

1. from the customizer, click on Header > Header design: logo, background ...
2. Under the option Custom Header Logo, click on the Select Image button.
3. Open the logo image file.
4. Crop the image to suit your needs in the Image Cropper that appears.
5. You can see the logo image replacing the site title immediately on the preview.
6. Click on Save and Publish.

Add a Site Icon

1. From the customizer, click on Global Settings > Site Identity: Title, Tagline and Site Icon
2. Under Site Icon, click on the Select Image button.
3. Open the Site Icon image file.
4. Crop the image to suit your needs in the Image Cropper that appears.
5. Click on Save and Publish.

Creating and displaying your menus

1. From the customizer, click on Menus.
2. Click on the + Add a Menu button.
3. Enter a name for the menu.

   A list of pages, posts and other items appear. Choose those items that you want to be part of the menu and add them.Check against the menu location where you want the menu to appear. Hueman theme comes with three locations - topbar, header and footer.Click on Save and Publish. If you choose the menu location as header, the menu appears on the bottom of the header as below.If you choose topbar as the menu location, the menu appears as belowIf you choose footer to be the location, it appears like this.Add more menus if you need, and assign them to one of the available locations.

4. Click on Save and Publish.

Personalizing colors, font and website background

1. From the customizer, click on Global Settings > General Design Options: Font, Color ...Under the option Font, choose from the 22 fonts available in the drop-down box.
2. Choose the colours for Primary Color, Secondary Color, Topbar Background, Header Background and Header Menu Background. Clicking on the Current Colour opens up a colour picker for you to choose from.

You can also set a custom body background in the same section of settings. Pick a color or upload an image for your website background and save.

Setting your social profiles

1. From the customizer, click on Social Links.
2. Click on the Add New button. Change the defaults. Choose the Social icon from the dropdown box.

   Enter the full url of your profile under Social link. Type the Title you want to be displayed on mouse hover over the icon. Choose the Icon color. Finally, check against Link target so that the link is opened in another tab.You can delete a profile by clicking on the trash icon. You can edit/modify by clicking on the pencil icon.

3. Click on Add New to add more profiles.
4. Your social links appear on your site like this.

Setting the column layout of your pages

Setting the column layout of your pages

Hueman theme offers six different column layouts. You can choose any of these for each individual post/page as well as a group of pages.

Site wide column layout settings

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.

By page / post column layout

You can also choose a different layout for individual posts/pages. In the Post/Page editor, there is a Layout metabox at the bottom. Choose the preferred layout from here.

Designing your website's 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

Speed up your website : enable the option for images to load on scroll

The most simple way to improve your website speed performances with Hueman is to load images only when they become visible. We have implemented a specific feature for that.

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, typically a post list page with widget rich sidebars.

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

Nimble Builder is a lightweight drag and drop page builder designed to work in the WordPress live customizer.

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 complete SEO solution for your WordPress blog. With tons of features and options this plugin is indispensable. It is feature-rich and will definitely contribute in optimizing your site for getting indexed by the search engines. It handles everything you need to properly share your posts on social networks like Facebook, Twitter and Instagram.

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.

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.

Forum : bbpress

Several plugins provide the forums feature for WordPress. But the special one is bbpress which is a light-weight stand-alone alternative for other forum plugins.

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.

Going further

With that, I hope you have your site set up and functional. There are many many more things that you can do to tweak your site's appearance and functionality. But, if you already like what you have, you can also leave it as you have configured it now with the steps outlined above. After all, beauty lies in the beholder's eyes.

If you want to get daring and try further things, check out our other tutorials. Enjoy your journey of setting up your site!

Doc created by: Menaka S.