© Arrowhitech JSC 2016.


Circle Documentation v1.0

ArrowHiTech Jsc Is one of the Vietnamese leading IT outsourcing companies which puts high-quality services and customer’s satisfaction our top priorities. Since our establishment in 2007, we have increasingly widened our skills and our HR so as to meet all the demands of the customer all over the world with our dedicated services focusing on Web design & development, Extension/ Theme building, Mobile applications/ Games development and Internet marketing.

Version: 1.0
Author: ArrowHiTech.
Designed by: Moontheme

Install WordPress

If you haven't have a working version of WordPress, you need to install it first in order to install Circle theme. You can find many instructions to install WordPress in WordPress Codex or the Instructional Video created by Woo Themes. Below are some helpful links for you about WordPress information.

1. Install Theme

1.1 Installation

- Requirements for Theme

You can click here to find out more about requirements of WordPress.

Below are three requirements for working version of WordPress, php, and mysql.

You also need to make sure that your host can comply with follow requirements. We recommend using WP Engine or Blue Host for all your hosting needs.

  1. Your web host has the minimum requirements to run WordPress.
  2. Your host are running the latest version of WordPress.
  3. You can download the latest release of WordPress from official WordPress website.
  4. Always create secure passwords for FTP and Database.

- Recommended PHP Configuration Limits

Low PHP configuration limits can cause many issues. When related issues occur, you need increase your PHP limits to a minimum as follows:

1.2 Theme Installation

- Install new theme manually via FTP Client

In order to add a new theme to your WordPress installation, pleae follow these basic steps:

  1. Download the zip package of Circle theme in ThemeForest
  2. Unzip Circle.zip package which you can find inside Theme files folder.
  3. Connect to your FTP server and navigate to the WordPress installation folder.
  4. Go to wp-content/themes/ and upload Circle folder.
  5. Open WordPress admin panel (navigate through web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar. Activate Circle theme.

- Install Theme via WordPress Admin Panel
  1. Open WordPress admin panel (e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar and click "Add New" button.

  2. After that, click Upload Theme link and upload zip package of Circle theme.

  3. Once uploading theme is finished, it will install theme automatically.

    You can click Activate link or go to Appearance > Themes on admin sidebar to activate theme.

Once theme is installed, you need to install Required Plugins to get full working features.

1.3 Plugins Installation

- First method

Install plugins via installing plugins message.

After installing and activating the theme you will see the message about installing required plugins at the top of the page.

You should click Click here to install plugins all together. link in order to install needed plugins for Circle theme.

You will be redirected to Install Required Plugins page, here you will find all of the theme required plugins. In order to install these plugins, you just need to check all of them and select install then click apply.

After that, you will need to activate plugins. You should check all of plugins, select activate and click apply.

- Second method

Install plugins via WordPress Admin Panel.

Besides, you can install some plugins for Circle by navigating Plugins > Add New in admin sidebar. After that, enter plugin name to search plugin and click "Install Now".

When installation process is done, you can click Return to Required Plugins Installer and select active then check all plugins to active these plugin.

- Third method

Install plugins manually (Via FTP)

If you want to manually install plugins, you can follow some basic steps below.

  1. Download your WordPress Plugin to your desktop and extract plugin folder if it is a zip archive.
  2. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  3. Go to Appearance > Plugins and find the newly uploaded Plugin in the list.
  4. Click Activate to activate it.

After finishing plugin install, you need to configure the plugins.

1.4 Plugin Configuration

Note: The licence of some preminum plugin such as WPBakery Page Builder, Ultimate Addon can't active in each site. You can update latest version of it via our theme. Because we bought these plugins with extended version.

WPBakery Page Builder for WordPress is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.

You can see here for more details.

After installing the WPBakery Page Builder, please go to WPBakery Page Builder > Role Manager. In the post types field, you should select Custom and check all post type as the screenshot below.

For google map shortcode work effectively, you should go to Ultimate > Google Mapsand input Google Map API key.

Navigate to Settings > Instagram Settings to access "Instagram Settings" page. You need to enter Access token and User ID of your instagram account in order to get images. Remeber to click Save Changes to save information.

You can find user ID in this link

You can get access token via this website

Navigate to Settings > Circle Latest Tweets to access "Twitter API Authentication Settings" page. You need to enter Consumer Key, Consumer Secret, Access token and Access Secret and twitter username in order to get posts from your twitter account.

In order to get Twitter Access keys, you need to create Twitter Application:

  1. Go to https://dev.twitter.com/apps/new and log in, if necessary.

  2. Supply the necessary required fields, accept the Terms Of Service, and solve the CAPTCHA. Submit the form by clicking the Create your Twitter Application.

  3. Go to the API Keys tab and copy the consumer key (API key) and consumer secret from the screen into our application.

Go to MailChimp for WP > MailChimp to access general setting page of MailChimp. You should connect to your mailchimp account by entering API Key.

Also, in order to make MailChimp Form work effectively, you should navigate to MailChimp for WP > Forms in admin sidebar and click Save Changes.

For detail instruction, please click MailChimp for WP.

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

- Change Image Sizes

You can change the product image sizes in Woocommerce > Settings > Products > Display > Product Images on admin sidebar.

After change the image sizes, you should regenerate all the thumbnails using Regenerate Thumbnails plugins.

- Enable register in My Account page

Navigate to Woocommerce > Settings > Accounts, check the box Enable registration on the "My Account" page

Regenerate Thumbnails allows you to regenerate the thumbnails for your image attachments. This is very handy if you've changed any of your thumbnail dimensions (via Settings -> Media) after previously uploading images or have changed to a theme with different featured post image dimensions.

You can either regenerate the thumbnails for all image uploads, individual image uploads, or specific multiple image uploads.

You can see here for more details.

Please go Tools > Regen.Thumbnails and click Regenerate All Thumbnails.

Once Required Plugins are configured, you may be interested to install sample content as our demo sites. In the next section, we will guide you about demo installation.

1.5 Demo Installation

Note: You should make sure to set up Php configuration limit and max_execution_time as theme requirement before importing demo. See Installation

- First Method

Install demos via Circle option.

The First, You must active plugin AHT Importer

With Circle theme, you will be able to import several demos seperately. Circle contains 22 awesome demos for you to choose. Let select which one you like and click install to start import process.

Before installing demos, remember to check all PHP configuration to ensure your server meets all requirements for a successful import. Please read Install Theme > Installation for all requirements.

In order to import demo, you must import dummy content. After import dummy content successfully, you can choose which demo version you want and click Import Content as normally.

After that, click button Import Content

After import demo finish successfully, if revolution slider not showing. Please select slider in sidebar when edit page

Note: If this method don't work with your server, you can try import all demos by second method.

- Second Method

Install demo via All-in-One WP Migration plugins.

Remember that your site database will reset entirely after using this method.

Please follow steps lised below to import demo.

- Step 1: Install and activate All-in-One WP Migration plugin to use this method.

- Step 2: Download Demo backup file. Full demos content Demo backup file 2

- Step 3: Upload backup file to wp-content/ai1wm-backups folder.

- Step 4: Navigate to All-in-One WP Migration > Backups on admin sidebar


- Step 5: Click Restore button and wait for few seconds. You will see success message after click continue.

- Step 6: Login to the site with account: Username: admin, Password: Admin$123. After login with this account, you can change username and password back to your credentials.

- Third Method

Import demo data manually.

Note: Please remember to install all needed plugins before import demo data. If you have not install plugins, please see Plugins Installation to finish that step.

2. Build Your Site

2.1 Build Your Site

Please read carefully Theme Installation / Plugin Configuration before perform these follow configurations.

2.2 WP Configuration

- WordPress Configuration

You can adjust WordPress settings as follows:

2.3 Theme Options

As you can see in the screenshot below, Circle provides several usefull options for you to explore. You can find all options after clicking Circle link in the top page or in the admin sidebar.

You can see Theme Options for more details.

2.4 Menu Setup

- Create New Menu

In order to create new menu, you can navigate to Appearance > Menus in admin sidebar then click Create a new menu link. Give your new menu a name and click "Create Menu" button.

You can add new menu item by dragging item you prefer from the column on the left or check the box before item name and click "Add to Menu".

If you want to enable mega menu for your menu item, you should check "Mega Menu" box and choose number of columns to display.

After that, remember to assign theme location for your new menu. Circle provides 10 theme locations:

  1. Primary Menu: Menu in this location is used in almost types of header. For header type 1, it display as menu in mobile.

  2. Primary Menu Left : Used in left menu of header type 1

  3. Primary Menu Right : Used in right menu of header type 1

  4. Shop Menu : Menu in this location is used for header type 3 menu

  5. Bakery Menu: Similar to primary menu. Menu in this location will used in mobile of header type 4.

  6. Bakery Menu Left: Left menu of header type 4

  7. Bakery Menu Right: Right menu of header type 4

  8. Sport Menu : Menu of header type 2

  9. Business Menu: Menu of header type 5

  10. Mobile App Menu: Header type 7 menu

2.5 Header Setup

Go to Circle > Header in order to access header setup page.

General, Circle supports 8 types of header with general options like enable header sticky and header sticky in mobile. Beside some same options, each header will have their diferent options.

To find out more about these options, you can go to Theme Options > Header.

3. Theme Options

Circle provides many options for you to customize your page effectively. These options are organized into logical tabbed sections which will be very easy for you to navigate. Because of the sizable amount of options, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. See below for screenshots and short descriptions of Circle Options panel.

- There are 2 ways to access theme options.

1) Click Circle links in the top of page.

2) Click Circle in admin sidebar.

- After that, you will see a logical tabbed sections including a lot of tabs for you to discover. Below sections will go through each tab in detail for you.

3.1 General

- In this tab, you will see options for layout, sidebar, logo icon, favicon and custom JS code. Specifically, Circle enable 3 possible position for sidebar like Left Sidebar, Right Sidebar, Left and Right Sidebar or no sidebar if you do not select any sidebar regions for Left Sidebar and Right Sidebar options.

- For logo customization, you can freely to upload your desired logo image however we suggest you to use same size image as our demo site. It will help you to avoid some unwanted problem of header display. If you want to change logo for different header type, you should navigate to Header tab. Below will be a screenshot about these options.

- If you have select sidebar in Left Sidebar or right sidebar and don't see it display, please make sure to add widget to that sidebar. (Navigate to Appearance > Widget to check it.

3.2 Skin

There are 5 sub-tabs:

Note: If you changed any options in Theme Options and didn't see any changes in your site, please make sure to enable Compile CSS options from Off to On.

  1. General: After navigating to this sub-tab, you will see some options for you to set background color or background image. Furthermore, general font for your website is customizable with several google font family available as well as font weight, font style, font size and line height. Also, you can change main color and highlight color in this tab.

  2. Header: Circle allows you to set background color for header.

  3. Footer: Circle allows you to set background color, text color for some footers.

  4. Typography: Circle provides several choices to modify color as well as font family and font size of h1, h2, h3, h4, h5 and h6 font.

  5. Custom: this tab allows you to enter your custom css code.

3.3 Header

These options enable you to change header appearance with 8 types of header. A lot of awesome headers for you to select. Besides some same options to decide whether or not to enable sticky menu, each header will have different options such as display minicart, search form or upload different header logo.

- Also, for header logo, you can freely upload different logo in each page when editing page. Please feel free to explore several options available for header customization, color update and footer customization in Skin Options box.

3.4 Footer

- Circle supports 8 footer types for you to select. In addition, Circle allows you to customize copyright text, show/hide social icon and upload new logo image.

3.5 404 page

This tab let you to change background image and logo image of 404 page.

3.6 Blog & Single Post

- Circle gives you multiple selections for blog page.

For blog layout default, You can change sidebar positions (Left, right, Left and right or no sidebar) with wide or fullwidth layout. Also, There are 3 layouts (Masonry with summary, Classic or Classic with spaces) for your blog page. Furthermore, changing page layout for single blog is also enable for you. There are 2 layouts available which provide different style for some element of single post page.

- For Blog top banner, you can change page title, page description, background. In addition, options for showing custom menu is also available.

Note: For custom menu, we suggest you to select short menu to display effectively.

3.7 Portfolio

These options not only let you select layout and sidebar position but also allow you to choose gallery styles and loadmore button style. Also, you can change number of gallery show per page and gallery collumn in this tab. Furthermore, you can select top banner and bottom banner to display in portfolio archive page, portfolio single page.

3.8 Shop

- General

There are available options for you to hide wishlist, quickview, compare, product label, product price and add to cart button.

There are two sub-tabs containing usefull settings for Product listing and single product page. Let take a look at these options.

- Product listing

Beside some options for layout, sidebar as other page, Circle allows you to change number of products to display per page and select number of column (2,3,4). Also, if you activate YITH WooCommerce Brands Add-on plugins and add some brand image for your product, brand image slider will automatic display at the bottom of page. Therefore, if you want to hide it, you should turn off Show product brand slide option.

- Single product

For single product page, you also can customize page layout as well as sidebar position. Furthermore, you can choose display styles of product and hide related products block.

Please look at sceenshot below to see clearly about these available options.

3.9 Social

This tab provides options for you to enter social links whichs display in footer, blog top banner and comming soon header.

3.10 Coming soon

This tab provides options for your comming soon page when your site on maintainance mode.

Look at sceenshot below, you can see that there are several useful options such as content customization, display countdown timer and subcribe form, social list link and select menu to display.

For subcribe form shortcodes, please install and activate Mailchimp for Wp plugins and then navigate to Mailchimp For WP > Forms > Get Shortcode. After that paste shortcode in this option.

4. Content Types

To use some Circle content type, please ensure that Circle Shortcodes plugin, which allows you to create some custom post types, is already installed. If not, you can install this by following some steps below.

4.1 Post

- Creating / Editing Posts

Step 1 - Navigate to Posts in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field.

Step 3 - Select Post Format and enter suitalbe content for post format in Post Format box.

For example, Video and audio format, you will need to enter embed link of youtube, vimeo or soundcloud in Video & Audio Embed Code.

If you choose Gallery format, you will see Image Gallery box display in the right of page. Image in gallery will be shown as slider.

If you choose Blockquote format, you will need enter quote and quote author

For Link format, you will need enter title and link

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 - Add Featured Image for your post. In order to add featured image for your post, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 6 - Add content for "Short description" in Blog Options. This content will be display as summary in blog list.

Step 7 - Once you are finished, click Publish or Update in the right side to save the post.

4.2 Portfolio

- Creating / Editing Portfolio

Step 1 - Navigate to Portfolio in your WordPress admin sidebar. Click Add New to make a new post.

Step 2 - Enter title.

Step 3 - Insert your post content in the editing field. Note: if you used Masonry style 4, portfolio has content or not will display differently.

Step 4 - Add Categories from the right side. To assign it to the post, check the box next to the category name.

Step 5 - Add Featured Image and Featured image 2 for your portfolio. In order to add featured image for your post, click the first Featured Image Box, select an image and click the Set Featured Image button. Featured image 2 will display as logo image of your portfolio.

Step 6 - Add Gallery images in "Images Gallery" box.

Step 7 - Select Portfolio style.

- You will be able to select different header, footer and banner block for your single portfolio page. Selections in each page will have higher priority than general Theme Options.

- Also, there are 5 portfolio styles for you to select.

Step 8 - Adding needed information such as art director, designer, photographer and type of works in Portfolio Options Box. Also, you will need to enter social link for Facebook, Twitter, Youtube and Google plus too. Options for select image width, select image size, add overlay background, select title color and changing logo position will only work for some portfolio archive page layout. For example, select image size is only used for Portfolio masonry style 5.

Step 9 - Adding skin options. It allow you to select different skin color, upload header logo, footer logo and select header, footer background. Note: Selection in each page setting will have higher priority than general Theme Options.

Step 10 - Once you are finished, click Publish or Update in the right side to save the post.

4.3 Static Block

In order to add or edit static block content, you can follow these basic steps below.

Step 1 - Navigate to Static Block in your WordPress admin sidebar. Click Add new if you want to create new, otherwise, click Static Block and select post if you want to edit.

Step 2 - Enter title

Step 3 - Enter content. You can using WPBakery Page Builder to add shortcode to content.

Step 4 - Once you are finished, click Publish or Update in the right side to save changes.

5. Shortcode

Remember to install and activate Circle Shortcodes plugin.

In order to add shortcodes using visual composer, you should enable visual composer editor and select the element you want to add. If you click the following button, will be show the popup.

There are several content elements for you to choose. Please take some time and feel free to explore all shortcode available. Specifically, Circle enable user to use Utimate VC Addons with several effective shortcodes. You can take a look in Utimate Addons elements

- Screenshot of all elements in Circle

- Screenshot of available shortcodes in Utimate VC addons

- Circle shortcodes

In total, Circle provides 17 effective shortcodes for you. Besides some general settings for extra class, each shortcodes will contain their own options. Below will list detaily all available choices of each shortcodes.

5.1 Circle Static Block

This shortcode will generate all post of "static block" content type for you to select. Specifically, it provides a dropdown containing name of all published static blocks for you to select.

5.2 Circle Container

This shortcode helps you to wrap all the content inside into a container class. After add this shortcode to your content, you can add another shortcode placed inside Circle Container by click "plus" button.

5.3 Circle Heading

Contain all of heading style in Circle.

- Select style of heading. There are 11 styles available.

- Enter small and big heading title.

- Select heading tag

- Select heading alignment.

- Add extra class name

Animation tabs

- Enable item delay

- Select animation type.

- Add animation delay time.

- There are several types of animation for you to choose.

5.4 Circle Banner

List of options available:

- Set small and big title.

- Select banner layout

- Upload banner image

- Set text align

- Add button link

- Add extra class name

5.5 Circle Member

List of options available:

- Select layout

- Add image of member

- Add name and job

- Show/hide social links.

5.6 Circle Pricing Column

List of available options:

- Add block title.

- Add currency.

- Enter price number and description.

- Enter content

- Add button text and select button link.

- Add extra class.

5.7 Circle Special Menu

List of available options:

- Add image.

- Add image link.

- Add product name.

- Select link for product.

- Enter product category.

- Add price and product currency.

- Add extra class.

Example of special menu shortcode.

5.8 Circle Counter

There are 2 custom tab in this shortcode: General and skin tab. General tab allows you to:

- Enter block title.

- Enter counter number.

- Select heading style.

- Add extra class for custom stylesheet.

Skin Tab:

- Changing title color and number color.

5.9 Circle Testimonial

Below will list all available options in this shortcode.

- Select heading style. There are 4 styles available.

- Choose show or hide social links.

- Enter name and description.

- Upload images.

- Add extra class.

5.10 Circle Instagram Feed

This shortcode lets you to display images from Instagram account.

Note: You need to set Access token and user Id before use this shortcode. See Plugin Configuration > Circle Instagram Feed

Options are available in Product Filter shortcode

- Enter number of images to display.

- Add title.

- Show/Hide text

- Enter name of account to display

- Add extra class

5.11 Circle Button

List of options available:

- Select button type. There are 5 styles available for you to choose.

- Select button color

- Enter button text.

- Set text align(left, right or center)

- Choose link.

- Add extra class.

5.12 Circle Product

This shortcode allows you to display product into different layout.

Below will be list of available options .

- Select layout

- Select number of product to show

- Add block title and sub title

- Add block description.

- Upload background image title.

- Select number of product columns ( 4 columns is default number)

- Add parent category ID (filter product by parent category ID). You can find category ID by navigating Product > Product Categories. Select category you prefer and click edit. In the navigation path of browser, you will see category ID as "tag_ID"

- Show/hide view more button.

- Add extra class for custom style

5.13 Circle Blog

- Select blog layout.

- Change number of items to display.

- Change number of columns display on desktop large, desktop, tablets and mobile.

- Add extra class.

Data tab:

- Select data type to display: Recent, featured and most viewed.

- Select order way.

- Add category IDs or slug name of category to display post


5.14 Circle Product Slide

List of available options:

- Select product type.

- Change number of products to show.

- Change number of products to show per slide.

- Add parent category ID. You can find category ID by navigating Product > Product Categories. Select category you prefer and click edit. In the navigation path of browser, you will see category ID as "tag_ID"

- Select order way

- Change number of items display in desktop large, desktop, table and mobile.

- Add extra class.

5.15 Circle Portfolio

List of available options:

- Select layout. There are 4 types of layout available.

- Change number of columns

- Change number of gallery to show

- Show/hide view all button

- Enable/disable item delay.

- Add extra class.

Data tab:

- Choose display date type: Most viewed, featured or recent. Shortcode will display recent portfolio as default.

- Select parent category id to display.

- Changing order way.

5.16 Circle Service

List of available options:

- Select service style.

- Enter First title and Last title.

- Enter First Letter Title

- Enter description.

- Upload image.

- Add custom link.

- Add extra class.

5.17 Circle Slider Wrap

After adding this shortcode, you can click to plus button to add slider elements.

Options available:

- Select layout.

- Show or hide dots and navigation arrow.

- Add extra class name.

6. Widgets

In order to add Widget to sidebar, you should click to the widget which you want to add and select sidebar.

6.1 Circle Instagram Feed

Note: if you do not see this widget in Appearance > Widget , please navigate to Plugins and activate Circle Instagram Feed plugin.

This widget will display images from your instagram account. If you haven't set Instagram API information, please see Plugin Configuration > Circle Instagram Feed and follow instructions. This will allow you to add widget title, set number of photos to display and filter image by hashtag.

- Circle Instagram Feed options

6.2 Circle Brand

Note: This widget is only available when plugin YITH Brands is activate.

This widget will allow you to enter widget title, choose display style (either list or dropdown), display post counts and show hierarchy.

6.1 Circle Latest Tweets

Note: if you do not see this widget in Appearance > Widget , please navigate to Plugins and activate Circle Latest Tweets plugin.

This widget will display recent tweets from your twitter account. You should config the plugins setting in Settings > Circle Latest Tweets to make the widget work. Please see Plugin Configuration > Circle Latest Tweets and follow instructions if you haven't set Twitter API. This will allow you to add widget title, set number of photos to display.

7. Translation


WPML is the most popular plugin for multi language support. Below you will find documentation their team created for using WPML plugin. If you've purchased WPML and have any questions or issues, please check the links below.

Use Loco Translate

Please read Loco translate installation

  1. Install and activate the plugin Loco Translate

  2. Go to Loco Translate > Manage translations Click the “+ New language” button beside the “Optimizer PRO”.

  3. Select The language you want the texts to be translated and continue.

  4. On next screen all the “English text strings” that are inside the theme will be listed. Select text string from the “Source Text” list and then Add your translated text in the textarea below.

  5. Click the Save button.

NOTE: You need to set your language in Settings > General to display translated text in frontpage

8. Site Speed Up

We recommend using the WP Super Cache, W3 Total Cache plugins.