Graneon Document
Version: 1.3.7
Created by: HaruTheme
1. Introduction

Thank you for purchasing Graneon – Creative Agency Business & Portfolio WordPress theme. If you are looking for  a beautiful WordPress theme for creative agencies and all sorts of business websites, Graneon is right choose for you! This theme is also suitable for you to showcase what you do, to introduce your team, to present your products, … and much more. With special functions you can build your attractive business websites as you want. And with super clean, elegant and unique design your site will more attractive with customer and perfect to promote yourself, your own work.

Before getting started, please be sure to always check out documentation files. We outline all kinds of good information, and provide you with all the details you need know to use Graneon theme.

If you are unable to find your answer in the documentation, please contact our Support section on HaruTheme Forum or directly to our ThemeForest account via message.

In this user guide you will find all required information to get your site up and running: starting from theme installation and setup, to usage of different post types, page templates and shortcodes.

Most JavaScript enabled Browsers will make them work with no issues. They are designed and optimized for desktops, tablets and smartphones.


Please note that we do not give support or any questions related on how to install and maintain WordPress. For any faulty installation that may cause your website or our theme malfunction you should refer to WordPress support forum. Alternatively you can get help from your web hosting.

If you are satisfied with our Graneon WordPress theme, please take a moment to rate 5 stars and leave some sentences for review, it means a lot to us.

Thank you!


2. Getting Started

2.1. Welcome


It’s awesome to know that you decided to purchase GraneonNo doubts, you will join our happy customers community in seconds!
Won’t make any mistake here, because our detailed documentation will guide you. Please be sure to check it out before getting started. We have outlined all kinds of necessary information and keep them easy-to-read-and-follow. Our themes are dedicated to WordPress platform, so we assume that you have already WordPress installed and ready to go.

2.1.2. Wordpress Knowledge Base

To install Graneon – your powerful Creative Agency Business and Portfolio WordPress theme, you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information:

2.1.3. Theme Requirements

To use Graneon, you must be running WordPress 5.0 or higher, PHP 5.6 or higher, and MySQL 5.6 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

  • Check to ensure that your web host has the minimum requirements to run WordPress.
  • Always make sure they are running the latest version of WordPress.
  • You can download the latest release of WordPress from official WordPress website.
  • Always create secure passwords for FTP and Database.

Hosting is more secure when PHP applications, like WordPress, are running using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using PHP. Just ask your potential host if they run PHP or something similar.

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time: 360
  • max_input_time: 360
  • max_input_vars: 4000
  • memory_limit: 256M
  • post_max_size: 128M
  • upload_max_filesize: 128M
  • output_buffering: 4096

Here is topic tutorial to help you change PHP Limits:

3. Installation

After purchasing Graneon, please download the package from ThemeForest. In the package, you can find things like documentation, licensezipped file with theme files and folder with theme files. Please unpack the whole package after downloading it from ThemeForest.

3.1. Install Theme via WordPress

  • Step 1: Navigate to Appearance >> Themes
  • Step 2: Click Add New, then click Upload Theme >> Choose File
  • Step 3: Navigate the .zip file on your computer and click “Install Now”
  • Step 4: Activate the newly installed theme by going to Appearance >> Themes and clicking the Activate button.
  • Step 5: IMPORTANT! After theme installation, at the top, you have a box with information about required and optional plugins. To install them and activate, please navigate to Appearance >> Install Plugins section.

Note: If you have any problem when installing file via WordPress upload please note our Theme Requirements section above.

3.2. Install Theme via FTP Upload

SKIP THIS STEP if you have already successfully uploaded Graneon theme via WordPress

  • Step 1: BACKUP YOUR FILES! Should do it before set up anything, this is always the safest.
  • Step 2: Unzip the file (usually is Extract Here if you use WinZip or 7Zip).
  • Step 3:  Login into your hosting server via an FTP client tool (We recommended to use FileZilla).
  • Step 4: Upload Graneon Theme folder into wp-content/ themes folder on your server.
  • Step 5: Go to Appearance >> Themes and choose new theme has just installed and clicking the Activate button to active.
  • Step 6: Once your theme is installed and active you will get a prompt at the top of your Dashboard that will ask you to install Graneon‘s plugins..

(More details you can see it in topic update theme manual:

3.3. Install Required Plugins

After install and active theme you need install some required plugins to make Graneon working best:


  • Contact Form 7: Graneon is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site.
  • WP Bakery Page Builder: The popular drag and drop page builder with an intuitive interface to build your content at ease.
  • Revolution Slider: Create a responsive or Full-width slider with beautiful effects.
  • WP Instagram Widget: A WordPress widget for showing your latest Instagram photos. (removed from version 1.1.6)
  • Less & SCSS PHP Compilers: A plugin to help function build SCSS to CSS in our themes works.
  • MailChimp for WordPress: Adds various highly effective sign-up methods to your site.
  • Meta Box: Create custom meta boxes and custom fields for any post type in WordPress.
  • Haru Graneon Core: The Haru Graneon Core plugin.
  • Redux Framework: Redux is a simple, truly extensible options framework for WordPress themes and plugins.
  • Smash Balloon Instagram Feed: Plugin to help you display instagram Photos (added from version 1.1.6)


3.4. One Click Install Demo Data

With Graneon, you can build a functioning website just by clicking a button and install our demo data.

  • Step 1: Go to Theme Options >> Demo Importer section
  • Step 2: Choose what demo you want to import then click Import Demo button


If you can’t install Demo Data please read more about section Theme Requirement above.

In Special case if your site using HTTPS, it can cause some images missing when import. You can follow this to turn off HTTPS:

Here is video tutorial to help you Demo data manual:

More details you can see this topic tutorial:

Import Demo Data Automatic

Import Demo Data Manual

3.5. Update using Envato Toolkit

This is Auto Update method

Some important notices before updating:

We recommend you have a current backup of your site including wp-content folder, wp-config.php file and .htaccess file and a copy of  WordPress database. If you don’t know how to take action, you can use several plugins such as UpDraft Plus and WordPress Backup Buddy or Duplicator (recommended). Moreover, you should backup HaruTheme’s theme options in Theme Options >> Import/Export.

Please follow these steps to update automatically this theme:

  • Step 1 – You need to generate an API key to link your WordPress site to your ThemeForest account. Login to ThemeForest, go to your dashboard and click on “Settings.” The API Keys screen allows you to generate a free API key.
  • Step 2 Download Envato ToolKit, install and activate this plugin. A new menu item, “Envato Toolkit”, will appear in the admin sidebar. Click on the sidebar link and enter your marketplace username and secret API key. Click “Save Settings.” All of your theme purchases will now appear on this page after it refreshes.
  • Step 3 – The plugin will now alert you to theme updates – so long as you check the toolkit settings regularly. Click on “install automatically” beside each of your themes to automatically update them. The toolkit settings page also allows you to install themes that you haven’t already uploaded to your site, delete ones you don’t use and view version details. You can also set up theme backups.
  • Important! Always Use a Child Theme Updating your themes shouldn’t affect any customization to your website as long as you’re using a child theme.

Also you can use a plugin from Envato to Update theme:

More detail you can see in this topic tutorial:

3.6. Manual Update

Following these steps to update your theme:

  • Step 1 – Log into your ThemeForest account and navigate to your downloads tab. Find the “Graneon” theme purchase.
  • Step 2 – Click the Download button next to it and choose to download the Installable WordPress file only which is just the WordPress file, or choose the All files & documentation which is the entire package that contains everything.
  • Step 3: Update theme via WordPress upload method above or via FTP Client tool.

Here is topic to help you update theme manual via FTP:

3.7. WordPress Configuration

You need to configure WordPress. You can adjust WordPress settings as follows:

Step 1 – You can set Site Title, Tagline in Settings >> General.

Step 2 – You can set Blog pages show at most and Front Page displays  in Settings >> Reading.

Step 3 – You can set Discussion settings in Settings >> Discussion. You can set comment options from here.

Step 4 – You can change Image sizes in Settings >> Media. You can set image size for blog archive, single blog post and image for widget sidebar.

Step 5 – You should ensure that a non-default permalink setting is selected, e.g. Day and name in Settings >> Permalinks.


4. Theme Options

By clicking on the “Theme Options” menu, you’ll be able to change all template specific settings. To Understand how Options in our theme work please follow this topic tutorial:

4.0. Portfolio Options

This allows you configure settings for Portfolio more quickly.

Single Portfolio Settings:

  • Single Portfolio Layout: Set Single Portfolio Layout by click on image
  • Show/Hide Related: Show/Hide related Projects
  • Portfolio Related Columns: Set columns if show Related Projects
  • Show/Hide Share: Settings for Social Share

Portfolio Page Title Settings:

  • Similar Settings for Post or page Title

Images Size will help you settings Images Size for shortcode by Crop Images.

Shortcode Images Size: crop Images for Shortcode Portfolio settings

Single Images Size: Crop Images for Slideshow Gallery in Single Portfolio Project.


4.1. General Setting

General Settings” tab is divided into a few sections which allows you to configure general settings for pages as Layout Style, Page Preloader…

General Setting
  • Layout Style: Set layout style for your website with 3 options Boxed, Wide and Float.
  • Page Preloader: Select Page Preloader from drop down list. Leave empty if you don’t want to use this feature.
  • Back To Top: Turn On/Off back to top button.
  • Custom CSS (From WordPress version 4.7+ you can add Custom CSS in Appearance » Customize » Additional CSS)
  • Custom JS

4.2. Header Options

Configure Header Tab is the most important in Theme Options. Please read carefully description below:

For easy customize Header you can see video tutorial from here:

Header Layout

  • You can choose one from pre-made header.

Note: If you use header sidebar style please follow this topic tutorial:

Top Header

  • Top Header: Turn Top header On/Off.
  • Top Header layout width: Set Top bar layout width with 2 options Container or Full Width.
  • Top Header Layout: Set top header layout with 2 options 1 Colum or 2 Columns.
  • Top Left Sidebar: Set sidebar for Top Left Sidebar.
  • Top Right Sidebar: Set sidebar for Top Right Sidebar.

To change content of Top Header please go to Appearance -> Widgets then select Header Top Left & Header Top Right

For easy customize Top header you can see video tutorial here:

Header Navigation

  • Mega menu Animation: Set animation for Mega Menu. We build our Mega Menu animation base on Animate.css
  • Header navigation Layout: Set layout style for Header navigation with 2 options Container or Full Width.
  • Header On Slideshow: Turn header on Slideshow On/Off.
  • Header Under Slideshow: Turn header under Slideshow On/Off.
  • Header Sticky: Enable/Disable header sticky.
  • Header Sticky Skin: Set header sticky skin with 2 options Dark or Light.

Header Elements

Header Elements tab allows you to configure header options… You can easy change what you want to show on Header by turn ON Head Customize X (X is Left, Right or Navigation). Please note: Left is left of the Logo and Right is right of the Logo. 

To change content of  Canvas sidebar (Quick Menu) please go to Appearance -> Widgets and select Canvas Sidebar

Choose what you want to show by drag and drop from Disable list to Enable list.

Header Elements Navigation

  • Header Elements Navigation: Change what you want to show after Navigation.
  • Custom Social Profiles: Set custom social profile network. You can choose many as you want.
  • Custom Text Content: You can use HTML for custom text.

HeaderElements Left

  • Header Elements Left: Change what you want to show at the left of Logo.
  • Custom Social Profiles: Set custom social profile network. You can choose many as you want.
  • Custom Text Content: You can use HTML for custom text.

Header Elements Right

  • Header Elements Right: Change what you want to show at the right of Logo.
  • Custom Social Profiles: Set custom social profile network. You can choose many as you want.
  • Custom Text Content: You can use HTML for custom text.

Mobile Header

For easy customize Mobile Header and Mobile Menu you can see video tutorial here:

  • Header Layout: Set mobile header layout with 3 pre-made options.
  • Menu Drop Type: Set mobile menu style with 2 options Dropdown Menu or Fly Menu.
  • Mobile Logo: Set logo image for Mobile devices.
  • Top Bar: Turn top bar On/Off.
  • Sticky Mobile Header: Turn sticky mobile menu On/Off.

Search Settings

  • Search Box Type: use Standard Search or Ajax Search

In this tab, you can set Footer for your page. Please create Footer Post type first then use Visual Composer to build footer. If you can’t use Visual Composer for Footer post type please change Roles in WP Bakery settings.

For easy customize Footer you can see video tutorial from here:

You also can add Widget to Footer Block as this video tutorial:

Here is topic tutorial to help you Manage Footer:

  • Layout: Set footer layout with 2 options Full width or Container.
  • Footer Block: Set footer block has created by Footer Block Post type.



4.4. Logo & Favicon

For easy customize Logo you can see video tutorial from here:

In Logo & Favicon tab, you can change website logo, sticky logo and custom favicon very easy.

  • Logo: Set logo image.
  • Retina Logo: Set logo for Retina screen
  • Sticky Logo: Set logo sticky image. If you not set this option, sticky logo with use “Default” Logo image
  • Logo Max height: set max height for Logo
  • Custom Favicon: Set custom favicon image. The best is use an image have size 16 x 16 (pixel).

Please note when you change Logo in Theme Options but it doesn’t change on Homepage please see in this topic:

4.5. Color Scheme

Color Scheme Tab allows you to configure Primary color, Secondary color, Text color, Heading color and Link color for your website. Please note to make this option working fine, may be you need change some settings in php.ini of your hosting server.

Here is topic for more detail change Color Scheme and Typography

For easy customize Color Scheme you can see video tutorial from here:

  • Primary Color: Set Primary color.
  • Secondary Color: Set Secondary color.
  • Text Color: Set text color.
  • Link Color: Set Link color.
  • Heading Color: Set color for heading.

SCSS Compiler

If you want to custom color or CSS you must enable this option. To make this option work you need install plugin Less & scss PHP Compilers.

Please note if you changed Color Scheme but it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.

4.6. Typography

Typography tab allows you set Fonts for body, menu, page title, page sub title and Heading from Google Fonts. Have about 600 fonts. If you want to use Custom Fonts upload please follow this topic:

Please note if you changed Typography but at some section it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.

4.7. WordPress Setting

Page Setting tab allow you to configure settings for your Pages.

  • Layout: Set page layout with 2 options Full Width or Container.
  • Sidebar: Set sidebar style with 3 options Left sidebar, Right sidebar or No Sidebar.

Pages Title Setting

  • Show Page Title: Set page title On/Off.
  • Page Title Layout: Set page title layout with 2 options: Full Width or Container.
  • Page Title Parallax: Set page title parallax On/Off .
  • Page Title Background: Select a background image for page title.
  • Breadcrumbs: Turn breadcrumbs of Page On/Off .


Archive Setting tab allow you configure archive blog page which display all your posts.

Archive Blog

  • Layout: Set page layout for archive blog page with 2 options Full Width or Container or.
  • Sidebar: Set sidebar style for archive page with 3 options Left, Right, No-Sidebar, Left or Right sidebar.
  • Right Sidebar or Left Sidebar: Set sidebar for Right sidebar or Left sidebar.
  • Archive Display Type: Set Archive Display Type for archive page with 4 options Large Image, Medium Image, Grid or Masonry.
  • Paging Style: Set archive paging style with 3 options Default, Load More or Infinity Scroll.
  • Length Of Excerpt: Set length of the Excerpt.

Archive Title Setting

  • Show Archive Title: Turn On/Off archive blog title.
  • Archive Title Layout: Set page title layout for archive page with 2 options: Full Width or Container.
  • Archive Title Parallax: Turn On/Off page title parallax for archive page.
  • Archive Title Background: Set a background image for archive blog title.
  • Breadcrumbs: Turn breadcrumbs  On/Off.


Single Setting tab allows you to configure single blog page (single post).

Single Blog

  • Layout: Set page layout for single blog with 2 options Full Width or Container.
  • Sidebar: Set sidebar style with 3 options No Sidebar, Left or Right sidebar.
  • Left or Right Sidebar: Set sidebar for Right sidebar or Left sidebar.
  • Show Post Navigation: Turn post navigation On/Off  (Go to next or preview post).
  • Show Author Info: Turn author information On/Off.

Single Blog Title Setting

  • Show Single Blog Title: Turn On/Off single blog title.
  • Single Blog Title Layout: Set page title layout for single post with 2 options: Full Width or Container.
  • Single Blog Title Background: Set a background image for single blog title.
  • Single Blog Title Parallax: Turn On/Off page title parallax for single blog.
  • Breadcrumbs: Turn breadcrumbs  On/Off.

4.8. Social Settings

Social Settings tab allows you to show media social network to make connect your website with your social network. You should insert link to your social network. This will use for Social Network of Header Elements

4.9. Newsletter Popup

Newsletter Popup tab allows you create a Newsletter promo Popup if you want to show something special to customer as Sale Off,…

  • Show Popup: Set popup On/Off.
  • Popup Width: Set the width of popup.
  • Popup Height: Set the height of popup.
  • Popup Effect: Set popup effect.
  • Popup Delay: Set delay time of popup (caculate by miliseconds).
  • Popup Content: Set the content for popup. You can insert shortcode here. Please not you should change Editor mode to Text before Save.
  • Popup Background: Set background image for popup.

4.10. Woocommerce

From here you can set some base functions of Woocommerce. Woocommerce tab have some sub sections allows you to set Product display, archive product page (Shop page) and single product page.

  • Sale Badge Mode: you can choose display as SALE text or percent.
  • Quick View Button: Enable/Disable Quick View button
  • Add To Wishlist Button: Enable/Disable Wishlist button
  • Add To Compare Button: Enable/DisableAdd To Compare button


Archive Product (Shop)

Archive Product tab allow you change settings for Shop page.

  • Product Per Page: Set products per page for archive page.
  • Product Display Columns: Choose number of columns to display on shop/categories pages.

Layout Options

  • Archive Product layout: Set Archive page layout with 2 options Full Width or Container.
  • Archive Product Style: Set style for archive product page. Default is standard shop page of Woocommerce and Ajax is our custom shop page with ajax filter.
  • Archive Product Sidebar: Set archive product sidebar None, Left or Right.
  • Archive Product Left or Right Sidebar: Set left or right sidebar for archive product page.
  • Show Categories, Show Filters, Show Search: these options are used when Archive Product Style is Ajax

Page Title Options

  • Archive Title: Turn archive title for shop page On/Off.
  • Archive Product Layout: Set layout style for archive product.
  • Archive Product Title Parallax: Turn archive product title parallax On/Off.
  • Archive Product Title Background: Set background image for archive product title.
  • Breadcrumbs in Archive Product: Turn breadcrumbs in archive product On/Off.


Single Product

Single Product tab allow you change settings for Single product page.

Layout Options

  • Single Product Layout: Set Single product layout with 2 optiosn Full Width or Container.
  • Single Product Sidebar: Set sidebar for single product page.

Page Title Options

  • Single Title: Turn title for single product page On/Off.
  • Single Product Title Layout: Set single product title layout with 2 options Full Width or Container.
  • Single Product Title Parallax: Turn single product title parallax On/Off.
  • Single Product Title Background: Set background image for single product title.
  • Breadcrumbs in Single Product: Turn breadcrumbs in single product On/Off.

Related Product Options

  • Related Product Number: Set number of related product you want to show on single product page.
  • Related Product Display Columns: Set number of columns to display related product.

4.11. Demo Importer

As describe above (section 3.4). You can get our demo by one-click demo install. Please read more on our forum to make any working fine.

4.12. Maintenance Mode

Maintenance Mode tab allows you close website for maintenance,… Please make sure you logged out to see changes because maintenance mode doesn’t show for administrator

  • Maintenance Mode: Set Maintenance mode On/Off.
  • Maintenance title: Set title of maintenance page.
  • Maintenance Background: Set background of maintenance page.
  • Online Time: Our site will auto open after this time.
  • Timezone: Set timezone of your site.
  • Maintenance social profiles: Set social profiles of maintenance page.

4.13. Import /Export

In this tab, you can import or export Theme Options data to backup or use on other website.

5. Menu

WordPress menu is very clean and easy to use. However you need to know some basic settings.

Assign Menu
  • Go to Appearance >> Menus then select menu you want to Edit or you can create new menu.
  • Find Menu Settings at the bottom of page the select location for menu.

Graneon supports 5+ menu location:

  • Primary Menu: the main menu use in the header.
  • Vertical Menu: the vertical menu use for Mega Shop.
  • Mobile Menu: the menu use to display on mobile device.
  • Left Menu: the menu use to display on left Logo of Header
  • Right Menu: the menu use to display on right Logo of Header

5.1. How to create Menu

Our theme has support mega menu system.  The first you need to know about create a new menu.

  • Step 1: Go to Appearance >> Menus.
  • Step 2: Click Create A New Menu link. Enter menu name then click Create Menu.
  • Step 3: To add menu item, select what you want to add to menu on left-side then click Add to Menu.
  • Step 4: To create a simple dropdown menu you can drag and drop menu item. With sub menu you can read more description below to know about menu item level.
  • Step 5: After setting menu, you go bottom of the page and assign menu Location then Save Menu.

5.2. Mega Menu Settings

Our theme supports  Mega Menu with 2 sub-menu styles: Column and Tab. To create Mega Menu, you click on menu item to open Menu Item level 0 >> Check Enable MegaMenu to use Mega Menu.

For easy manage Mega Menu you can see video tutorial from here:

Column Style

Column Style display menu items with columns layout.

Column Style use 3 menu item levels. You also can set icon for menu item and sub label.

Step 1: Click on a Level 0 menu item and check on Enable MegaMenu.

Step 2: Set Megamenu style is Column and set MegaMenu columns for menu item.

We have some extra option as Background Image for menu item or Sub menu full width to use sub menu full width. Hide Mega menu heading to hide Mega Menu heading.

Tab Style

With Tab Style you can show many content from widget.

Tab style use 2 menu item levels. On menu level 0, select Mega Menu style: Tab and select MegaMenu Columns for your menu.

Step 1: Click on a Level 0 menu item and check on Enable MegaMenu.

Step 2: Set Megamenu style is Tab and set MegaMenu columns for menu item.

Step 3: Click on menu level 1 to open then select Mega Menu Widget Area. You can go to Appearance >> Widgets to create widget for menu. We added function add custom sidebar and you can create new sidebar very easy.

Similar above, we have some extra option as Background Image for menu item or Sub menu full width to use sub menu full width. Hide Mega menu heading to hide Mega Menu heading.

6. Page

6.1. How to create New Page

  • Step 1: Navigate to Pages in your admin sidebar and click Add New option.
  • Step 2: Input a new name for your page, then find the Page Attributes box on right side.
  • Step 3: In Page Attributes box, set Page Parent in dropdown list.
  • Step 4: Scroll down to Page Options to make the page you want then click Publish.

6.2. Page Options

Our theme have many page options to help you display almost what you want. Please note if you don’t set anything (Default option) in Page Options it will inherit from Theme Options.


  • Layout Style: Set layout style for page with 4 options Default, Boxed, Wide or Float.
  • Page Layout: Set page layout (with header you can set in header tab settings) with 3 options Default, Full Width or Container.
  • Page Sidebar: Set sidebar style for page.
  • Left Sidebar: Set left sidebar for page if sidebar style is Left Sidebar.
  • Right Sidebar: Set right sidebar for page if sidebar style is Right Sidebar.
  • Page Class Extra: Enter page class with special page.
Top Header

  • Show/Hide Top Header: Turn top bar of page On/Off .
  • Top bar layout width: Set width of page top bar with 3 options Default, Container or Full width.
  • Top Bar Layout: Set top bar layout of page.
  • Top Left Sidebar: Set sidebar for Top Left Sidebar.
  • Top Right Sidebar: Set sidebar for Top Right Sidebar.

  • Logo Image: Set logo of Page.
  • Logo Retina Image: Set logo Retina of Page.
  • Sticky Logo Image: set sticky logo of Page

You can override page header customize for page that mean pages can have different header. Similar options in Theme Options you have the same page options.

Page Header Elements

You can override page header customize for page. Similar options in Theme Options you have the same page options.

Header Mobile

You can override page header mobile for page. Similar options in Theme Options you have the same page options.


7. Blog Post

7.1. How to create New Post

No matter which method you using to display your blog posts, the first thing you need to do is create the blog posts.

See below for information on how to create blog posts.:

  • Step 1: Navigate to Posts >> Add New in your WordPress admin sidebar.
  • Step 2: Create a title, and insert your post content in the editing field.
  • Step 3: Add Categories from the right side. To assign it to the post, check the box next to the Category name.
  • Step 4: Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.
  • Step 5: For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.
  • Step 6: Once you are finished, click Publish to save the post.

Here is the screenshot that shows the various areas of the blog post page.


7.2. Post Format

Our theme supports 7 post formats that allows you to choose the specific format for your blog. You can choose different types of post to make your blog be more interesting. Follow below steps to see the description of Post Formats and Global setting of Post.

7.3. Page Options

Same as Page Options box of Page, Post have similar Page Options. You can read Page Options section above.

8. Custom Post Type

Manage Custom Post Type  is also important to use our theme.

8.1. Team Members

Create New Team Member
  • Step 1: Navigate to Team members >> Add New in your WordPress admin sidebar
  • Step 2: Enter title and description for team member item.
  • Step 3: Choose TeamMember Categories and Featured Image of new team member on the right side.
  • Step 4: Go to Team member information box and fill out information.
  • Step 5: Once you are finished, click Publish to save team member item.
Team Member Setting

  • Name: Enter name of member.
  • Position: Enter position of member.
  • Social Profiles: Enter the social profile URLs of member

Footer Blocks custom post type allow you use WPBakery Page Builder to make footer. Please note may be you need go to WPBakery Page Builder >> Role Manager. Post type option you must select Custom and checked to haru_footer post type to get Footer can build by WPBakery Page Builder.

Create New Footer Blocks
  • Step 1: Navigate to Footer Blocks >> Add New in your WordPress admin sidebar
  • Step 2: Building footer blocks by using Visual Composer shortcode.
  • Step 3: Once you are finished, click Publish to save footer block item.

You can follow this video tutorial to help you manage Footer more easier:

8.3. Testimonials


8.4. Porfolio

Portfolio Post type have many field information.

If you want to add more information field for Portfolio you can follow this topic tutorial:

How to add new Metabox to Circle Single Video, Film, Actor or Director

(Similar this topic you can add more meta data for Portfolio Post type)

Please notice on the Top Right of screen you will see some settings:

  • Portfolio Type: You can create Image, Link, Gallery or Video Project
  • Thumbnail size: Default (not Crop) or Small Square, Big Square, Landscape, Portrait (Crop Image). Please note Crop Size you can see in Theme Options -> Portfolio -> Images Size.
  • Single Style: Default all single portfolio will use layout from Theme Options -> Portfolio -> Single Portfolio Layout. You can use this settings to choose special single layout for each Project.


9. Shortcode

Our theme uses the most powerful’s page builder to help users create sites with ease.

Add content using Visual Composer. Choose Backend or FrontEnd editor.

We made more than 10+ shortcode to help you make your page:

9.1. Recent News

This shortcode will help you display latest post with multi layout.

9.2. Banner

This shortcode will help you display banner with many beautiful effects.

9.3. Testimonial

This shortcode will help you display Client testimonials

9.4. Countdown

This shortcode will help you display countdown timer.

9.5. Clients

This shortcode will help you display client logo showcase.

9.6. Single Product

This shortcode will help you display single product with special layout.

9.7. Products

This shortcode will help you display product with layout grid or masonry.

9.8. Products Slider

This shortcode will help you display product with layout Slider.

9.9. Products List

This shortcode will help you display products with list layout.

9.10. Products Recent Viewed

This shortcode will help you display recent viewed products.

9.11. Products Top Rated

This shortcode will help you display Top Rated Products.

9.12. Products Top Sale

This shortcode will help you display top Sale products.

9.13. Products top Seller

This shortcode will help you display Product top seller.

9.14. Products Creative

This shortcode will help you display products with creative layout.

9.15. Products Ajax Category

This shortcode will help you display product in each category with Ajax style

9.16. Google Maps

This shortcode will help you display your address on google map with multi style.

9.17. Widget

This shortcode will help you display widget easy at where you want as Footer,…

9.18. Counter

This shortcode will help you display statistic counter.

This shortcode will help you display images gallery with multi layout.

9.20. Video

This shortcode will help you display video with beautiful Lightbox

9.21. Teammember

This shortcode will help you display your team member.

9.22. Icon Box

This shortcode will help you display icon box with information.

This shortcode will help you display Footer contact information as address, phone number,…

This shortcode will help you display quick link in Footer.

This shortcode will help you display footer images gallery.

This shortcode will help you display Footer social networks.

9.27. Haru Portfolio

This shortcode will help you display Portfolio with many layout and settings:

Have many options for this shortcode:

  • Thumbnail type: Default with use Grid layout or use Masonry layout, Crop Images with Small Square, Landscape, Portrait, Big Square
  • Portfolio Title: Add Title and category of Project at Top or Bottom
  • Hover Style: Icon, Icon Title, ..
  • Columns: Set columns for Portfolio layout
  • Source: from Category, Tag, or Select Projects
  • Filter: Set filter settings
  • Filter by: Tag or Category
  • Filter Style: Isotope or Ajax style
  • Paging: Loadmore via Ajax or Hide


10. Required Plugins

10.1. Instagram Feed

This plugin is required when you install and active our theme. This plugin use display gallery from Instagram. We added this plugin from version 1.1.6, in previous version we use WP Instagram Widget but this plugin removed from

To setup Instagram Feed widget in Footer on Menu please plugin document here:

You can use this extra class:

  • grid-layout-round: layout grid with image round
  • grid-layout-square: layout grid with image square (padding-5, padding-10 for spacing – use only for this layout)

1. First you need connect plugin with your Instagram Account in Configure tab

2. Settings on Customize Tab

Because we use to display gallery on Footer so you can disable Mobile layout like this

3. Some Example with settings from Display Your Feed Tab

Gallery 3 Columns with Follow Button

[instagram-feed class=grid-layout-round num=3 cols=3 showheader=false showbutton=false showfollow=false]

Gallery 3 Columns with Only Photos Rounded

[instagram-feed class="grid-layout-square padding-10" num=6 cols=3 imagepadding=10 imagepaddingunit=px showheader=false showbutton=false]

Gallery 3 Columns with Only Photos

[instagram-feed class="grid-layout-square padding-5" num=6 cols=3 imagepadding=5 imagepaddingunit=px showheader=false showbutton=false showfollow=false]

4. You go to to Appearance -> Widgets and add Instagram Feed widget with the shortcode above

11. WordPress Translation

Our theme is a WPML – compatible and multi language ready theme. We suggest 2 ways to translate our theme.

  1. Use Loco Translate plugin
  2. Manual translate using POEdit

Use Loco Translate you can follow this topic tutorial:

Step and step to translate we will have a post on forum asap.

12. Theme Support

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free to us via email or Or create topic here: Thanks so much.

13. FAQs

13.1. How to change Cart page or Checkout page in WooCommerce?

From version 8.3.0 of WooCommerce, this plugin will auto create Cart page & Checkout page with Block Elements style and it causes functions of some plugins break.

Reference more here:

To resolve this issue you can following this topic:

View more products from HaruTheme