Skip to content
SueSmith edited this page Nov 21, 2014 · 2 revisions

Mozilla Hive WordPress Theme

This guide walks you through the process of installing the Hive theme in your WordPress site.

Install the theme

Download the theme as a zipped file from the GitHub repo - you should see the Download ZIP button to the right of the repo homepage.

In your WordPress installation, browse to the Appearance > Themes section. Click Add New then Upload Theme.

upload-theme

Select the zipped folder you downloaded from GitHub to upload it. WordPress should display the progress of your installation. Once the theme is installed, click to Activate it.

activate-theme

If you visit the site at this stage it will look a bit messy - don't worry, you need to carry out a few more steps to get it working.

Install the plugins

The Hive theme relies on a few plugins you will need in your WordPress install to fully utilize it. Browse to the Plugins > Add New section.

You can install the following plugins by searching for them in the directory or downloading them directly:

A couple of the required plugins are premium - if you're developing a Hive network site, get in touch via [email protected] for a copy of them. Otherwise, you will need to purchase a licence for them:

To install a plugin from the directory within WordPress:

  • Click Add New
  • Search for the plugin
  • When you've found it, click Install Now
  • When it's installed, click Activate Plugin

install-plugin

activate-plugin

To install a downloaded plugin from a zipped file:

  • Click Upload Plugin
  • Browse to the zipped folder containing the plugin and click Install Now
  • Once installed, click Activate Plugin

upload-plugin

select-plugin

Add branding

Navigate to Appearance > Theme Options to set your logo and other general site images. Click the button to upload each image you need, including its location in the relevant field. Save the changes when you are done.

theme-options

Structure your site

You may not want to use all of the features this theme supports - the steps below outline how to use each of them, so ignore any sections you don't need.

Create your pages

To create a home page, browse to Pages > Add New. Give the new page the name "Home" and select Home page from the Template drop-down list. Click to Publish your page.

home-page

To create a landing page for the blog, add another new page, entering "Blog" as the name and selecting Blog Landing Page from the Template drop-down list. Publish the page.

To create a landing page for the portfolio, add another new page, this time with "Portfolio" as the name and Projects Landing Page as the Template. Go ahead and publish this page too.

Additional setup steps you may need to carry out include:

  • Setting your site URLs to include the page name by navigating to Settings > Permalinks, selecting Post name and saving the changes.
  • Setting the site home page by navigating to Appearance > Customize > Static Front Page and selecting A static page then Home from the Front page drop-down list.
  • Configuring your plugins, particularly ShareThis, JetPack and WordPress SEO - navigate to each one in the Plugins section.

Import the custom fields

Some aspects of the Hive theme are dependent on custom fields which automate features such as the home page slider and portfolio display. To import these you need the XML file you will find in the root directory of the zipped theme folder you downloaded from GitHub - unzip the folder to locate it: "hive-custom-fields.xml".

In WordPress, navigate to Tools > Import and select WordPress.

wordpress-import

Browse to the "hive-custom-fields.xml" file and click Upload file and import.

import-data

The custom fields you are importing are associated with an author, so you need to map this to an author on your own installation, for example "admin".

map-author

Submit and your installation should now provide access to the custom fields.

You may need to carry out an additional step to access the featured article slider on your home page. By default it will apply to the home page, but depending on what was in your WordPress installation when you added the theme, this may not happen automatically. Navigate to Custom Fields then select Homepage Options. Ensure that the Location section indicates Page "is equal to" Home. Click Update if you changed the selected options.

Once you have some posts or projects on your site you will be able to highlight them in the home page slider by editing the home page - which should now include a Featured Articles section.

Create your menu

To set your menu items, navigate to Appearance > Menus. Give your main menu a name and click Create Menu. Select the pages you want to appear in the menu by checking each checkbox and choosing Add to Menu. Click and drag to reorder your menu items and select the Primary Menu checkbox. Save your menu and it should now appear on your site.

menu

Configure your sidebars

To configure what appears in your site sidebars, navigate to Appearance > Widgets. The items in the Social Media section appear near the top of the page, with the Blog Sidebar appearing on blog posts and the Generic Sidebar on other pages. Drag the widgets between the sections to create the appearance you want. You can configure the detail of each widget by expanding it, making your changes then clicking Save.

widget-sidebars

Your site should now be set up with a similar structure and appearance to the Hive NYC site.

See also Using the Mozilla Hive WordPress Theme.