First steps with the Hueman WordPress theme

Welcome! It looks like you have decided to use the Hueman WordPress theme, and this is a smart choice :)

Did you know that you could check all the features of the theme in the live Hueman Theme demo ?


Note for users of the previous "Full" version of the Hueman theme available on Github (v2.5+)

The additional features like shortcodes and Share Bar have been moved into a free WordPress plugin available on Github and named Hueman Addons

You can download it here. (it will soon be published on the WordPress.org plugin repository and available directly from your WP admin like any other plugins)

The shortcodes are documented on the Github page.


Now that you have chosen the theme, what next? Here we are, to help you customize the theme and build your site to its best.

Here's a quick overview of this doc content:

  • Installation
  • Upload a Header Logo and a Site Icon
  • Display your menus
  • Personalizing colors and font
  • Setting your social profiles
  • Choosing your layouts
  • Designing your website footer
  • Recommended plugins
  • Navigate to the customizer panel

1. Installation

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.

2. Navigate to the customizer panel

You can customize the theme to suit your needs through the customizer panel. 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.

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

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

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

4. Display 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.

5. Personalizing colors and font

  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.

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

7. Choosing your layouts

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.

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.

1 Column - no sidebars

2 Columns Left - Content is to the left and single sidebar on the right

2 Columns Right - Content is to the right and single sidebar on the left

3 Columns Middle - Content is on the middle and one sidebar on either sides

3 Columns Left- Content is on the left and both sidebars on the right

3 Columns Right - Content is on the right and both sidebars on the left

8. Designing your website 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

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

    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 : WordPress SEO by Yoast

    WordPress SEO by Yoast is the most 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.

    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.

    Newsletter subscription : MailChimp for WordPress

    MailChimp is used by more than 7 million people to design, send, and track email marketing campaigns. Manage your subscribers, newsletters and campaigns with MailChimp.

    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.

    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.

    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.