How to Install and Setup Human Droid WordPress Theme

Installing Theme

Human Droid is a child theme of Beans and hence you need to install Beans WordPress theme first on your website by following this guide before proceeding with the installation of this theme.

Once you have Beans theme installed, install Human Droid theme by following the steps below:

1. Download Human Droid Theme. You will get a zip file after download.
2. Go to your WordPress Dashboard and click on Appearance -> Themes.
3. Click on Add New button at the top of the Themes page.
4. Click on Upload Themebutton situated on top, next to the title.
5. Click on Choose File and select the zip file you downloaded in step 1.
6. Click on Install Now.
7. Once installed, click on Activate Theme to active the theme on your site.

Setup Homepage and Blog Page

The homepage is supposed to display your profile picture along with a short bio. The blog page lists down all the posts in your blog. By default, WordPress shows the blog posts on the homepage. We will be changing this so that our custom page gets shown on the home page and the blog is available at URLyoursite.com__/blog.

Below you can learn how to set this up:

Create Home Page

1. Create a New Page from WordPress Dashboard -> Pages -> Add New
2. In the Add New Page find the Page Attributes section on the right and select Profile Page Template in the drop-down.
3. Upload your picture by clicking on the Set featured image link in the Featured Image section. Make sure to have this image of size 830x430px or greater, as the image will need to be large enough to cover the entire area of the profile section on the homepage.
4. Do not enter any text in the page title and hit publish.
5. A new empty page with the empty title will get created. We will set this page later as the homepage.

Create Blog Page

1. Create another New Page from WordPress Dashboard -> Pages -> Add New
2. In the Add New Page give the title Blog to the page.
3. Leave other options as it is and publish the page.
4. A new blank page titled Blog will get created at URLyoursite.com/blog. We will use this page as the blog post page as described below.

Update Reading Settings

1. Now go to  WordPress Dashboard -> Settings -> Reading
2. Under Reading Settings find the section  Front page displays and select A static page as the radio option.
3. Now open the drop-down for Front page and select the Home page we created above. Note that since we didn’t give a page title it will appear as #x (no title) where x will be any number.
4. Open the drop-down for Posts page and select the blog page we created above. The page would be titled as Blog in the drop-down.
5. Click Save Changes button and then go to  WordPress Dashboard -> Settings -> General and edit the Site Title and  Tagline to suit your profile.
6. Save Changes again and then check your homepage.

Setup Social Menu

The social menu gets displayed in your profile on the homepage. To set this up follow the instructions below:

1. Go to WordPress Dashboard -> Appearance -> Menus
2. Click on Create a new menu link under the Edit Menus tab.
3. Give the menu name as  Social Menu and hit the Create Menu button.
4. Now click and expand the Custom Links section on the left.
5. Enter theURL andLink Text in Custom Links section of one of your social profile and click Add to Menu. For e.g. enterURL as https://twitter.com/templateflip andLink Text asTwitter. Similarly, add links to your other social profiles.
6. Now we need to add icons for these menu items. Find and expand Screen Options situated at the top right of the current page.
7. You will find a checkbox for CSS classes under  Show advanced menu properties. Check the check box for CSS classes
8. Expand the individual menu item in the Menu Structure section. You will find a new text box for CSS classes.
9. Enter the CSS class for each social network in the text area. For example, use  icon-facebook-square for Facebook, icon-twitter-square for Twitter and icon-linkedin-square for LinkedIn. Refer to FontAwesome icons for a complete list of icon names you can use here.
10. Now check the  Social Menu check box found at the bottom of the page under Menu Settings.
11. Now hit Save Menu and then visit your homepage to check the social menu.

Create Contact Page

1. Next, we can create a contact page for the site by going to  WordPress Dashboard -> Pages -> Add New
2. You can name this page as Contact Me or anything else that you like.
3. Contact Form can be added to the page using Jetpack Contact Form or Contact Form 7 plugin. Or you can use any other plugin that you like.
4. Publish the page. We will add this page later to the main header menu.

Create Work Pages

1. Create Work page for your site by going to  WordPress Dashboard -> Pages -> Add New
2. Name this page Work.
3. If you want to use just one page to show your work than you can add details of your work on this page and then publish the page.
4. Alternatively, you can choose to show your work in multiple pages. For doing so we will create child pages for each one. You need to follow the steps below:
   1. Create a new page for your site by going to  WordPress Dashboard -> Pages -> Add New
   2. Name this page depending on the work that you want to show on this page. For e.g. Design, Development, Blogging etc.
   3. In the Page Attributes section on the right, select Work as the Parent Page.
   4. In the Page Attributes section on the right, select Child Page Template in the Template drop-down.
   5. Add details about your work in the page and hit publish to create the page.
   6. Similarly, create other pages for showcasing your work. Don’t forget to set parent as Work and the template as Child Page Template.
   7. If you visit any of the child pages, you will see that a tab is automatically created for you to switch between the work pages.
   8. We recommend creating max 3 such pages as any more page will not get shown properly in the tabs.

Setup Header Menu

1. Go to WordPress Dashboard -> Appearance -> Menus
2. Select the Navigation (Primary Menu) from the drop-down and click on Select button.
3. This menu should already have a link to your homepage added in the menu.
4. Add more menu items by ticking the checkbox against the pages: Work (or the first Child Page of Work), Blog and Contact from the Pages section on the left.
5. Expand the individual menu item in the Menu Structure section. You will find a text box for CSS classes. (Similar to the one we used for Social Menu)
6. Enter the CSS class for each menu item in the text area. For example, use  icon-home for Home, icon-briefcase for Work and icon-pencil for Blog and icon-envelope for Contact. Refer to FontAwesome icons for a complete list of icon names you can use here if you are adding or changing menu items.
7. Make sure that the  Primary Menu checkbox is checked at the bottom of the page under  Menu Settings.
8. Now hit  Save Menu and then visit your homepage to check the header menu.