How to install and setup the Hueman theme demo content

If you want to understand the Hueman WordPress theme and its myriad features better, you can try to import and setup the demo content of the theme.

1. Importing the demo content

  1. Start with a fresh WordPress installation.
  2. Install the Hueman theme.
  3. The demo content is available in this github repository:

  4. Download the zip file and extract it. It has four files of which hueman-demo-content.xml is one.
  5. From the WordPress admin dashboard, go to Tools -> Import.

  6. Choose WordPress from the list of systems. It is at the end of the list.
  7. If you do not already have the WordPress Importer Plugin installed, you will be prompted to install it. Click on Install Now to install the plugin.

  8. Activate the plugin and Run the Importer.

  9. You will be prompted to choose the file to import from. Choose hueman-demo-content.xml which was downloaded and extracted earlier.

  10. You will be asked to choose an author for the demo content. You can let it be the author in the demo, or assign posts to an existing user or create a new user for the purpose. Here, an existing user Potter is chosen. Click on Submit.

  11. On successful import, you will get a success message.

  12. An import typically imports the following.
    • posts,
    • pages,
    • comments,
    • custom fields,
    • terms,
    • navigation menus
  13. Visit the site. You will note that all the above-mentioned content have been imported. Though all the content has been imported from the demo site, further fine-tuning is required to get the site to look like the demo site.

2. Setting up the menus

  1. To set up the menus, go to Appearance-> Menus from the admin dashboard.
  2. You will find that there are three menus that are already created and three locations present in the theme.
  3. Choose Footer Menu to edit.

  4. Choose the theme location Footer for the Footer Menu. Click on Save Menu.

  5. In a similar manner, choose the Header Menu and set its location to Header and choose the Topbar Menu and set its location to Topbar.
  6. Click on Save Menu to save the changes.
  7. Visit the site and you can see that the menus are set up.

3. Setting up the customizer options

  1. Though the posts and menus are in place now, there are some nittygritties in the form of customize options that need to be set up to get the same effect as the demo site.
  2. Firstly, move the default Hello World post to trash.

3.1 Global Settings

  1. Click on Global Settings->Site Identity : Title, Tagline and Site Icon.
  2. Change the Site Title and the Tagline.

  3. Click on Select Image under Site Icon and choose the favicon image already imported.

  4. Go to Global Settings->General Design Options : Font, Colors,... If you want to change an of these settings - font, primary and secondary colors, background colors or sidebar width, you may do so here. The demo site has the defaults in this section.
  5. Go to Global Settings->Social Links. Click on Add New. Choose the social media icon from the dropdown box and enter the Social link url.

  6. Click on Add New and add more social links.

  7. The rest of the sections under Global Settings are left to the defaults in the demo site.
  8. Save and Publish.

3.2 Header

  1. Go to Header->Header Design : logo, background, ...
  2. Click on Select Image under Custom Header Logo.
  3. Choose the already imported logo of demo site.

  4. Let the rest of the settings be the defaults.
  5. Under Header->Header Advertisement Widget, uncheck against .
  6. Save and Publish.

3.3 Content

  1. From the customizer panel, go to Content.
  2. Layout options for the main content, Single Posts Settings and Thumbnails Settings have the default settings intact.
  3. Go to Sidebars : Design and Mobile Settings. Against Mobile Sidebar Content, choose Hide secondary sidebar from the dropdown.

  4. Go to Blog Design and Content. You can change the Blog Heading and Sub-Heading. As you change it, you can see it reflecting in the preview.

  5. Under the Featured Posts section, you can choose the category to feature from the dropdown box, the featured post count and other finer details regarding the featured posts.

3.4 Footer

  1. From the customizer panel, go to Footer->Footer Design: Logo, layout, ... Choose 3 Columns from the dropdown against Select columns to enable footer widgets.
  2. In addition, uncheck Display a full width widget area in your footer.
  3. Subsequently, click on Select Image and choose the custom logo image for the footer.

3.5 Dynamic Sidebars and Widgets

From the customizer panel, go to Dynamic Sidebars and Widgets. You should see five widget areas.

3.5.1 Primary

  1. Click on Primary. Click on Add a Widget. Choose Hueman Dynamic Tabs and set the options as shown below.

  2. Add the Hueman Posts widget. Enter the title and set the options as shown below.

  3. Save and Publish.

3.5.2 Secondary

  1. Go to Dynamic Sidebars and Widgets->Secondary.
  2. Add the Text widget. Enter the title and the html as shown below.

  3. Add the Hueman Posts widget. Set up the options as given here.

  4. Finally, add the Hueman Dynamic Tabs widget again. The options are as shown below. This is for displaying the comments.

3.5.3 Footer 1

  1. Go to Dynamic Sidebars and Widgets->Footer 1. Add the Recent Posts widget and set it up as below.

3.5.4 Footer 2

  1. Go to Dynamic Sidebars and Widgets->Footer 2. Add the Recent Comments widget and set it up as below.

3.5.5 Footer 3

  1. Go to Dynamic Sidebars and Widgets->Footer 3. Add the Hueman Dynamic Tabs widget again and set it up as below.

4. Setting up specific pages and posts

Usually, pages and posts are imported without any issues. Sometimes, some settings may not be automatically reproduced. It might be useful to check if the post/page format (audio/video/gallery/image) is proper, the layouts are fine and the widget zones are intact.

5. Setting up the plugins

Finally, you have to set up the plugins. Install and set up the following plugins.

5.1 Contact Form 7

You may want to check and set up the contact form's design, mail settings and messages.

5.2 Hueman Addons

The Hueman addons plugins adds a sharebar to all posts and also provides shortcodes.

5.3 WP-PageNavi

WP-PageNavi provides numbered pagination for the post lists. You can alter the settings by going to Settings->PageNavi from the admin dashboard. Also, you can set the number of posts per page by clicking on Settings->Reading. The demo site has 8 posts per blog page.

5.4 Regenerate Thumbnails

The thumbnails sizes may be different immediately after import.

To make them uniform, firstly, change the thumbnail size to 300px by 300px as shown below in the Settings->Media section. Save Changes.

Install the Regenerate Thumbnails plugin.

Now, go to Tools->Regen. Thumbnails and regenerate the thumbnails. On successful regeneration the site will have uniformly sized images in all posts.

This plugin allow users to view large images in a lightbox effect.

Change the options by going to Settings->Responsive Lightbox.

5.6 Anti-spam

Install the Anti-spam plugin to remove spam in comments.

5.7 W3 Total Cache

The caching solution for your site that will improve your site's performance. Check out our  complete setup guide for W3 Total Cache.

With a hands-on approach of setting up the demo site, you are now well-equipped to use the Hueman theme and its umpteen features on your own site. Enjoy the theme!

Doc created by: Menaka S.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles