Ark Theme Documentation

Offline documentation may be slightly outdated, please check the always up-to date Our online documentation.

Installation

If you are new to WordPress and/or looking for information that are outside of the scope of this documentation, WordPress has a series of tutorials that will help you get started. Please visit the official Getting Started with WordPress guide. There is also guide how to install WordPress.

Installing by theme upload in WordPress

You may download the theme ZIP file in https://themeforest.net/downloads. If you are not logged in, log in first. Click there on the button Download next to the theme Title. Submenu will be opened. Click there on Installable WordPress file only.

Upload the theme ZIP file via WordPress Admin ⇒ Themes ⇒ Add New.

Click on Upload.

  1. After you click on upload [1], there will appear input for file.
  2. Click on file input [2] and pick the downloaded ZIP file with theme.
  3. Click on Install Now [3].

Once uploaded successfully, you can activate your new theme in WordPress Admin ⇒ Appearance ⇒ Themes ⇒ Activate. This will show the option for installation additional plugins.

If you receive an error during upload via the WordPress Admin, it's usually caused by one of these problems:

  • You are uploading incorrect ZIP file. Sometimes you need to unzip it first and find yet another (correct) ZIP inside that you should upload instead.
  • You need to contact your server host and ask them to increase the PHP memory limit for you (it's free). Some (usually cheap) servers have it set low by default and this prevents you from uploading files larger than a couple of MB.
  • Another solution is to install and upload theme via FTP.

Installing by FTP

If you are experiencing problems with classic WP theme upload, we strongly recommend you to upload the theme via FTP. In that case upload unzipped theme into the /wp-content/themes/ directory.

Theme plugins installation

Even if theme works without "Fresh Framework" or "Ark Core", but we strongly recommend you to install and active it to use 100% theme options and settings.

After the theme installation and activation you will see a few notices at the top of WP administration pages. There will be notice box with title The following recommended plugins are currently inactive: .... with link Begin installing plugins.

Click on the link and install the plugins and with similar procedure activate the plugins.

Page with plugins to install will be opened.

  1. Change select with value Bulk Actions to value Install [1].
  2. Click on the checkbox with labe Plugin [2].
  3. Confirm by clicking on Apply [3].
tgm-return-to-plugins-installer

Plugins will be installed, continue by clicking on Return to Required Plugins Installer.

tgm-appearance-activate-plugins

Page with plugins to activate will be opened.

  1. Change select with value Bulk Actions to value Activate [1].
  2. Click on the checkbox with labe Plugin [2].
  3. Confirm by clicking on Apply [3].

If you receive the error during the installation and activation, there are probably similar errors, which may occur during the theme installation.

In that case we recommend you to unzip files in the theme directory /ark/install/zips/ and upload them to the server to the directory /wp-content/plugins/ via FTP client.

License activation

purchase-code

You may download the theme TXT file with licence key in https://themeforest.net/downloads. If you are not logged in, log in first. Click there on the button Download next to the theme Title. Submenu will be opened. Click there on License certificate & purchase code (text).

licence-key
  1. Open the downloaded file.
  2. Find your code under the Item Purchase Code: line.
  3. Copy the code.
licence-key-show-licence
  1. Paste copied code into the WP Admin Menu > Dashboard into the field Licence Key
  2. Confirm in by button Show Licence
licence-activation

Your licence will be activated

Wordpress Settings and Options

Setting up your Front Page as Page

settings-readings-front-page
  1. Go to WordPress Admin Menu ⇒ Settings ⇒ Reading
  2. Select in Front page displays section an option static page
  3. You can choose there your Front Page (Home) in select option
  4. You can choose the Blog page in select option Posts Page

Setting up your Front Page as Blog

settings-readings-latest-posts
  1. Go to WordPress Admin Menu ⇒ Settings ⇒ Reading
  2. Select in Front page displays section an option Your latest posts

Fresh Builder

How to activate Fresh Builder

add-new-page-edit-with-freshbuilder
  1. Open existing or create new page.
  2. Click on the Edit with Fresh Builder button if builder mode is not activated.
fresh-builder-add-elements

Buttons with tooltip will appear:

  • Add Section From Library
  • Add Element
  • Add Section with 1 Empty Column
  • Add Section with 2 Empty Columns
  • Add Section with 3 Empty Columns
  • Add Section with 4 Empty Columns
  • Add Advanced Bootstrap Grid Section

How to insert Hello World!

Meaning of Hello World is the simplest example program that, when run, displays the message: Hello World. I will show you how to make in in the Fresh Builder.

freshbuilder-add-section-with-1-column

Click on the Add Section with 1 Empty Column icon button.

freshbuilder-add-element

Click on the Big + icon button in the column or on the + icon button in the column menu.

freshbuilder-add-element-modal

Type into the search field "Head" and choose Heading element.

fresh-builder-edit-heading

Click on element Heading to edit it.

freshbuilder-headinh-edit

Change the text to "Hello World" and press Save Changes button

Controls

Basics

freshbuilder-keybor-shortcuts

For your better comfort and faster usage, we implemented keyboard shortcuts

  • Space or Return will confirm modal dialogs
  • Esc or Q is canceling action
  • D is for duplicate (when hovering on element)
  • R is for remove (when hovering on element)

You can always click on the Shortcuts button to see all possible shortcuts

Context Menu (Right Click Menu)

freshbuilder-right-click

Just like you are used to from your favorite desktop-class applications, you can instantly bring up a list of available actions by right-clicking on any element.

Quick Save

freshbuilder-quick-save

When you press Quick Save button, everything will be immediately saved in the background, without refreshing the editor page. If you have your website front-end opened in another tab/window, it will automatically refresh it.

If you use 2 monitors, we recommend you to have one WP Admin opened in one monitor and your site in the second monitor.

Repeatables

freshbuilder-repeatables-with-second-modal

There are a lot of elements, that have something, we call Repeatables. For example images slider have images - that are in this case repeatable items. You can:

  1. Change order by dragging [1].
  2. remove [2]
  3. edit [3]
  4. add these repeatables [4].

 

Elements Tab Settings

Fresh builder allows you to fully customize any elements on your page. As you saw in previous chapter there are a lot of tabs ant these tabs contains a lot of settings for each element. Two tabs groups represent data and design settings.

Data Tabs

General

freshbuilder-tab-general

Options in the tab general are basic like text, images or icon. It may contain colors in specific cases like image slider, where you can set right and lift arrows colors.

Advanced

freshbuilder-tab-advanced

Advanced tab is almost same as General tab, but contains for advanced features. For example in columns advanced settings you will find bootstrap features like column push, pull and offset.

Loop and Pagination

freshbuilder-tab-loop-pagination

Loop and pagination tabs are for blog and portfolio. You can add with this feature sections like the latest portfolio into any page.

Design Tabs

Those tabs for element design, there is no content like texts.

Box Model

Box Model tab is for few element settings like Background Layers, Padding, Margin and other.

Background Layers
freshbuilder-boxmodel-bg

You can now add backgrounds almost anywhere. Lower layers overlays upper layers. Each layer allows you to show only it on hover or hide on different devices like mobile - for example - if you do not wish to show YouTube video background on mobile devices for better page performance.

Padding and Margin
reshbuilder-boxmodel-padding-margin

Padding and margin is there for setting space around edited elements. If you are not advanced user, just remember, that background are applied on padding - space, but not on margin - space. Borders are shadows are around padding - space.

Typography

freshbuilder-boxmodel-typography

Typography is about font settings for element and its children.

The most important option is Text Color Palette, which allows you to set dark, light or Inherited text color. This feature is useful, because it option is applied to all child element (in the case of section, row or column for example).

Text Color allow you to set different colors for text, links in it and hover or not-hover settings.

You can also Text Align, Font Size, Line Height and others options, where you can apply different setting for different devices.

element.style

freshbuilder-boxmodel-element-style

element.style is about font settings for element, not its children - that is main difference between it and Typography tab.

You can set there ID and additonal CLASS html attribute. If you wish to add more clases, just put space between them, for example "class-1 class-2 class-3".

Typography section in element.style is connected only with element, not its childrens.

 

Custom code

You can add your custom CSS and JavaScript code here. Every element has it's own unique CSS class that will help you target it. Custom CSS and JavaScript code will be printed at the end of the page.

Custom CSS
freshbuilder-boxmodel-element-style-custom-css

 

You can add custom CSS for edited element by clicking big green plus (+) button. Custom CSS may be applied only for choosen devices (mobiles, tablets, laptops, desktop cumputes).

Custom JavaScript
freshbuilder-boxmodel-element-style-custom-js

You can add custom JS (Javascript) by clicking big green plus (+) button.You can choose, that JS will be wrapped by jQuery and $(document).ready() function.

In order to reference this element in your JavaScript code, please use this string !selector! - It will be replaced with the unique CSS class automatically during page rendering. So for example a jQuery object of this element can be written as $('!selector!')

Theme Options and Sitemap Settings

All Settings for Ark theme are in WP Admin Menu > Ark. There is whole magic, that allows you to set up your site as you like.

Theme Options

Layouts

to-layout

You can enable or disable Page loader, Scroll to top button and Smooth Scroll.

Skins and Accents

to-skins

Skins and Accent Tabs allows you change the colors of the elements, that are not in the page builder - for example scroll to top button.

Fonts

to-fonts

This Tab allows you to set up your site fonts, it enables you to use Google Fonts or your uploaded fonts.

You can use even your own custom fonts, but in that case you should upload EOT, WOFF, WOFF2 and other fonts via FTP. Please note, that you must have filled at least one path to font.

There are Body, Body Alt and others section under under the Custom Fonts section. These are here to set up font for page. You can change the fonts in the elements in typograpty and element.style section.

Icon Fonts

to-iconfonts

This Tab allows you to enable or add icon fonts to your site.

You can use even your own custom icon fonts, but in that case you should upload CSS fand font files via FTP and fill the path to this CSS file.

There is also a lot of predefined fonts for you, which you can enable.

Portfolio

to-portfolio

Portfolio Tab allows you to change slugs (part of URLs) for portfolio post type, portfolio categories and tags.

Google API

to-google-api

Because Google Maps needs API key, there is Google API tab is for it.

Please note, that you must have Google account (email) to create API key. To create your API key:

  1. Go to the page https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key and click on the button GET A KEY.
  2. Click on Continue -it will take a moment
  3. Click on Create
  4. There will be the modal window with input labeled Here is your API key

Sitemap

sitemap-page

You can change in the WP Admin Menu > Ark > Sitemaps the layout of the pages, blog pagess, portfolio pages, search results and 404 page.

Each page type has its own pagebuilder.

sitemap-page-layout-settings

Each page type has also Layout Settings, where you can set Header, Titlebar and Footer.

Headers

headers-settings

There are a lot of header types in the Ark. You can few of them in http://themes.freshface.net/ark/ in the menu features. You can edit Headers in WP Admin Menu > Ark > Headers. There are notes and description under each option.

headers-settings-colors

There are tons of color settings for the Ark Headers.

Titlebars

titlebars-settings

Titlebars represents the area under the header and before the page content. Each Titlebar has page builder area.

Footers

footers-settings

Footers is the area after the page content. Each Footer has page builder area.

Templates

template-post-type

Templates is custom post type for including page parts, which are in more pages. For example - if you have call to action, that is same on 10 pages and you know, that you will change it in the future, then use template. You can change template in one place and every page, that contains element Template that points to that call to action will be changed.

Sidebars

sidebars-setting

Sidebars are for adding your custom sidebars. You can use them in the Sidebar element in the page builder. Please note, that you need to fill sidebar ID - Allowed characters are a-z, 0-9 and minus character -. Also note, that sidebars with same ID will be ignored.

Dummy Content Import

demo-install

There are prepared dummy demo installs in WP Admin Menu ⇒ Ark ⇒ Demo Install. To install chosen demo click on the link Install Now.

Customization and Child Theme

We recommend not to edit the source code of the theme as well so you can easily update it (updates overwrite your changes). We recommend to use Child Themes.

We also deliver the child theme inside the package downloaded from themeforest, for more comfortable usage: ark-child.zip file (right-click on this link and select Save As!).

FAQ - Frequently Asked Questions

There is no change after change

Some part of your page is probably cached. There are few solutions:

  • If you use some cache plugin like W3 Total Cache or WP Super Cache or WP Fastest Cache, then please delete cache.
  • It is also possible, that theme has some compatibility issues with some outdated plugin or with plugin which does not use standard WordPress interface. In that case, if you have installed Fresh File Editor, go to WordPress Admin ⇒ Tools ⇒ File Editor, open path WordPress ⇒ wp-content ⇒ uploads, right click on freshframework and in menu click on delete.
  • It is possible, that you have set cache on your hosting. Try to refresh after 30 seconds.
  • If you have problems with JavaScript or CSS, try to do web browser hard refresh:
    • Windows: ctrl + F5
    • Mac/Apple: Apple + R or command + R
    • Linux: F5

    You can also try anonymous browsing.

Portfolio shows 404

Go to WordPress Admin ⇒ Settings ⇒ Permalinks and press there Save changes even if you did not change anything.

I changed domain or HTTP to HTTPS and web is broken

We do NOT recommend to change domain or WordPress URL. We understand, that sometimes it is necessary. In that case:

  1. Do backup MySQL and whole Wordpress directory.
  2. Check backup once again (You must be sure that everything is backuped, really).
  3. Go to WP Admin.
  4. Replace page url from /wp-admin/ to /wp-admin/options.php
  5. Find there options home and siteurl and replace values to the new right values - new WordPress URL
  6. Press Save on the page bottom.
  7. You will have to change images path in pages, posts, portfolio posts and options.

I see no images or blank images

You need to allow writing in directory /wp-content/uploads/freshizer/ - if it is not created, please create it with writing rights by FTP.

Also please check your server configuration - do you have allowed GD library ( PHP library for images )? If not, allow it.

How to create twitter access token?

  1. Go to site https://apps.twitter.com/app/new and log in
  2. Into fields Name, Description, Website insert your website url f.e. http://freshface.net/
  3. Check "Yes, I agree"
  4. Click on button "Create your Twitter application"
  5. Find and click on Button "Test Oauth"
  6. Log in again
  7. Use inputs here - you may put anything in "Access Token" and "Access Token Secret"

Theme Updates

You can simply update this product from WordPress Admin ⇒ Dashboard ⇒ Updates. Do not foget to register theme before.

Bug reports and feature requests

Please let us know your concern via our support channel.

Support

We offer free support to our paying customers for general installation/usage/bugs, etc. We have a dedicated Support Center for our products where you can find additional help from our Support Team and other users in the Community Forums.