Hello! First of all we would like to thank you for purchasing our theme! :) If you have any questions that are beyond the scope of this help file, please feel free to send your question on support@anpsthemes.com.

This file will teach you how to set up and use our theme.

This file is really extensive so you might think the theme is hard to use, actually its not, you probably just might jump to the options page and explore everything yourself, this file is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Have fun using our theme!

Best regards,

Anps team

Installation

You can either choose to upload the theme to your server via FTP (only upload the unzipped theme folder into the folder wp-content/themes/) or via WordPress upload function. To use the upload function of the WordPress admin panel make sure to ONLY upload the main theme folder and not the whole archive file that you received from ThemeForest.

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file that comes with the theme. You can import this file by clicking the "Insert dummy content" Button in the Appearance → Theme Options → Dummy Content. The theme will then import dummy posts and pages from the live preview (please note that you will not receive the images that we used on our demo site, as we are not the owners of them).

Beginner Resources

Theme Options

To visit the main theme options, either click on Theme Options in the admin bar (bellow the address bar) or go to Appearance → Theme Options.

Style Settings

Our template is design with customisation in mind! That means you can create a very unique website, with just setting our theme options.

Theme Style

You can change colors separately, but you can also choose one of our predefined color schemes, to either just use as your theme scheme or as a basis from which you can set colors as you wish.

Font family
Font family

Here you can choose three font types:

When selecting a font family you will be able to choose a font from three groups:

Heading Sizes

Here you can set the font size for H1-H5 headings.

Predefined color Scheme

Here you can choose from predefined colors schemes. When you choose a color scheme, it will only fill in the options below, so you can still change any color, without editing the predefined colors.

Setting the colors

You can put in the HEX values for what color you would like, or you can click on the colored box, which will open our colorpicker.

Update Google Fonts

At the initial theme installation no fonts will be added so you will need to import them by pressing Update Google Fonts in this section. Note that the process might take a while, as there are quite a lot of font families that need to be imported.

If in the future you will see a new Google Font and would like to use it on your site, then import the fonts again by pressing Update Google fonts.

Upload Custom Fonts

This section allows you to add new font families. The fonts can be easily added by selecting a .zip file (you need to provide more than just one font file type, so that all browser will be able to use you font) and pressing Save all changes.

General Settings

Page layout

Here you will find all of the theme layout settings, such as is the theme boxed, is responsive activated, etc.

Disable Responsive

Here you can turn off responsive mode for template. If the responsive option is turned off, then our the won't adjust to all devices (mobile, tablets etc.).

Enable Preloader

If this option is checked, then a preloader will be used for loading your site. A preloaded at first shows progress bar and displays the site once everything has loaded.

Boxed

The default value for the page layout is Full layout, but you can also select the boxed version. Once you will select the boxed version you will be able to choose 9 patterns or a custom background, which you can set to either a streched or tilled image (tilled is best used for adding your own patterns) or you can pick a solid color.

Boxed options
Copyright footer

Here can edit the text which is used for the copyright footer.

Page setup

On this page you can select which page will be shown on error 404, Footer Layout style and what content will be displayed before the Blog page.

404 Page (Page not found)

Select a page from a dropdown of already added pages, which will be displayed on 404 errors.

Footer Style

You can select three footer styles: 2 columns, 4 colums or 2+4 columns. Once you select a footer style the appropriate widget areas will appear under Appearance - Widgets.

Before Blog content

Here you can add the content which will be displayed above the Blog page and on individual Blog posts.

Social accounts

Here you can set your email address and Google Analytics account.

Media

Favicon

You can upload an image - icon, that will be shown at the top of browsers for your site. You can upload .png and .ico files.

Logo

The selected image will be used as your site logo, which will be shown at the top left of your site.

Here you can also specify the logo width and height.

Shop Settings

Number of Columns

Number of products per row. You can choose 2, 3, 4 or 5 columns.

Products per page

Number of products for each page on the shop page.

Show second image on product hover

If this option is checked, then the first image in the product gallery will be displayed on hover.

Before shop content

The content that will be displayed on all WooCommerce pages - shop, single products, account, cart, checkout, etc.

Contact Form Options

From this tab you can easily create any kind of contact form you like. For each box you have 5 set of settings:

You can add or delete fields by either clicking on the plus or the minus sign on the right side of each field. The new field will be added behind the field you clicked on.

Note: If you want the dropdown to be required, then add the first element blank, so no value is selected at the start.

Contact form
Contact form admin area

Dummy Content

Image showing the dummy content admin area.

If you are new to WordPress or have problems creating posts or pages that look like the theme preview you can import dummy posts and pages here that will definitely help to understand how those tasks are done.

Important: Please make sure you have set your links to pretty link, so you won't receive any errors, check also menu description below.

Important: If you are having trouble inserting dummy content and are receiving server errors, you will probably need to set your file permissions on folder wp-content/uploads ( if you don't have the folder, create it manually and set the permissions only on this folder ).

If you don't want to set, can't or don't know how to set file permissions, you can download this .zip file and place it into wp-content folder.

Manual instalation ( with WordPress Importer ):

Installing the WordPress Importer:

  1. Visit Tools → Import in the WordPress dashboard
  2. Click on the WordPress link in the list of importers
  3. Click "Install Now"
  4. Finally click "Activate Plugin & Run Importer"

In our theme files you will find a .xml file (under anps-framework/classes/importer/dummy.xml). Use that file in the next step where it says: "Choose a WXR (.xml) file to upload, then click Upload file and import." and click on Upload file and import. In the next step you need to assign all the posts/page to a existing user or create a new user. In this step also be sure to have the Download and import file attachments checked, then click on the Submit button and you are done!

Megamenu

To create a megamenu you will first need to go to Appearance → Menus and open the Screen Options and checking the CSS Classes and Description options (you can also check the Product Categories if you intend to use them). Click on Save Menu to save the settings.

Then you need to assign a megamenu class to the parent element - the element at the top most of the structure (in the below examples this means to the Shop element).

WordPress menu options

Adding links

To add a group of links, you need to first add a parent element that will contain the title.

When adding the parent element set the URL to "#", the Navigation Label to the desired title (in our example we named it Links) and assign a no-link class to it, so it changes it to a heading.

Adding links to megamenu

Adding Text

Create a new element and set the URL to "#", the Navigation Label to the desired title (in our example we named it Links), assign a no-link class to it, so it changes it to a heading and insert you text in the description area.

Adding images

You can use the [image alt="Alternative text"]Image URL[/image] shortcode inside the description area to add images.

WooCommerce

Basics Settings

Create WooCommerce pages (you can solve this two different ways):
  1. When prompted by WooCommerce click on Install WooCommerce Pages
  2. Create pages by yourself and insert the shortcodes for each page ([woocommerce_cart], [woocommerce_order_tracking], etc.). Once you have created them, go to WooCommerce → Settings → Pages and select each desired page for the settings.

Link to the extensive documentation: http://docs.woothemes.com/documentation/plugins/woocommerce/

WooCommerce Shortcodes

The full list of shortcodes can be found here: http://docs.woothemes.com/document/woocommerce-shortcodes/

Wishlist

We have added support for the plugin YITH WooCommerce Wishlist, which we have provided with our theme (we changed a few files, so please use the plugin provided with our theme). You just need to install the plugin, set the Wishlist page under WooCommerce - Settings - Pages and translate the plugin.

Full documentation

Compare

We have added support for the plugin YITH WooCommerce Compare, which we have provided with our theme (we changed a few files, so please use the plugin provided with our theme). You just need to install the plugin and translate a few words.

Full documentation

Visual Composer

If you do not want to use our Shortcode Manager, then you can install Visual Composer, which allows you to add content using a visual editor - you do not need to write the shortcodes by hand.

If you need more information on our shortcodes, then check our shortcode section.

Visual Composer help page: http://kb.wpbakery.com/index.php?title=Category:Visual_Composer

Adding Blog Posts

To add a post to your blog go to Posts → Add New, then add post heading, post content, add Featured image and assign the desired categories. See more details on adding posts.

Adding a video to your Blog posts

Above the Featured image option (right side) on posts you can find the Featured Video option. You can add either the [youtube] or [vimeo] shortcodes to display the videos.

Adding a gallery of images to Blog posts

Above the Featured image option (right side) on posts you can find the Gallery Images option.

Adding Portfolio Posts

Adding Portfolio posts is the same as adding Blog posts, the only difference is that you do not add the posts under Posts, but under Porfolio sections.

Widgets

You can add widget in Appearance → Widgets by drag and dropping in the Sidebar box.

Once you have added a widget to the Sidebar box the widget will open and extra fields will appear.

More information on widgets.

Shortcodes

Shortcodes are small text snippets that get converted by WordPress. As an example:

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets, such as:

[quote] This is a pull-quote. [/quote]

The theme comes with quite a few shortcodes that are easily accessible thanks to a visual self-explanatory user interface that is accessible by clicking the Shortcodes button when you write a post or a page. Most shortcodes require you to enter additional information and then get generated by the theme on its own. You can also choose to nest various shortcodes.

Attention: Please make sure to always start new shortcodes on new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the HTML sometimes.

Click here to see our shortcodes in action.

Accordion

[accordion opened="false"]
   [accordion_item title="TITLE"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor nunc, consequat sit amet feugiat quis.[/accordion_item]
   [accordion_item title="TITLE"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor nunc, consequat sit amet feugiat quis.[/accordion_item]
[/accordion]

Parameters:

Blog

[blog order="DESC" orderby="date" category="test"]5[/blog]

Parameters:

Box

Wraps a text with a box wrapper.

[box]HTML5, CSS3, RWD, PHP[/box]

Button

[button size="large" style="style1" link="http://anpsthemes.com/move/" target="_blank"]Button text[/button]

Parameters:

Color

[color style="secondary"]This text is colored differently[/color]

Parameters:

Contact form

[contact subject="This is an awesome email!" email_to="support@anpsthemes.com" email_from="support@anpsthemes.com" error_required="This element is required" error_email="Please insert a valid email" error_number="Please insert numbers only" error_text="Please insert only letters" success_msg="Your message was successfully sent!"][/contact]

Parameters:

Google maps

[google_maps zoom="16" height="500" layout="full-width" icon="map_pin.png"]Ljubljana[/google_maps]

Parameters:

YouTube

[youtube]IG0wyXUcqZI[/youtube]

Displays a video from YouTube. You only need to insert the video ID, not the entire URL.

Vimeo

[vimeo]46106724[/vimeo]

Displays a video from Vimeo. You only need to insert the video ID, not the entire URL.

Quote

[quote]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, in.[/quote]

Icon

[icon style="secondary" position="left" icon="heart" title="Icon align right" link="#"]Mauris et rhoncus tellus. Aenean dapibus, enim id mattis pulvinar, erat quam vehicula lacus, ac tristique nisi tellus nec diam.[/icon]

Parameters:

Icon Group

[icon_group]

Column layout

[content_half id="first"]1/2[/content_half]
[content_half id="last"]1/2[/content_half]

[content_third id="first"]1/3[/content_third]
[content_two_third id="last"]2/3[/content_two_third]

[content_quarter id="first"]1/4[/content_quarter]
[content_two_quarter]2/4[/content_two_quarter]
[content_quarter id="last"]1/4[/content_quarter]

Parameters:

Progress bar

[progress percentage="90"]HTML[/progress]

Parameters:

Team

Displays posts from the team post type.

[team heading="Team" /]

Parameters:

404 Error Message

[error_404 title="404 page not found"]Page doesn’t exist or some other error occured. 
go to our home page or go back to the previous page[/error_404]

Parameters:

Tabs

[tabs]
[tab title="Title 1"]Tab content 1[/tab]
[tab title="Title 2"]Tab content 2[/tab]
[tab title="Title 3"]Tab content 3[/tab]
[/tabs]

Parameters:

Logos

This shortcode is used for displaying company shortcodes.

[logos]
[logo alt="Logo 1" url="#"]http://astudio.si/preview/move/images/testing_images/logo-1.png[/logo]
[logo alt="Logo 2" url="#"]http://astudio.si/preview/move/images/testing_images/logo-2.png[/logo]
[/logos]

Statement

[statement parallax="true" parallax_overlay="true" slug="fantastic-elements" image="http://astudio.si/preview/move/images/testing_images/photodune-4275757-amazed-elegant-man-m.jpg"]

Fantastic elements

Build it your way

[button size="large"]I want it now[/button]

[/statement]

Parameters:

Heading

A middle aligned heading.

[heading size="3"]Icons[/heading]

Parameters:

Adding sidebars

Sidebar generator

Before you can start adding widgets you need to create a new sidebar, but you can add widgets to the already added ones, but you can create how many new sidebars you like. You can find the sidebar generator under Appearance → Sidebars.

Adding a sidebar to a page or post

You can add a sidebar to all pages, except the portfolio page and single item portfolio page. You can add a sidebar to a page/post by selecting the desired by going to the desired item in WordPress (under Pages/Posts) and under the content editor you will see a box called Sidebars. You can select eiter only one of the sidebars, either both of them.

Important: Be carefull when adding two sidebars, because some elements aren't designed to be used with two sidebars ( two or more column sidebars ).

Translating the Theme

Our theme comes localisation ready out of the box – all that’s needed is your translation.

There are several methods to create a translation, most of which are outlined in the codex (http://codex.wordpress.org/Translating_WordPress), however, we find the easiest method is to use a plugin called codestyling localisation.

Codestyling localisation dashboard
We find the easiest method is to use Codestyling localisation.

Updating the Theme

Before you update:

Go to our ThemeForest item page and see all of the changes in the change log. Here you will also find if there are any problems if you update / what you have to do.

Save all of your changes files, ie. the custom.css file (you don't need to worry if you are using a child theme).

How to update

To update our theme, go to ThemeForest and download the newest version of our theme (you can check all of your purchased items under the Downloads tab). Unzip the .zip files until you get the cleanway folder, then go to your server and place the files under wp-content/themes/.

Please note: our theme cannot be updated via WordPress, so if you are promted to update the theme, please do not click on the update, as you may lose your files.

LayerSlider WP

The official documentation can be found here.

This site contains many tutorials (FAQ) on this plugin: http://support.kreaturamedia.com/faq/

Slider dummy content

Download it here.

Child Theme

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. The whole idea of a child theme is that you can modify, and add to the functionality of that parent theme without modifying it directly. The parent remains intact, everything is built within the child theme.

Reasons to use child theme:

Read more here

Footer

You can set up the footer in the same part as Widgets, Appearance → Widgets. The only difference is you don't drag and drop in the sidebar boxes, but you add them in Footer Widget Areas. In each column you can add what you like, as the widgets look different in the footer than in the sidebars.

Advanced Options

Twitter Bootstrap

Our theme has been created with the Twitter Bootstrap CSS framework, which means you can use all of its features when writing your code in our theme. This means if you know how to use Twitter Bootstrap, you know how to change / adapt our theme and create new features or even use the features we have not shown on our demo site.

More details on Twitter Bootstrap.

Adding New Features

If you are going to add many new features, please look at child themes, as you will still be able to update our theme without loosing any of you changes.

Sources and Credits