The Hanger - Theme Documentation

#

## Thank you for choosing The Hanger! Whether you’re a business owner or a fellow developer creating websites for clients, we’re hoping the theme will help you reach your goals.

#### Useful Links:

Live Demo / Online Documentation / Support

## General Guidelines

↑ Table of Contents

## Installation and Setup

You must be excited about starting your new project, so let's just get on with it. It won't be long until you get it to the point when you can actually start working on your site. The following steps will get you there.

### 1. Get the Theme’s Files

Save the theme's files on your computer first. Navigate to the Downloads section in your Envato account, that's where all your purchases are kept, then click the green Download button to grab the theme, make sure you’re getting the “Installable WordPress file only”.

### 2. Upload and Activate the theme

Now that the theme's files are saved on your computer, you can log into WordPress administration dashboard to upload and install it.

- Navigate to Appearance > Themes and click the “Add New / Upload Theme”
- Upload the file you’ve downloaded from ThemeForest in the previous step and click Install Now.
- Once the file has been uploaded click the Activate link.

### 3. The Setup Wizard

The theme comes with a setup wizard making it really easy to install the plugins coming with it and import the demo content in two simple steps. As soon as the theme is activated, the setup wizard will start automatically.

This is what you should be seeing on your screen:

#### Setup Wizard Step 1:
Plugin Installation

The following plugins are required by the theme’s demo imported, so it can import dummy content in the next step.

#### Setup Wizard Step 2:
Demo Content Import

The importer will help you start with the pre-built layouts from the demo and dummy content such as product pages, blog posts and widgets. In case you're using the theme on an existing site you may not want to import the demo content. In that case, simply skip this step.

### You can start working on your site now

Good luck with your project!

↑ Table of Contents

## How to install the plugins coming with the theme?

Navigate to Appearance > Install Plugins for the list of plugins coming with the theme.

↑ Table of Contents

## How to import the demo content?

Importing the demo content is part of the setup wizard but it can also be done using the One Click Demo Import plugin, by navigation to Appearance > One Click Demo Import.

The importer will help you start with the pre-built layouts from the demo and dummy content such as product pages, blog posts and widgets.

### Cannot find the Import Demo Data section?

Sounds like the One Click Demo Import plugin is not installed/activated. Navigate to Appearance > Install Plugins to Install and activate it.

↑ Table of Contents

## How to update the theme?

Connect your Envato Account to your WordPress site using the Envato Market WordPress Plugin to receive updates for all your ThemeForest and CodeCanyon purchases.

If the plugin is already installed and activated you should see the Envato Market section in your WordPress administration dashboard. Follow the steps on screen to enable updates.

Once the Envato API connection is made from the Settings page, a list of available Themes will be shown. This will list all WordPress Themes that have been purchased through the Envato Market / ThemeForest. Any available theme updates can be applied here or from the standard WordPress update page at Dashboard > Updates.

### Cannot find the Envato Market section?

Sounds like the Envato Market WordPress Plugin is not installed/activated.
Go to Appearance > Install Plugins to Install and Activate it; or download the zip file and manually install it via Plugins > Add New.

### How to get the latest version of the theme as a zip file?

You can always grab it from the Downloads section on ThemeForest.

## Customization

↑ Table of Contents

## The Customizer

The Hanger extends the native functionality of WordPress with lots of customization options. Find them all neatly organized into categories under Appearance > Customizer.

↑ Table of Contents

## Menu Locations

Navigate to Appearance > Customize > Menus to view the list of all available Menu locations in the theme.

### Top Bar Menu

### Navigation Button

Inserts menu inside the Navigation Button.

### Main Navigation

### Secondary Navigation

### Footer Menu

↑ Table of Contents

## How to create Mega Menus?

The built-in Mega Menus can replace the standard drop-down navigation without the use of a plugin or custom coding. A mega menu can be activated on any parent menu item in the Main Navigation.

To turn on a Mega Menu, navigate to Appearance > Customize > Header > Mega Menu and you will see a list of all the menu items assigned to your Main Navigation slot:

You can now click on any of them to enable Mega Menu. This will replace the standard WordPress navigation such as children items, those will no longer show.

There are four types of Mega Menus you can create. Each Mega Menu type comes with its own set of options for further customization:

Repeat this process for each menu item that you want to apply a Mega Menu item to.

↑ Table of Contents

## How to use the Navigation Button?

The Navigation Button / Categories Browser is meant to provide better exposure of the product categories in your WooCommerce site. The Navigation Button can be used to display product categories and even a standard menu.

To enable the Navigation Button go to Appearance> Customize
then open up Header > Mega Button > Settings to turn it on.

You can choose which WooCommerce categories you wish to display, if any, and also arrange them in any order you prefer. Additionally you can enable the menu location for an extra menu slot which will show up in the Navigation Button location.

Once you're done adding items to your Navigation Button you may also enable Mega Menus on any of the items by navigation to Customize > Header > Mega Button > Mega Menu and choosing an item to enable Mega Menu on.

↑ Table of Contents

## How to disable the Sticky Header

When enabled, the sticky header feature will display a minimized version of the header while the user scrolls down through the page.

The option you're looking for can be found by navigating to
Appearance > Customize > Header > Sticky Header:

↑ Table of Contents

## How to upload my Logo

It's probably one of the first things you may want to do when you start customizing the theme to align its looks to your brand. To upload your logo, navigate to Appearance > Customize > Header > Logo.

The Alternative Logo will be displayed on the mobile navigation.

## Blog

↑ Table of Contents

## How do I setup the Blog page

To setup the blog page, in your WordPress admin panel, navigate to Settings > Reading. Assuming you already have a page named "Blog", for the Front page display, select "A static page" and choose your "Blog" page as the Posts page. This is what you should be seeing on your screen:

↑ Table of Contents

## Blog — How to add a Sidebar?

Navigate to Appearance > Customize > Blog > Blog Archives and Enable the Blog with Sidebar option.

### How to add widgets to Blog sidebar?

You have a a list of Widgets you can choose from when it comes to making the sidebar functional, for this go to Appearance > Widgets. Choose the ones you need and add them to the Blog Sidebar:

### How to add a Sidebar to your Blog Post.

Navigate to Appearance > Customize > Blog > Single Post
and Enable the Blog Sidebar option.

↑ Table of Contents

## Blog — Highlighted Posts

This feature highlights the first three posts in the Blog Page. To enable it, navigate to Customizing > Blog > Blog Archives and enable the option using the switch button.

The Highlighted Posts can be seen at the beginning of the Blog Page:

↑ Table of Contents

## Blog — Featured Posts

In the Blog Page you can find the area that displays four featured posts. See below the Featured Posts area:

### How to add featured posts to Blog Page?

Navigate to Posts > All Posts and select a post that you want to display in the Featured Posts area, add the Featured tag in the Tags input and click Add.

↑ Table of Contents

## Blog — Remove featured image in blog posts

You can choose to remove the post featured image inside single post pages. To do that navigate to Appearance > Customize and open up the Blog > Single Post section.

## Page Building

↑ Table of Contents

## Homepage Setup

To set a different page as the homepage of your site, go to Settings > Readings. Select "A static page" and choose one of the existing pages to be served as the Front Page of your site.

The options in the Homepage drop down menu are the actual pages that can be found under the Pages section in your WordPress administration dashboard. They're either manually created by you or imported with the demo content.

↑ Table of Contents

## Pages — How to remove the page title?

You can choose to display or hide the page title. When you're editing a page, this is what you should be looking for:

If you have troubles finding this, navigate to Screen Options and check Page Options.

↑ Table of Contents

## How to turn off the Header / Footer in a page

You can choose to turn off the header on some of the pages you're building. This is what you should be looking for on your screen when editing a page:

If you can't see this, navigate to Screen Options and check Page Options.

↑ Table of Contents

## How to turn off the comments?

To turn off the comments for a WordPress page, find the Discussion box at the bottom of the screen and simply uncheck the "Allow Comments" option.

### Cannot find the Discussion box?

Don't worry about it, just head on to the "Screen Options" at the top of your screen and make sure it's enabled for view.

↑ Table of Contents

## WPBakery Page Builder

The Hanger is coming with WPBakery's Page Builder as its page building pluing. It's a premium plugin that comes for free with the theme so it doesn't require a license validation.

For a full guide on how to use the page builder check out the plugin's Knowledge Base at https://kb.wpbakery.com/

## Shop

↑ Table of Contents

## WooCommerce

WooCommerce is the eCommerce engine of the theme, the most popular eCommerce solution for WordPress. If you're new to WooCommerce, make sure to get though the online documentation to learn everyting you need to know about creating, managing and selling products online.

1. Installation and Updating
2. Settings & Options
3. Set Up Products
4. Sell Products
5. Shipping
6. Managing Orders
7. Sales Reports

↑ Table of Contents

## Widget — eCommerce Info

This is a custom widget coming with the theme and its purpose is to help display eCommerce specific information in any of the widget areas.

To place the widget in a widget area, navigate to Customizing > Widgets and select the area where it will be displayed. In the selected area press the Add a Widget button and search for eCommerce info.

↑ Table of Contents

## Shop — Product categories widget with icons

This custom widget will display Product Categories with icons. To place the widget, navigate to Customizing > Widgets and select in which area the widget will be displayed. In the selected area press the Add a Widget button and search for Product categories with icon.

↑ Table of Contents

## Shop — Icons for Product Categories

Navigate to Products > Categories and select a category. In the Edit Category section, find the option Icon. Click the previewed icon button to open the icon picker window, you can search for a specific icon and chose the desired one.

### How to add custom category icons?

To add custom icons, navigate to Products > Categories and select a category. In the Edit Category section, find the option Icon Type and choose Custom Icon. You can upload custom icons by clicking the Upload/Add image button.

↑ Table of Contents

## Shop — Change the No. of Product in the Shop

To set up the shop to display a different number of items per row, navigate to Appearance > Customize > WooCommerce > Product Catalog. This is what you should be looking for on your screen:

↑ Table of Contents

## Shop — Display Type: Categories, Products or Both

### Shop Page — Display Type

Once you've decided to go with a different look for your Shop page, you can navigate to Customizing > WooCommerce > Product Catalog > Shop page display and choose one of the following options:

### Product Categories — Display Type

Also by navigating to Customizing > WooCommerce > Product Catalog > Category display, you can find the option to change what to show on your category pages:

## Display Type for a specific category

The options above will be applied to all categories. To change the display style for a specific category, edit the category you're after and find the Category Display Dropdown:

↑ Table of Contents

## Shop — Sidebar Setup

### How to enable the shop sidebar?

The Shop Sidebar is an actual WordPress widgets area and it should show up as soon as it's populated with at least one widget. Navigate to Appearance > Customize > Shop > Layout to enable the Shop Sidebar.

### How to Add Widgets?

Navigate to Appearance > Customize > Widgets > Shop Sidebar and press Add Widget button, you can add widgets by clicking the available widgets.

### How to add a sidebar on the Single Product Page?

The sidebar can also be displayed on the Single Product Page, you can navigate to Appearance > Customize > Product Page and choose one of the options presented below:

↑ Table of Contents

## Shop — Product Image Sizes

If you installed the theme on an existing site, you need to make sure the product image sizes in WooCommerce will fit your newly installed theme.

### Where can I find the Image Size Settings for Products?

In your WordPress admin dashboard, navigate to Appearance > Customize > WooCommerce > Product Images.

There is no fixed size to be set for the product images, but you may want to increase or decrease the size. For example, if the images are looking blurry or pixelated, you'll need to increase the size to avoid having small images being stretched.

↑ Table of Contents

## How to enable filters in Shop

The Shop Filters area will show up as soon as it's populated with at least one widget. Navigate to Appearance > Customize > Widgets > Shop Filters and press Add Widget button, you can add widgets by clicking the available widgets.

To preview the Shop Filters click the Filters button.

## Support

↑ Table of Contents

## How to get Support?

If you have any questions or run into any issues with the theme please reach out to the support team via: thehanger.wp-theme.help. We're always happy to help.

↑ Go To Table of Contents