Theme documentation

1. Theme installation

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex.

You have two options for uploading the theme - to use FTP application or upload tool in WordPress admin panel. Once you have uploaded the theme you must activate it.

1.1 Upload theme via FTP application

  • First you must unzip the file you downloaded from Themeforest.
  • There you will find a file named planetshine-frost.zip. Now unzip this file.
  • You should see a folder named planetshine-frost
  • Upload this folder to /wp-content/themes/ location in your WordPress installation.

1.2 Upload theme via WordPress admin panel

  • Open your WordPress admin panel, go to Appearance and choose Add New
  • Click Upload Theme and choose the planetshine-frost.zip You can find the planetshine-frost.zip file by un-zipping the file you downloaded from ThemeForest.

Upload only the planetshine-frost.zip file. If you have a "missing stylesheet" issue, then you have not un-zipped the original file and you are uploading the wrong one!

If you are seeing a "Are you sure you want to do this?" warning, then this usually means, that the theme file is too large for your server to upload using wp-admin. In this case you must use the FTP method instead.

1.3 Activation

Once upload has finished, activate your theme in Appearance / Themes in WordPress admin panel.

1.4 Setup wizard

Frost includes theme setup wizard that greatly simplifies setting up the theme. When you firs activate the theme the wizard will launch automatically. Afterwards it is available in Appearance > Setup Wizard. All you have to do is follow the read the instructions on screen and proceed trough the steps. If you do not wish to do some of the steps, you can always skip them.

The image gallery below describes all of the steps of setup wizard.

1.5 Install required plugins

You only need to take this step if you did not complete theme setup wizard.

Frost relies on number of plugins for various theme features. Without out them you will not be able to use many of the theme features. You absolutely must install Planetshine Frost Theme Extension plugin. This plugin powers a lof of the key features you see in the demo. See Installing required plugins.

1.6 Set up Home & Blog pages

You only need to take this step if you did not complete theme setup wizard.

If you wish to only create home and blog pages without importing rest of the demo you will have to do this manually. Go to Pages section in wp-admin and create two new pages - one for blog and another for homepage. Make sure you select page template "Page builder layout" for your homepage. Now go to Appearance > Customize > Static Front page and select your pages as Frontpage and Posts page.

1.7 Regenerate post thumbnails

If you are installing the theme on a WordPress site where you already have posts and pictures it is bly advised that you regenerate thumbnails! That can be achieved with Regenerate Thumbnails plugin which is already bundled with the theme. Once you have activated the plugin, go to Tools / Regenerate thumbnails in WordPress admin and run the regeneration process.

2. Installing required plugins

Frost relies on number of plugins for various theme features. Some are required - without them important theme features will not be available. For example, you need Planetshine Frost Theme Extension, Visual Composer to use static home page or WooCommerce to use the shop features. Other plugins are just recommended - they provide extra functionality that the theme supports, but it is in no way essential.

Easiest way to install plugins is the do this with theme setup wizard. Alternatively you can do this by going to Appearance > Install plugins.

Some of the plugins, like Visual Composer and Slider Revolution might offer you the option of registering them. This is not required to use them and you have to dismiss these options because plugins that where acquired via bundles can't be activated. This feature is reserved only for plugins that where bought separately. Regardless this will have no effect on the plugins functionality and you will be able to use all of the features.

3. Theme settings

Frost can be configured using WordPress theme customizer which ensures that you always see the visual impact of the changes you make. Go to Appearance > Customize to access it. Frost settings have been split up in two different categories - Frost Theme Settings and Frost Visual Editor. The Frost Theme Settings panel allows you configure how the theme works, while the Frost Visual Editor is used for configuring how it looks.

Every time you make a change, the editor will refresh the page and you will be able to see the results.

Go to Frost Theme Settings > Logo in your wp-admin customizer. The section offers you two types of logos - textual and image.

If you select Image logo you will have to upload image file and set alt text. Click on the "select file" button and select your logo from your computer or WordPress image library. The theme will offer you the option to restrict the image width by entering a size value in pixels. Use that if you logo is too large. Click Save & Publish button at the top of editor and that's it! You should also provide an ALT text which will be shown if your image ever fails to load on the front page.

If you select a Textual logo the theme will display your site name as the logo.

3.2 Setting up theme header

Go to Frost Theme Settings > Header. This section allows you to turn on/off almost every element that is a part of the header you can see in demo pages. Use the enable/disable buttons to toggle the following:

  • Social icons
  • Login button
  • Wishlist button
  • Currency dropdown
  • Search

Some of these settings depend on plugins and will not show up if you do not have the required plugins active.

In Frost, the main search is a full page popup that is launched by clicking a button in the header. This popup not only shows the input box, but optionally you can also show a collecton of products. This collection can be set up in header settings. Use the dropdown called "Header search product collection" to choose what kind of products to show there.

3.3 Shop catalog settings

Go to Frost Theme Settings > Shop. Frost has many features that allow you to change aspects of how the main shop catalog page looks and works.

Catalog heading

Introduce your visitors to your shop with a attention drawing title and description. Right under it you can place a parallax-ed image. These features can be edited using settings "Show catalog heading", "Catalog heading image", "Catalog home title" and "Catalog home description". You can and should use HTML code in the description field.

Catalog item features

Each catalog item has an image. Optionally it can also show multiple images and use a slider to allow customer to switch between them right there in the catalog. This can be turned on/off with "Enable product image slider" option.

Use the "Enable product quickshop from catalog" option to allow customers to open the product details in a popup without ever leaving the product page.

3.4 Product settings

Go to Frost Theme Settings > Product.

Frost has a unique way of displaying product galleries - they are moved to a special tab next to regular product description. This can be enabled/disabled in product settings. Also use this section to add brand new tabs. Add unlimited number of tabs using the controls in this page. Each of the tabs gets it's content from a page that you can link in the additional pages settings. This also allows you to change the order of tabs by dragging and droping them.

3.5 Brands settings

Go to Frost Theme Settings > Brands.

The theme offers you the option to set up brands for products sold in the shop. These are basically logo icons of the companies whose products you sell that are each linked to whatever page you want them to link to. Normally you would choose a filtered view of your product catalog.

You can add brand items by clicking the "Add new row" button. In each of the row you can specify the URL for the brand and. upload/select the icon. Use drag & drop to change the order of brand icons.

3.6 Social networks

Go to Frost Theme Settings > Social networks.

Social icons are shown in multiple places of the theme. The most notable is header (if you have not turned this off). Each of the supported social networks can be set here. Simply insert a URL to your social network profile or leave the box empty for the ones you do not need.

3.7 Welcome popup

Go to Frost Theme Settings > Popup.

Greet your first time customers with a popup, optionally offering them to signup to a newsletter. Settings for this feature can be editing in the popup section. You have to option to change every text seen there, enable/disable the newsletter form as well as "don't show this popup again" checkbox. Make sure you have set up the newsletter settings in Frost Theme Settings > Newsletter.

By default this popup will be shown to every visitors once a day. You can change how often it happens using the select box at the bottom of settings page. It's possible to set it to "once a day", "once a week", "once every 2 weeks", "once a month" and "only once".

4. Importing theme demo data

To import full theme demo use the setup wizard.

An alternative for importing demo content is to use WordPress XML files. We have provided you with sample content that you can import in your WordPress site. It is located in the folder you downloaded from Themeforest. There you will find 4 files - everything.xml, pages.xml, posts.xml and products.xml. Everything.xml will hold all of the posts, pages, images, woocommerce products etc. The other 3 will just contain posts, pages and products as indicated by their name. You can import it using wordpress admin. Go to Tools > Import. From the list select "Wordpress". Choose the aforementioned file and upload it.

Sample XML content method will not produce a fully working demo page since it only inserts the content but does not set up things like menus, sidebars, colors etc. They will also not contain any images since those can't be supplied due to licensing reasons.

5. Setting up homepage

If you used the theme setup wizard feature after activating the theme, Frost will have created and set up a homepage for you. This page will be called Homepage and you can find it and edit it under Pages in your wp-admin. To create a homepage like the one seen in theme demo, Visual Composer plugin must be enabled!

Homepage layout is made with Visual Composer plugin (also included with Frost for free, but normally has to be bought separately). It's a extremely powerful tool that allows you to build custom layouts by dragging and dropping elements. If you imported the demo content the theme will have already placed everything for you, but you can edit it easily using Visual Composer (learn more about it by checking out the Visual Composer documentation.)

Always make sure that you have selected the "Page Builder Layout" template for the page that you are building with Visual Composer

5.1 Homepage Visual Composer Blocks

This section of documentation will give examples of all the homepage Visual Composer blocks that are available in this theme. To add an item to homepage click Visual Composer "Add New Element" button (looks like large + sign). This will open a popup with all the composer elements. Select tab "Frost". You will see the following element selection dialog window.

Always make sure that you have selected the "page builder layout" template for the page that you are building with Visual Composer

5.2 Homepage slider

Frost has it's own purpose built slider that you can use in homepage (alternatively you can use revolution slider). The slider can easily be setup using Visual Composer. If you imported demo content then you already should have the basic slider elements in place and now you just have to set correct post IDs. If you are starting from empty page then you first have to click Visual Composer "Add New Element" button (looks like large + sign). This will open a popup with all the composer elements. Select tab "Frost" and pick "Homepage slider".

This will add a new block to the homepage. This block is the slider. Inside it you can now place the actual slides. To do that click on the plus icon in the middle of the slider element.

In the dialog window that opens select "Home slider item".

Insert the ID of the post you want to link to this slide item and select image. You can find the ID of a post, by opening it's edit page in wp-admin and scrolling to the bottom of it. There will find a bolded text with something like this "Post ID: 283"

Click the save button and you have successfully created slider with one slide. Now you can use the same process for adding more slides.

6. Layout

This theme has a Responsive layout with one or two columns (varies for different sections). It's based on Bootstrap 3.3.5 and it's markup is structured according to bootstrap best practices. This theme has 4 different layout modes:

  • Large (for 1170px or wider screens)
  • Medium (for 970px to 1170px screens)
  • Tablet (for 768px to 970px screens)
  • Mobile (for screens smaller than 768px)

Adjust your browser window size to explore them closer. Frost uses lots of HTML5 and CSS3 features, so it will NOT support legacy browsers such as Internet Explorer 6, 7, 8 & 9

7. LESS & CSS files

Frost stylesheets are created using LESS technology. LESS files are located in /theme/assets/less folder. After editing LESS files theme will automatically compile them in one CSS file. There is also a /theme/assets/css folder, but these files are only used as a backup in cases where because of problems with server configuration it's impossible to compile LESS.

The main LESS file is frost.less which includes all the other files. All the color variables are defined in variables.less however by default they are commented out because the theme will inject live color settings in the LESS file right from the Visual Editor.

If you wish to edit the themes styling, it's best if you do this using WordPress child theme. That way you will simplify updating the theme in future.

8. Javascript files

All the Javascript files are located in theme/assets/js/ folder. This theme uses jQuery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in theme/assets/js/theme.js.

It is comparatively easy to find what you need to edit in theme.js. Just open the file and look for init function. It initialises all other functions which you can recognise by the name.

All of the third party Javascript files used by the theme are located in theme/assets/js/vendor/ folder. These you should avoid modifying in any way.

9. Translating the theme

Frost can be translated using the same tools and methods as the rest of WordPress - using POT language files. The language file for this theme can be found in languages folder in theme files. There you will find a file called default.pot

Before translating the theme you should activate a child theme to avoid overriding you translations when updating the theme.

There are two ways to translate the theme - using a downloadable software (like Poedit) or using a WordPress plugin (like Loco Translate)

Translating with Loco Translate plugin

  • 1. Install Loco Translate plugin;
  • 2. Activate installed plugin;
  • 3. Make sure your server has correct write permissions;
  • 4. In wp-admin go to "Loco Translate -> Manage Translations";
  • 5. Under section "Themes" find child theme and press "New language";
  • 6a. If you want to add translation choose language from list or add it manually in format "xx_XX" (where "xx" corresponds to language codes and "XX" corresponds to country codes, for example "en_US");
  • 6b. If you want to edit Theme's text outputs you need to select current site language (can be checked in "Settings -> General -> Site Language"), for "English (United States)" choose "English";
  • 7. Press "Start Translating";
  • 8. Add translations;
  • 9. Click "Save";
  • 10. If you followed step 6a, go to "Settings -> General -> Site Language" and make sure that correct language is selected.

Translating with Poedit

  • 1. Download and install "Poedit";
  • 2. Open "Poedit";
  • 3. Click on "File -> New from POT/PO file";
  • 4. Open child theme's "default.pot" file located in "[wordpress-install-folder]/wp-content/themes/[theme-name]-child/languages/";
  • 5a. If you want to add translation choose language from list you prefer;
  • 5b. If you want to edit Theme's text outputs you need to select current site language (can be checked in "Settings -> General -> Site Language");
  • 6. Add translations;
  • 7. Click on "File -> Save" and save the "xx_XX.po" file in the same folder where child theme's "default.pot" is located;
  • 8. If you followed step 5a, got to "Settings -> General -> Site Language" and make sure that correct language is selected.

Finally head over to Settings > General in wp-admin and select your desired language using the "Site Language" option and save the changes.

10. Setting up newsletter

We are using MailChimp to configure our newsletter form, but there are a lot of services and plugins you can use. Follow these steps:

  • Go to http://mailchimp.com
  • Register and account if you do not already have one, and log in.
  • Go to section "lists" and click on "create list"
  • Fill in all nedded fields and click on Save at the bottom of the page.

  • Now open your new list and select the "Signup forms" tab. Click on "Embedded forms".
  • In the page that opens, click on "Naked" tab.

  • Copy the code found at the bottom of page and paste it into text editor like notepad.
  • In the text, find a line that' similar to this one "<form action="http://planetshine.us7.list-manage1.com/subscribe/post?u=c908dbcccecb685633e7e0458&id=314fef872f">"
  • Copy the action value (it will be similar, but NOT the same as in the example above). To clarify. Action value is only this part: http://planetshine.us7.list-manage1.com/subscribe/post?u=c908dbcccecb685633e7e0458&id=314fef872f
  • Now open your wp-admin, and go to Appearance > Widgets. Insert "Frost Newsletter" into "Footer" sidebar.
  • Now move on to Appearance > Customize > Newsletter. Paste the form action value into the "Newsletter form action" field.
  • Select form action value "Post"
  • Enter "email field name" value "EMAIL"
  • Click save

11. Updating the theme and bundled plugins

11.1 Automatic theme update

If you have completed the theme setup wizard you can update the theme automatically by going to Appearance / Themes and update your theme by clicking the update link.

11.2 Updating theme manually

To update the theme, follow these steps:

  • Head over to Appearance / Themes in your wp-admin
  • Activate a different theme (for example twenty twelve)
  • Delete the current version of Frost
  • Download the update from Themeforest and get the planetshine-frost.zip file. If you downloaded the “All Files & documentation” from Themeforest, then you need to unzip the archive file you received, the planetshine-frost.zip will be inside of it
  • Click on Install themes and upload the planetshine-frost.zip file.
  • Activate it and install updates for bundled plugins where necessary.

If you get a “Are You Sure You Want To Do This” message when installing update, it means you have an upload file size limit. Install the theme via FTP if this happens, or increase the PHP file update size limit.

11.3 Updating plugins

WooCommerce, Contact Form 7 and other regular plugins can be updated using WP plugin section. However the premium plugins - Revolution Slider, Visual Composer and Planetshine Frost Theme Extension can only be updated together with the theme. After installing a theme update you will be presented with a notification message offering to install the updates. It will be very similar to the one you used to install the plugins when you first activated the theme.

See Installing required plugins.

12. Editing theme code

If you wish to make any modifications to the themes code files - edit styling, add new functions etc. then you must always use a child theme. The reason for this is simple - when you edit code files using a child theme, you can still update the parent theme to the latest version when an update is released. Otherwise you would lose your modifications every time you make an update.

Your child theme will include all of the features and functions of the parent theme. Nothing will change apart from the fact that you can now make changes with ease.

How to activate a child theme

Every Planetshine theme comes with a child theme template included. Open the folder you downloaded from Themeforest and inside it you'll find a zip with the word "child" in it. For example frost-child.zip. Take this zip, upload it to your WordPress just like you would any other theme and activate it. Make sure you have installed the parent theme on the same WordPress or otherwise none of this will work.

Now you have a working child theme, that you can use modify parent theme files.

Editing the CSS code of parent theme

In some cases you might want to make modifications in theme's styles that are not possible with the Visual Editor alone. In these cases you need to write CSS code. For small changes we recommend that you either use the Custom CSS box that can be found in theme settings or use SiteOrigin CSS plugin.

If however you need to do a lot of changes, it's best to you a separate file for this. All child themes code with style.css file that you can use for this purpose. The theme will include this file after all the main CSS files, so you should have no problem overriding the default styling.

Overriding theme template files

If you wish to make changes to one of the theme template files you can simply copy it from the main theme into the child theme. WordPress will recognize this and use the version found inside the child theme. For example, if you want to change something in the footer, then copy the file footer.php from parent theme into the child theme. Then make your modifications.

Only files that are inside the main theme folder ( the first level where files like header.php and footer.php are located) and files inside /theme/templates/ folder can be overridden like this. When overriding files from /theme/templates/ make sure that you create the same folder structure inside you child theme - create folder "theme" and inside that place folder "templates".

Overriding theme Javascript files

It's not possible to directly override Javascript files so another method must be used. You need to use WordPress wp_dequeue_script function to first remove the file that you wish to replace and then use wp_enqueue_script to add the version you wish to use.

See this example for replacing the main theme.js file. You would have to paste this in the functions.php file of your child theme. If the script you're replaching is localized using WordPress wp_localize_script function (like the main theme javascript file usually is) you would have to also copy the code used for localization.

<?php // hook in late to make sure the parent theme's registration
// has fired so you can undo it. Otherwise the parent will simply
// enqueue its script anyway.
add_action('wp_enqueue_scripts', 'frost_child_script_override', 100);
function frost_child_script_override()
{
wp_dequeue_script('frost-theme');
wp_enqueue_script('child-frost-theme', get_stylesheet_directory_uri().'/assets/js/your-javascript-file.js', array('jquery'));
}

Overriding theme PHP functions

You can override any function from the parent theme files by copying it and pasting it inside your child themes functions.php file. This will cause the parent theme to use the version from your child theme instead of the default one. This is the most powerful aspect of child themes and with it you can change any aspect of the parent theme. But this method should be reserved for advanced WordPress developers since this is fast way to break things.

Overriding theme PHP class methods

The core methods of the theme are located inside /theme/theme.php file. In child theme's functions.php file you will find commented out section of code that looks something like this:

/**********************************************************
* Uncomment to override the main Frost theme class *
**********************************************************/

/*
class FrostChildTheme extends Frost {

}
*/

/**********************************************************
* Uncomment to override the main Frost WooCommerce class *
**********************************************************/

/*
class FrostWooCommerceChild extends FrostWooCommerce {

}
*/

If you wish to edit methods from theme.php then you must remove the comments tags from this block of code and paste the method you want to change inside the appropriate extended class. The theme will automatically use the child theme's version of the method. This method should be reserved for advanced WordPress developers since this is fast way to break things.

WordPress action hooks

This is intended for advanced developers with experiance in WordPress site development. Frost comes with 70+ hooks (not counting those provided by WooCommerce that allow you to easier modify your sites code. They cover key location in the theme and it's parts. Look up the location to which you wish to append/prepend something in the list below and search for the hook by it's name using your code editor. All of the action hooks are listed below.

Locations in theme

frost_before_header
frost_after_header
frost_before_footer
frost_after_footer
frost_before_page_builder_layout
frost_after_page_builder_layout
frost_before_blog_wrap
frost_after_blog_wrap
frost_before_blog_posts
frost_after_blog_posts
frost_before_single_wrap
frost_after_single_wrap
frost_before_single_post_content
frost_after_single_post_content
frost_before_single_page_content
frost_after_single_page_content
frost_before_sidebar_wrap
frost_after_sidebar_wrap
frost_before_sidebar_widgets
frost_after_sidebar_widgets

Visual Composer blocks

frost_before_vc_block_blog_posts
frost_after_vc_block_blog_posts
frost_before_vc_block_frost_brands_slider
frost_after_vc_block_frost_brands_slider
frost_before_vc_block_custom_banner_item
frost_after_vc_block_custom_banner_item
frost_before_vc_block_home_slider
frost_after_vc_block_home_slider
frost_before_vc_block_home_slider_item
frost_after_vc_block_home_slider_item
frost_before_vc_block_info_container
frost_after_vc_block_info_container
frost_before_vc_block_info_icon_block
frost_after_vc_block_info_icon_block
frost_before_vc_block_frost_instagram_feed
frost_after_vc_block_frost_instagram_feed
frost_before_vc_block_location_map
frost_after_vc_block_location_map
frost_before_vc_block_newsletter_form
frost_after_vc_block_newsletter_form
frost_before_vc_block_parallax_container
frost_after_vc_block_parallax_container
frost_before_vc_block_product_category_switcher
frost_after_vc_block_product_category_switcher
frost_before_vc_block_product_collection_switcher
frost_after_vc_block_product_collection_switcher
frost_before_vc_block_product_slider
frost_after_vc_block_product_slider
frost_before_vc_block_title_block
frost_after_vc_block_title_block

Template Parts (called immidiatelly before template part code)

get_template_part_theme/templates/brand-slider
get_template_part_theme/templates/header
get_template_part_theme/templates/header-currency
get_template_part_theme/templates/lightbox-newsletter
get_template_part_theme/templates/lightbox-photo-gallery
get_template_part_theme/templates/lightbox-search
get_template_part_theme/templates/link-pages
get_template_part_theme/templates/loop
get_template_part_theme/templates/loop-default-list-item
get_template_part_theme/templates/loop-default-search-item
get_template_part_theme/templates/loop-default-single
get_template_part_theme/templates/loop-page-search-item
get_template_part_theme/templates/menu-cart
get_template_part_theme/templates/menu-main
get_template_part_theme/templates/pagination
get_template_part_theme/templates/post-list-item-image
get_template_part_theme/templates/post-list-item-title
get_template_part_theme/templates/post-share
get_template_part_theme/templates/post-tags
get_template_part_theme/templates/social-network-icons
get_template_part_theme/templates/title-legend
get_template_part_theme/templates/woo-catalog-product-image
get_template_part_theme/templates/woo-category-title
get_template_part_theme/templates/woo-filtering-sorting
get_template_part_theme/templates/woo-product-breadcrumbs
get_template_part_theme/templates/woo-product-gallery-tab
get_template_part_theme/templates/woo-quickshop
get_template_part_theme/templates/woo-shop-menu

Thank you so much for purchasing this theme!