First of all, we want to say thank you! We are very grateful that you have chosen our theme for your website. We will do everything we can to provide you the best support possible. Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need know to use HRG Host Theme. Feel free asking us if you need more help. If you are unable to find your answer here in the documentation, please search our Support Forum and watch our Video Tutorials. If you still can't find it, you can open a new topic on our Support Forum with all the details we need.
Video Tutorials - top
Below is a list of our videos, there were not recorded specifically for this theme but they are universal and you can learn from them the basic theme usage.
Folder Structure - top
HRG Host Theme Folder Structure:
- nrghost.zip - contains all the files required for the theme to run & install (also the main CSS file called 'style.css').
- documentation - this folder contains the help files (which you are currently reading),
Getting Started - top
In this section we will go over the process of setting up WordPress environment, next I will show you how to install and activate your brand new theme. Finally you will learn how to setup all of the key features of HRG Host theme.
Preparing WordPress - top
If you already have WordPress installed on your server just skip to the next section. If you haven't yet installed WordPress on your server here you will find a complete guide on this topic. Just follow the steps and you will be ready in a blink of an eye with your shiny new WordPress website.
Installation and Theme Activation - top
Each WordPress Theme can be installed in this ways: via ftp client, through the admin panel:
Installing WordPress Theme via FTP client:
- unzip the 'nrghost.zip' package (the zip package is inside the folder you have downloaded from ThemeForest),
- connect to your server,
- navigate to the folder where your WordPress is installed,
- go to wp-content/themes/,
- upload the 'HRG Host' folder into the 'themes' directory (the path will look like this: wp-content/themes/HRG Host),
- open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/),
- login to your wp-admin panel then from the sidebar on the left choose 'Appearance',
- under 'Appearance' choose 'Themes',
- find the 'HRG Host' theme and click the 'Activate' button next to it.
Installing Theme via WordPress Admin Panel:
- open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/),
- login to your wp-admin panel then from the sidebar on the left choose 'Appearance',
- under 'Appearance' choose 'Themes',
- at the top click 'Add New' tab,
- click the 'Upload Theme' link,
- choose fife and click Install Now
- after uploading it will be installed automatically
- after the installation you will be able to activate the theme: to do this click the activation link.
Required Plugins - top
After installing and activating the theme you will see a yellow popup at the top of the page. Saying: "This theme requires the following plugins..." please click the 'Begin Installing plugins' link. You will be redirected to 'Install Required Plugins' page, here you will find all of the theme required plugins. To install them just check all of them and from the drop down select install once installed do the same to activate them.
After installing plugins you need to activate them. So Click "return to Required Plugins Installer".
Select all the plugins, choose "Activate" in select field and click "Apply".
Required plugins:
- Contact Form 7 - can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.
- HRG Host Plugins - includes required Page types and Visual Composer Shortcodes.
- Visual Composer - this is the great page builder that comes with this theme.
- Subscribe Form - a plugin for subscribe forms.
- WHMCS Bridge - a WHMCS Bridge plugin integrates your WHMCS support and billing software into WordPress. Documentation here
Visual Composer - page builder plugin. It takes full control over your WordPress site with Frontend and Backend editors. Build any layout you can imagine with drag and drop page builder plugin – no programming knowledge required.
Import Demo Data - top
By installing the demo content, your theme will look like the one you see on our demo. This install is not necessary but will help you get the core pages, categories and meta setup correctly. This action will also let you understand how the theme works by allowing you to modify a content that is already there rather than creating it from scratch. With the theme installed and activated go to Appearance>Import Demo Data. Select Demo Site > HRG Host Demo, and Import Type > All. Press the Import button to start importing the content.
Yoe need to wait for a few minutes when demo content is importing. Then you'll see the notice: All done. Have fun!.
Options - Theme Options - top
After installation and activation it is time to set up your website. First thing you will notice is the 'Theme Options' Tab added into the WordPress Admin sidebar. This section contains all of the custom HRG Host options (see image bellow). The default options set in the panel are similar to those in the ThemeForest preview.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save' button at the top of the panel, otherwise your changes will be lost.
In tab you will find all of the basic settings divided into few sections:
General
- Show preloaderb> - switch ON or OFF to turn on/off animation while site is loading.
- Website color scheme - you can select colol scheme for site.
- Tracking Code - you can set your track code script here.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Header
- Favicon - add your favicon.
- Site Logo - you can upload your site logo
- Enable header advertising block (can be changed for every page individually) - switch ON or OFF to turn on/off header advertising block.
- Header Advertising Block - you can type text to advertising block here.
- Enable header additional menu - switch ON or OFF to turn on/off header additional menu.
- Header additional menu - you can create and edit additional menus in header.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Footer
- Enable footer sidebar - you can switch On/Off to (Show or Hide) footer sidebar.
- Enable footer socials - you can switch On/Off to (Show or Hide) footer social network links.
- Enable footer menu - you can switch On/Off to (Show or Hide) footer menu.
- Footer Copyright Text - you can Customize your footer text.
- Enable footer bottom line - you can switch On/Off to (Show or Hide) footer footer bottom line.
- Footer bottom line - you can create and edit additional menus in footer bottom line.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Single
- Show related posts on single - you can switch On/Off to turn on/off view of relted posts as single.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Register / Login
- Select Login/Register page - you can select login or register page here.
- Show Login/Register buttons in header - you can switch On/Off to (Show or Hide) Login/Register buttons in header.
- Login form title - you can set title for your Login form.
- Login form description - you can set description for your Login form.
- Register form title - you can set title for your Register form.
- Register form description - you can set description for your Register form.
- Recovery form title - you can set title for your Recovery form.
- Recovery form description - you can set description for your Recovery form.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Socials You can create and edit additional menus in footer bottom line.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Custom code
- Custom CSS - you can add your own CSS code.
- Custom JS - you can add your own JavaScript code.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Documentation
You can find link on this documentanion here
Backup You can Import a Backup your options setting to this theme and/or Export and Download Backup options settings from this theme using this section.
You can Reset All Option if it required.
Notice: Before leaving the 'Theme Options' tab make sure to click the 'Save Changes' button at the top of the panel, otherwise your changes will be lost.
Content - top
Creating and Editing Pages - top
There is a video tutorial corresponding to this section of the documentation - Creating Pages
Reading settings. Follow Settings in WordPress Admin Panel and select Reading. Then choose: A static page and select Front page and Post page. Make sure to click 'Save Changes' button, otherwise your changes will be lost.
Creating page. To create pages click the Pages tab in the WordPress Admin Panel. To create new page click the 'Add New' button.
Enter the page title. Fill the page with all necessary you need. You can also select Featured image. Before leaving, make sure to click the 'Publish' button at the right side of the panel, otherwise your changes will be lost.
There is a video tutorial corresponding to this section of the documentation - Creating Menu
To setup the Menu first you need some pages, if you haven't setup any yet please see the first section of this chapter. Once all your pages are created (of course you can edit/add/remove them at any point) go to the Appearance>Menus to create your new menu.
- Type the name of your menu in the 'Menu Name' field at the top of the panel (the name doesn't really matter it can be e.g 'Some New Menu') then click the blue button 'Create Menu'.
Adding items to a menu
Once a menu is created, you can add items into it. On the left column you can find different custom links, pages or categories that can be added to your menu.
- Select the tab entitled Pages.
- Press the View All link to bring up a list of all the published Pages on your website.
- Select those Pages you want to add by clicking the checkbox next to each Page title.
- Click the Add to Menu in order to add your selection(s) to the menu that you've just created.
- Check the Top Navigation to add menu to page.
- Click the Save Menu button once you have added all the menu items you want.
Deleting a menu item
- Select the menu item that you want to delete from the menu editor screen.
- Press on the arrow icon in the top right-hand corner of the menu item/box to expand it.
- Click on the Remove link. The menu item/box will be immediately deleted.
- Click the Save Menu button to save your changes.
Creating Posts - top
There is a video tutorial corresponding to this section of the documentation - Creating Post
To create posts click the Posts tab in the WordPress Admin Panel. To create new post click the 'Add New' button. Enter the post title and add some text to the field.
For each post you can choose a 'Post Format'. HRG Host theme supports 5 post formats: Standard, Video, Gallery, Audio, Quote. Please, add some tags, related to your post in "Tags". And you have an opportunity to set Featured image to post in "Featured Image". You can also add some media - just click "Add media" and select what you want: "Insert Media", "Create Gallery", "Set Featured Image" or "Insert from URL". If you add some media, be sure to click "Insert into post" to save changes. After finishing - click "Publish".
Editing Blog Posts
Quick edit an existing blog post
Quick edit is a tool which allows you to update the details for a particular blog post. You can change the title, the permalink, the slug or edit the date and publishing settings. You can also change categories, add tags, enable or disable comments, or change the status of the blog post. All these actions can be performed by following the next steps:
- Open WordPress Dashboard
- Click the Posts tab
- Hover your blog post title you want to edit in the list provided
- Click Quick Edit
- Make the necessary changes
- Click the Update button to save any changes you have made
Edit the content of an existing blog post
- If you want to change the content of the blog post you need to click the Edit link
- Make the changes that you want
- Once you have finished, click the Update button
You can also edit multiple blog posts at once!
- Select multiple blog posts from the blog post list
- Select Edit from the Bulk Actions menu at the top and then click Apply
- You can bulk change the category, tags, author and other parameters for all the selected blog posts at once
Post Formats - top
In the previous section i have explained the basics of the post formats and theirs additional settings (if you haven't read it please do). Below I will go over all of the post formats and explain it's additional functions.
Standard
Standard post with an image.
Quote
This post format lets you display quote in a beautiful way, you should specify the quote in the additional field called Quote Text and quote author in a Quote Author field.
Audio
This post format lets you display an audio player at the top of the post, you have three additional fields to use: MP3 file - this field specifies the mp3 source for the audio player, OGG file - this field specifies the ogg source for the audio player. Also there is drop down which enables you to specify if you want to upload the audio file or embed it.
Video
This post lets you display a video player at the beginning of your post. You can embed the video from vimeo, youtube etc. or upload your own as MP4, OGG file.
Gallery
A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
Addons - top
HRG Host provides support for plenty of different addons for your page. If you are looking for shortcodes, Visual Composer components - this section is definitely for you.
Visual Composer Addons/Shortcodes - top
To add any of the shortcodes or addons please go to visual composer, add new row and click the add button, to learn more about visual composer please read it's documentation here.
If you have trouble in setup for our custom Visual Composer components please read this detailed tutorial below. Please make sure that you carefully read the offical documentation of Visual Composer before you start.
Row
This component allows you to create new row:
- General - add extra class (if you need).
- Design options - add border, margin and padding to row. Toy can also select border color, background, add image and select theme defaults for row.
- Width and Responsiveness - add responsive options to row.
Notice: don't forget to save changes!
Text Block
This component allows you to add simple text block to page:
- Text - type your text here.
- CSS Animation - add animation for this block
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Separator
This component allows you to add separator line between blocks:
- Color - you can select color here.
- Alignment - you can set separator line alignment here
- Style - you can select line style 'border', 'dashed', 'dotted' or 'double'.
- Border width - you can set separator line width here
- Element width - you can set separator line width on page here
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Separator with Text
This component allows you to add separator line between blocks:
- Title - Tou can type title text here.
- Title position - You can set title text alignment tere.
- Separator alignment - you can set separator line alignment here
- Color - you can select color here.
- Style - you can select line style 'border', 'dashed', 'dotted' or 'double'.
- Border width - you can set separator line width here
- Element width - you can set separator line width on page here
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Single Image
This component allows you to add simple image block:
- Widget title - add title.
- Image - add image to this block.
- Image size - set size of image.
- Image alignment - set image alignment.
- Image style - set style of image.
- Link to Large image? - check if you want to add opportunity to open image in this tab or in new tab.
- Image link - add link to image
- CSS Animation - add animation for image
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Tabs
This block offers to contain Tabs Items:
General
- Style - you can select one of available styles.
Animation
- Animation - you can select one of available animations.
Tabs Item
This block offers to create Tabs Item block:
- Title - you can type tab title here.
- Also you can use all shortcodes in this block.
Notice: don't forget to save changes!
Accordion
This block offers to contain Accordion Items:
General
- Extra class name - add a class name and refer to it in custom CSS.
Animation
- Animation - you can select one of available animations.
Accordion Item
This block offers to create Accordion Item block:
- Title - you can type accordian title here.
- Extra class name - add a class name and refer to it in custom CSS.
- Also you can use all shortcodes in this block.
Notice: don't forget to save changes!
This component allows you to add wigetised sidebar block:
- Widget title - you can type title here.
- Sidebar - you can select one of Sidebars from Aperance -> Widgets.
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
YouTube Video
This component allows you to add video using video link url:
- Widget title - you can type title here.
- Video link - set URL address of your video.
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Google Maps
This block offers to create map block:
- Widget title - you can type title here.
- Map embed iframe - you can set your location here.
Visit Google maps to create your map (Step by step):
- Find location
- Click "Share" and make map public
- Click folder icon to reveal "Embed on my site" link
- Copy iframe code and paste it.
- Map height - you can set Map height on page
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Raw HTML
This component allows you to add raw HTML block:
You can add your HTML code here.
Notice: don't forget to save changes!
Raw JS
This component allows you to add raw JavaScript block:
You can add your JavaScript code here.
Notice: don't forget to save changes!
Contact Form 7
This component allows you create contact form for your page. Contact Form 7 documentation you can find here
Contact Form
This shortcode add contact form to your website (you need to create contact form before with Contact Form 7):
- Form Title - add title to block.
- Contact form - select one of your contact forms you have created before.
Notice: don't forget to save changes!
Table
This block offers to create table on page:
General
- Table style - you can select style of tables.
- Table - You can customize table using this block. Right click on table helps to manage it.
- Extra class name - add a class name and refer to it in custom CSS.
Animation
- Animation - you can select one of available animations.
Notice: don't forget to save changes!
Heading
This block offers to create heading block on page:
General
- Heading - you can select html tag (h1-h6) for heading text
- Text align - you can select texy alignment.
- Style - you can select style of heading block.
- Width - you can select width of heading block.
- Heading - type here heading title.
- Content - type here additional heading content.
- Extra class name - add a class name and refer to it in custom CSS.
Animation
- Animation - you can select one of available animations.
Design options
- you can add border, margin and padding to row. Toy can also select border color, background, add image and select theme defaults for row here.
Notice: don't forget to save changes!
Slider
This block offers to create slider block on page, and contain slides:
General
- Style - you can select style of this block.
- Pager position - you can select location for pager.
- Slider arrows - you can turn on/off slider arrows in this block.
- Infinite loop - you can turn on/off loop for elements in this block.
- Extra class name - add a class name and refer to it in custom CSS.
Animation
- Animation - you can select one of available animations.
Slide
This block offers to create slides in slider block:
General
- Price - you can set some price here.
- Title - you can type title for slide here.
- Subtitle - you can type subtitle for slide here.
- Description - you can type additional description for slide here.
- Link - you can set some link here.
- Link 2 - you can set 2'nd some link here.
- Image - - you can select image from media library or upload your own.
- Background - you can select image from media library or upload your own to set backgroung.
- Slide layout - you can select slide layout position.
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Services
This block offers to create services block on page, and contain servises items:
General
- Style - you can select style of this block.
- Extra class name - add a class name and refer to it in custom CSS.
Animation
- Animation - you can select one of available animations.
- Animation Delay - you can set some delay for animation.
Service
This block offers to create servise in services block:
- Title - you can type title for service here.
- Description - you can type additional description for service here.
- Image - you can select image from media library or upload your own.
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Plan
This component allows you to add Plan block to page :
General
- Title - you can set title of plan here.
- Description - you can type additional description for plan here
- Image - you can select image from media library or upload your own.
- List of conditions - you can type some conditions here.
- Price - you can set prise of this plan.
- Old price - you can set old prise of this plan.
- Period - you can set period of this plan.
- Button - you can add button with some link.
- Extra class name - add your own CSS class for this block.
Animation
- Animation - you can select one of available animations.
Notice: don't forget to save changes!
Advantages
This block offers to create advantages block on page, and contain advantages items:
General
- Style - you can select style of this block.
- Big section default title (if Style 1 selected) - you can type default title of Big section.
- Big section default description (if Style 1 selected) - you can type default description of Big section.
- Background - you can select image from media library or upload your own to set backgroung.
- Extra class name - add a class name and refer to it in custom CSS.
Animation
- Animation - you can select one of available animations.
Advantage
This block offers to create servise in services block:
- Title - you can type title for service here.
- Description - you can type additional description for service here.
- Image - you can select image from media library or upload your own.
- Extra class name - add a class name and refer to it in custom CSS.
Notice: don't forget to save changes!
Search
This component allows you to add Search block to page :
General
- Style - you can select style from list.
- Title - you can set title here.
- Subtitle - you can set subtitle here.
- Count of Links - you can set count of liks here.
- Link - you can set URL and title of Link.
Animation
- Animation - you can select one of available animations.
Notice: don't forget to save changes!
Features
This component allows you to add Features block to page, which contains Feature blocks:
General
- Style - you can select style from list.
- Extra class name - add a class name and refer to it in custom CSS.
Animation
- Animation - you can select one of available animations.
Feature
This component allows you to add Features block to page, which contains Feature blocks:
General
- Title - you can set title here.
- Description - you can type additional description for service here.
- Image - you can select image from media library or upload your own.
- Date - you can set date of feature.
Notice: don't forget to save changes!
Button
This component allows you to add Button to page :
General
- Link - you can set URL and title.
- Button alignment - you can set location of button.
- Extra class name - add your own CSS class for this block.
Animation
- Animation - you can select one of available animations.
- Animation Delay - you can set some delay for animation.
Notice: don't forget to save changes!
Call to Action
This component allows you to add Call to Action block to page:
General
- Title - you can type title here.
- Proposition - you can type some proposition here.
- Extra class name - add your own CSS class for this block.
Animation
- Animation - you can select one of available animations.
Notice: don't forget to save changes!
Support
This component allows you to add Support block to page:
General
- Title - you can set title here.
- Description - you can type additional description for service here.
- Background image - you can select image from media library or upload your own to set backgroung.
- Extra class name - add your own CSS class for this block.
Animation
- Animation - you can select one of available animations.
Notice: don't forget to save changes!
Clients
This component allows you to add Clients block to page, which contains Client items:
Client
This component allows you to add Client blocks to Clients block:
- Title - you can set title here.
- Image - you can select image from media library or upload your own.
- Extra class name - add your own CSS class for this block.
Notice: don't forget to save changes!
Process
This component allows you to add Process block to page, which contains Step items:
General
- Extra class name - add your own CSS class for this block.
Animation
- Animation - you can select one of available animations.
Step
This component allows you to add Client blocks to Clients block:
- Title - you can set title here.
- Description - you can type additional description for step here.
- Image - you can select image from media library or upload your own.
- Extra class name - add your own CSS class for this block.
Notice: don't forget to save changes!
Testimonials
This component allows you to add testomonials block to page, which contains testimonial items:
General
- Style - you can select style from list.
- Active testimonial - you can set number of active testimonial.
- Extra class name - add your own CSS class for this block.
Animation
- Animation - you can select one of available animations.
Testimonial
This component allows you to add testimonial blocks to testimonials block:
- Title - you can set title here.
- Description - you can type additional description for step here.
- Image - you can select image from media library or upload your own.
- Extra class name - add your own CSS class for this block.
Notice: don't forget to save changes!
Blog
This component allows you to add Blog block to page:
- Style - you can select style from list.
- Select category - you can select category which will be dislayed in blog. Use Control button to multiply select.
- Order by - you can select ordering option.
- Sorting - you can select sorting order option.
- Extra class name - add your own CSS class for this block.
Notice: don't forget to save changes!
Latest news
This component allows you to add Latest news block to page:
- Style - you can select style from list.
- Posts number - you can set count of posts in block.
- Extra class name - add your own CSS class for this block.
Notice: don't forget to save changes!
Message Box
This component allows you to add message box to page:
- Style - you can select style from list.
- Close button - you can select style from list.
- Content - you can set count of posts in block.
- Extra class name - add your own CSS class for this block.
Notice: don't forget to save changes!
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating this theme. No guarantees, but I'll do my best to assist. If you have any suggestions on how to improve our themes or documentation please share them!
NRGThemes