1. Website Basic Infomation

1.1. Hosting Requirements

To run WordPress with Zephyr you need a web host that has the minimum requirements below:, :

  • PHP version 5.3 and later
  • MySQL version 5.0 and later
  • The mod_rewrite Apache module

There are many hostings that will be suitable for these parameters. You can contact with your potential hosting providers and ask them for the hosting which can be compatible with WordPress. Or you can find companies that specialize in WordPress-sites hosting, for example Bluehost.

1.2. Wordpress Information

“WordPress is an open-source and free Web publishing application, content management system (CMS) and blogging tool built by a community of developers and contributors. WordPress allows users to build dynamic websites and blogs that may be updated, customized and managed from its back-end CMS and integrated application and components.” (*)

WordPress is a base to help you build your favorite themes. Therefore, let’s get WordPress installed before purchasing any WP theme. If you need help to install WordPress, please follow the instructions in WordPress Codex or you can watch the Instruction Video created by Woo Themes. Below are some useful links that may help you dig into WordPress:

1.3. WorWebsite Data Backup

Step 1: Download All-in-one WP Migration and install it. Navigate to Site Migration > Export

Step 2:Click Advanced options to expand them. Select checkboxes to choose data that do not need to be backed up (excluding themes and plugins may be a good idea sometimes)

Step 3: Click Eхport button to start exporting.


Navigate to Site Migration > Export. Then drag&drop backup file to upload it.

2. Installation

We presented the guides below assumed that you have WordPress already installed. (If you haven't, go there for WordPress installation guide). The Wunder theme can be installed by two methods: through WordPress, or via FTP. Check the Installation Via WordPress and Installation via FTP sections for each method.

2.1. What's include

When purchasing Wunder theme from Themeforest, you will be able to download ARC files with your Themeforest account. There will be two packages for you to choose: The Main Files contains all files, or the Installable WordPress Theme files with just necessary installable WordPress theme files.

If you choose Main Files, there will be an Wunder Theme Folder included:

  • Wunder Theme Folder – contains the Wunder.zip and Wunder-childtheme.zip. The child theme is particularly designed for users who want to make code change.
  • Licensing Folder - contains the licensing files. (This is not your purchase code that you need to download from Themeforest).
The Installalable WordPress Theme includes only the Wunder.zip file
  • Wunder.zip - this is the parent wordpress theme. We recommend you install it via WordPress panel. If you install it via FTP, you have to unzip it and use the extracted folder.

2.2. Installation Theme

2.2.1 Installation via WordPress

Follow the steps below to install Wunder via WordPress.

Step 1 - Unzip the downloaded package from Themeforest. Find the folder theme and inside it find the file Wunder.zip inside it.

Step 2 - Login to your WordPress dashboard, go to Appearance > Themes click Install Themes tab and select Upload

Step 3 - Click the Browse button and find the file "Wunder.zip" on your computer.Click "Install"

Step 4 - Wait the theme being uploaded and installed.

Step 5 - Activate the theme: Go to Appearance > Themes and Activate.

Common Install Error: Are You Sure You Want To Do This?

The “Are You Sure You Want To Do This” message may occur, means that you are limited in upload file size. Consider install the theme via FTP if this happens, or call your hosting company and ask them to increase the limited size.

Active Plugins

Active Plugins

2.2.2 Installation via FTP

Follow the steps below to install Wunder via FTP.

Step 1 – Log into your hosting space via an FTP software

Step 2 – Unzip the downloaded package from Themeforest. Find the folder theme and find the file Wunder.zip in it.

Step 3 – Upload the extracted Wunder theme folder into wp-content > themes folder

Step 4 – Click Browse button and find the file Wunder.zip on your computer. Click "Install".

Step 5 – You will get a notification to activate the required plugins. See below.

Transfer type

You should transfer text files like PHP files via ASCII transfer type, and for other types of files such as images, you should use binary transfer type. Otherwise you can get errors.


2.3 How to update the theme

You can update your theme via FTP or via WordPress admin panel. However, make sure that you have already downloaded the latest version of the theme from Themeforest first.

Important Update Infomation

Each update version comes with new amazing features and we will try our best to bring them immediately to you. Below are some things you need to prepare before updating.

-  Backup Your Current Theme – It’s always a good idea to keep a backup of your current theme. Log on to your server or cpanel and make a copy of your current "Wunder" theme folder to your computer. If needed, you can reload the previous version. Its also a good idea to backup your theme options. There is a “Backup” tab in theme options to export your settings. And always be sure to make a copy of your custom CSS field and tracking code.

-  Do Not Keep Older Copies of The Theme In WP Theme Folder – You should completely remove all previous Wunder theme folders before adding the new updated theme folder, or you could end up with WP path issues, etc.

-  Do Not Rename The Theme Folder – If you rename your theme folder when you update, the path will no longer be valid. WordPress stores menus, widget settings and some other settings by folder path. You need to rename your theme folder back to the original state as while it first be downloaded, and your settings, menus, widgets will be restored. If you need to keep your previous theme folder, then simply make a copy of it some elsewhere before you upload the new theme

-  Reset Browser Cache - It is always recommended to reset your browser, plugins, server cache when you update. Visual issues may happen, and cache needs emptied. Each browser allows you to remove cookies, history and other data.

-  New Visual Composer - When update versions comes with new version of Visual Composer, you should delete old-version and re-install it again.

3.Import XML for Demo Contents

When any Wordpress theme first being installed, it will not contain all the extra content that you might see in the live demo. There are two ways you can import WaveX Demo Content. Usually you have to import an XML file which can be troublesome. We made it easier by creating a One Click Demo Content Importer.

Import All Demo Content – Now users can quickly and easily import our demo content with one click of the button. This is the preferred method because it 's the fastest and easiest way to get our demo content. Using this method will give you all our pages and posts, several sample sliders of each slider type, widgets, theme options setting, etc.. If you wish to use our One Click Demo Content Importer, please see the “How To Import All Demo Content” section in our documentation.

3.1 Recommended Plugins

Amazingly, Wunder comes with super awesome premium WordPress plugins and powerful ecommerce plugins. When you activate Wunder theme, you will see "Recommended plugins" on your WordPress dashboard. Here are the list of all recommended plugins. We recommend you active them all.

  • Shinetheme-Core
  • Contact Form 7
  • WPBakery Visual Composer
  • Redux Framework

3.2 One-click Install Demo Content

(We recommended for Save Time for you )

To install demo content, go to dashboard > Import Demo: Click Import Now button and wait the demo content being imported (take a minutes)

3.3 Import by hand

( If you have problem with One Click Install above )

Import data XML

Look for Import XML folder in unzipped package downloaded from themeforest and use the XML within it (import xml/data.xml).
Go to the WordPress Admin > Tools > Import and click WordPress as displayed in image below.

At 1st time you need to install WordPress importer plugin

Once installed you need to activate the plugin and run the importer.

Select the XML file from Import XML folder in unzipped package that you have downloaded from themeforest.

There are 14 files XML

After importing XML file.

  1. Assign posts to an existing author.
  2. Mark the checkbox to download and import file attachments
  3. Click 'Submit' button

Import process can take few minutes. So wait for it and try to keep the focus on current tab in your browser.

After that is done, you will have bunch of posts, pages, properties and other contents as on the theme demo.

Notice: – Our demo images will not be included because those are licensed stock photos which are not allowed to be shared. Instead we will replace by default images

4. General Guide

4.1 Menu

Wunder supports custom WordPress menus, with multiple levels of dropdown support for the main menu. You can assign a menu: Primary Navigation. Once a menu is created and assigned to the location, it will show up on the site. There are also several theme options to customize the menu.

Create normal Menu:

To Setup A New Menu, Follow The Steps Below.

Step 1 : Navigate to Appearance > Menus section of your admin.

Step 2 : Click the "Create A New Menu" link to make a new menu. Enter the name then hit the "Create Menu" button.

Step 3 : To add a menu item, select one of your created pages on the left hand side and click "Add to Menu". You can also add all kinds of different posts from the left side.

Step 4 : To add a custom menu item, enter a custom name and link into the "Links" box.

Step 5 : Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section.

Step 6 : After setting up your menu, scroll down to the bottom of the page to assign Primary Navigation .

Step 7 : Once its all done, make sure you click the "Save" button.

4.2 Widget & Sidebar

Step 1 : To add content to the sliding bar, navigate to "Appearance > Widgets"

Step 2 : You will see 8 widget sections on the right hand side. Your widgets are located on the left hand side.

Step 3 : Simply drag and drop the widgets you want from the left side into the sliding bar widget sections on the right side. See the screenshot below.

Blog Sidebar Widgets in this area will be shown on blog page.

4.3 Disable Comment

You can disable comments in Pages and Portfolio Items for the whole site in Theme Options. Or you can disable comments for each page (portfolio item) individually. Instructions are the same for both.

Step 1: Add a new Page or select existing.

Step 2: Navigate to Screen Options and select Discussion checkbox.

Step 3: Find the Discussion below the text entry field and disable comments.

Step 4: Please don't forget to save changes.

5. Support

To give you, our dear clients, the most satisfaction and convenience when purchasing and using our themes, all our products come with free support via our dedicated Support Forum. Support team is available in every question regarding theme’s features or problems.

To get free support, follow these steps:

Step 1Click Here To Create An Account. You will need your Themeforest Purchase Code. What’s a Themeforest purchase code?

Step 2 – Enter your Themeforest Purchase Code, e-mail and a password. Your forum's username is assigned to be the same with your Themeforest purchased username.

Step 3 – Sign into the forum with your new created account and start using it.

- We will not work with your code customizations or third-party plugins. If you need help in these problems, please contact a developer to solve them.
- Your ticket will be posted in public so you are advised not to include any personal information in the first post. From the second post on, you can set your reply private.

[button size="large" color="blue" url="http://support.shinetheme.com/wp-login.php?action=register" ]Create New Account[/button]

6. Theme Options

You can edit and control Wunder Theme settings through the powerful Theme Options panel. Easy to edit without concern to any single code line.

Go to your admin Dashboard, navigate to Theme Options.

6.1. General Setting

  • Disable Preload: if you check to checkbox, the Preload Icon will not show up when you load page
  • Enable Smooth Scroll: Check to checkbox if you want enable Smooth Scroll effect
  • Disable Buitl-in SEO: check to checkbox if you use another SEO plugin
  • Loading text: custom text will display in Preload page
  • Loading Image: custom image display in Preload page
  • Custom Favicon: custom favicon display in front of page title in tab bar of browser
  • Logo: Upload your brand's logo
  • Logo Retina: Upload the logo to be showed on retina devices. Enter the tail "@2x" after the logo's name to ensure logo shown in good quality.
  • Apple Touch Icon: upload icons with difference size
  • SEO keyword, SEO description
  • 404 Page: Choose Page 404 style you want to show and upload bg image if you choose style 2

6.2. Styling Setting

  • Theme Stylesheet: Select your themes alternative color scheme.
  • Theme Main Color: Pick the main color for the theme (default: #2ac5ee).
  • Body Font: Specify the body font properties.
  • Body Background: Specify the body background
  • Menu Font: Specify the body font properties.
  • Menu Background: Specify the body background
  • Heading Font
  • Heading > Small Font
  • CSS Code: Paste your CSS code to customize your site.

6.3. Header Setting

  • Disable Fixed Menu: Check to checkbox if you want to disable fixed menu
  • Header Position: You can choose a position to display header like
    • Normal Header
    • Appearing Header
    • Bottom Header
    • Top Logo Header
    • Centered Logo Header

6.4. Blog Setting

  • Style Post Detail: includes 2 styles to choose
  • Disable Banner: check to checkbox if you want to disable banner in blog top page
  • Background Banner : You can custom background banner by upload an image from your computer
  • Background Banner Opacity: you can custom opacity for banner by custom indices from 1-100
  • Overlay Banner color: you can custom color overlay by color picker
  • Title Banner: input a page title display in banner
  • Disable Breadcrumb Single: you can disable breadcrumb in single post by check to checkbox
  • Sidebar Position: you can choose a layout for blog page
    • Full width
    • Left sidebar
    • Right sidebar

6.5. Home Setting

  • Sidebar Position: Select your position of the sidebar in Home page

6.6. Portfolio Setting

  • Single Portfolio Style: you can choose a style
    • Normal style
    • New style
  • Upload An Image Banner display in top page
  • Banner Title: input a page title display in banner
  • Content Position: you can custom content position
    • Full width
    • Left
    • Right
  • Portfolio custom link: Enter custom link bottom detail. Note: Only use for new style

7. Elements

Beside the default element of Visual Composer, we provide on this theme with 27 different element. You can use theme to build your layouts

We would like to introduce some basic features of our element as follows:

7.1. ST Breadcrumb

You can add this element to call breadcrumb display

7.2. ST Post List

This element display blog post list

On this element, you can:

  • Number post: Enter number of post to show

7.3. ST Blog Post

This element display blog post list. Includes 3 styles with number of different row like

    • Blog grid 1
    • Blog grid 2
    • Blog list
In this element, you can:
  • Item per row: you can custom number of item per row to display
  • Number items per page: custom number of item in per pagination
  • Categories: select a or multiple categories to show post
  • Order/Order by: select a style order

The element will be display below

Blog Grid 1

Blog Grid 2

Blog List

7.4. ST Liquid Slider

This element display testimonials list with slide effect

On this element, you can:

  • Custom auto play slide: Yes or No
  • Custom slide interval
  • Pause slide when hover


With per liquid item, you can:

  • Enter author name
  • Upload featured image of author
  • Testimonial of author


The element will be display below

7.5. ST Member Item

With this element, you can add a member item, they display by grid

On this element, you can

  • Enter name, job of member
  • Upload avatar member
  • Enter description about member
  • Enter social link, email of member

The element will be display below

7.6. ST Testimonial Item

This element display testimonial, activity similar ST Liquid Slide

On this element, you can:

  • Enter author name
  • Upload featured image of author
  • Testimonial of author


7.8. ST Fact

This element display index of an object

On this element, you can:

  • Title: Enter title of fact
  • Enter amount number

The element will be display below

7.8. ST Portfolio Grid

This element display portfolio list

Style 1: Hover show Text: when user hover to thumbnail, title and description will display

On this element, you can:

  • Custom number of columns
  • Custom width height image
  • Custom limit excerpt
  • Item Per page: Enter number of portfolio to show
  • Categories: select categories to show posts its
  • Order/Order by: Select the order type for post list

The element will be display below

Style 2: Full width only content

On this element, you can:

  • Number Post: Enter number of portfolio to show
  • Categories: select categories to show posts its
  • Order by: Select the order type for post list

The element will be display below

Style 3: Full width with single detail

On this element, you can:

  • Number Post: Enter number of portfolio to show
  • Categories: select categories to show posts its
  • Order by: Select the order type for post list

The element will be display below

7.9. ST Social Item

This element display social list

On this element, you can:

  • Enter title and sub title
  • Add link and icon social

The element will be display below

7.10. ST Google Map

This element display a google map

On this element, you can:

  • Map Type: select address type or Lat/Long type
  • Latitute/Longtitude: Enter number of latitude and longtitude get from google map if choose Lat/Long type
  • Marker Image: upload a marker image
  • Custom lightness mode, saturation, gamma, zoom

The element will be display below

7.11. ST Skill

This element display skill level.

On this element, you can:

  • Enter skill name
  • Enter level index

The element will be display below

7.12. ST About

This element display the services

On this element, you can:

  • Enter title, subtitle, icon, content
  • Custom position of icon
  • Enter link direct for service

The element will be display below

7.13. ST Price Item and ST Pricing table style 2

This element display a pricing table. To show multiple pricing table, you can add the element to the multiple columns

On this element, you can:

  • Enter package name
  • Enter package price
  • Enter price unit
  • Select rating star
  • Enter features

The element will be display below

7.14. ST Purchase & ST Call to Action

This element used such as the invitation to click to use or buy service

On this element, you can:

  • Enter a content
  • Enter a button title and add link direct for it

The element will be display below

7.15. ST Contact Info

This element show contact info like email, address, number phone

On this element, you can:

  • Enter number phone
  • Enter title content (email, address). Use this shortcode
    [small class=white]support@[highlight]
    [small class=white]Wunderkind, 36th
    Floor, 5th Ave. [/small][highlight]
    New York [/highlight]

The element will be display below

7.16. ST Under Contruction

This element build page under contruction

On this element, you can:

  • Enter title and short description
  • Enter percent of completion
  • Enter socials link and upload logo

The element will show some style below

8. Pages

Pages are probably among the the most important contents in a site. You can create as many pages as you want, in different templates and styles, such as homepage, normal page (default), footer page, blog page,... Visual Composer is also a power tool in building multifunction sections in your pages.

8.1 Visual Composer

Visual Composer for WordPress is a 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. Learn more about Visual Composer

8.2 How to create Home pages

To create Front page:

Step 1: Navigate to Pages > Add new

Step 2: Use Element of VisualComposer to build Home page content

Step 3: Config top banner

  • Enable Banner: check to checkbox to active use banner in top
  • Disable Slider Text: check to check box to disable text slider in which inputted at Texts section
  • Banner Fade: Enter value that determines the next image will fade
  • Banner Duration: The time between slides
  • Video Url: Enter video url if use video into background in top banner
  • Images: upload an image if use parallax version and multiple image if use slides version
  • Texts: enter text display in top banner. Can use shortcode below


[heading h=1][small class=white]We Are Wunder1[/small][br]
Nice to Meet You[/heading]
[p class=lead]Let's meet up and see if there's chemistry!
[st_home_btn url='#about']MEET THE TEAM[/st_home_btn]

[banner align='left']

[heading h=1][small class=white]We Are Wunder2[/small][br]
Nice to Meet You[/heading]
[p class=lead]Let's meet up and see if there's chemistry!
[st_home_btn url='#about']MEET THE TEAM[/st_home_btn]


[banner align='right']

[heading h=1][small class=white]We Are Wunder3[/small][br]
Nice to Meet You[/heading]
[p class=lead]Let's meet up and see if there's chemistry!
[st_home_btn url='https://www.google.com.vn/?gws_rd=ssl']MEET THE TEAM[/st_home_btn]


  • Image Pattern: upload a image in to background if use image pattern version
  • Menu style: select a style menu

Step 4: Navigate to dashboard Settings > Reading > Select the page created into the front page

8.3 How to setup Contact-form

Step 1: Make sure you have installed the Contact Form 7 plugin (which should be done in the installation of the theme).

Step 2: Navigate to the "Contact" option on the main dashboard menu, click "All" then Edit one contact form, or select "Add New"

Step 3: Edit the form fields, your contact email, and customize any of your auto messages. Save the form and then use the shortcode provided in the brown bar at the top to insert your contact form wherever you want it. Remember to enter your email replaced the test@gmail.com so you can receive the messages.

9. Creating Blog Posts

Eight offers several blog post types: standard, image, gallery, video, audio and quote. With these features, you can emphasis your post as texts, images, slider, audio, link or video conveniently. Your posts can also easily classified into group/topic with the Categories function. The News will be organized in a very smart and creative way. To create blog posts, see our instructions below.

Steps to Create A Blog Post:

Step 1 – In your Dashboard, go to Posts, Add New

Step 2 – Enter the post's title and content in the editing field.

Step 3 – Choose Post Format in the right corner. Defaulted is Standard.

Step 4 – Depends on each particular format that you choose to use specific button/field to add content for posts. Please see section Post Format below the video

Step 5 – Add Categories: To assign it to the post, check the box next to the Category name.

Step 6 – Add Tags: Type the words to be tagged, separate multiple tags with commas.

Step 7 – Choose Featured image: click “Set Featured Image” then choose a image for your post.

Step 8 - Post Options:

  • Style: there are two styles to choose
  • Embed for Format Setting: Add featured image by post format, this content will be display become thumbnail in blog post list and top content in single post
  • Disable Banner:
    • Default: use setting from Theme Options > Blog Settings
    • Yes: disable banner from Theme Options > Blog Settings and Post Options
    • No: use banner in Post Options
  • Background Banner: upload an image into background banner display in top page
  • Background Banner Opacity: custom opacity for banner
  • Title Banner: enter a title display in banner
  • Disable Breadcrumb Single: default - get setting from Theme Option, yes - disable breadcrumb of this post
  • Sidebar Position: select sidebar position

Step 9 – When you have finished, click Publish to save and publish the post.

Post Format

- Standard - This is the default style. The post displayed only main text, featured image just displayed on the blog homepage.

- Image - The post shows text with image. Using Add Media button below post's title to add pictures.

- Gallery - The added images showed in slider (gallery) on top of the post. Use Slider button to add images.

- Video - The post shows a video on top. Paste the video URL in the Media URL box.

- Audio - The post shows text with audio. Paste the audio URL in the Media URL box, then a music player will be displayed on the top of the post.

- Quote - The post's content shows text being quote. Use the " symbol on the toolsbar

9. Portfolio

9.1. Adding & Editing Projects

To create a project navigate to dashboard Portfolios > Add new.

Step 1 – Enter the post's title and content in the editing field.

Step 2 – Add Categories/Tags: To assign it to the post, check the box next to the Category/Tag name.

Step 3 – Choose Featured image: click “Set Featured Image” then choose a image for your post.

Step 4 - Project Fields:

  • Single Portfolio Style: use setting from Theme Options or set private for per single portfolio page
  • Upload An Image Banner: upload an image into banner of single portfolio page
  • Background Banner Opacity: custom opacity for banner
  • Banner Title: enter a title display in banner
  • Content Position: locate show content compared to Gallery - can use setting from Theme Options or set private for per single portfolio page
  • Enter project content include Sub title, Author, Client, Project URL, Final Date, Project Description, Embed for Post Format
  • Create New Gallery: upload list gallery of project

Step 5 – When you have finished, click Publish to save and publish the post.

9.2. Displaying Portfolio

You can make any page a Portfolio page by create new page and add the ST Portfolio Grid element. We have to 6 style for you choose

10. Translations

10.1. WPML

The theme may be configure to be a multilingual site. You can visit WPML site learn more WPML.

After that the WPML wizard will guide you to properly configure the multilingual site.

For reference: the widgets and theme options can be only translated using the String Translation.

10.2. Manual translation

All our WordPress themes are translation-ready which means that you can easily translate them into any language you want. Here are some instructions: Firstly, navigate to Settings -> General -> Site language, choose your language. General Settings ‹ Traveler — WordPress Secondly, navigate to the folder of the theme (wp-content/themes/) and in the folder languages/ (of the theme) you will find file file wunderkind.po and wunderkind.mo are default language files that we provide for you to customize in your language.. Please try doing following steps: 1. Rename traveler.po and traveler.mo as language corresponding with your website ( For ex, German, rename them as de_De.po/ de_DE.mo ) 2. Change some information to activate language file, please look at this image: 3. Load this file (as the catalog) in the PoEdit and start translating. When done, save the .po file in the folder translations (there are en_EN.po and en_EN.mo files already there as an example). .mo file will be automatically created next to the .po file. This is an example of translating: NOTE: Remember to back up your language data before updating the new version of the theme.

10. Extras

10.1. Demo Images

All the images shown in the demo page of Shinetheme are copyrighted and come blurry with the theme (demo content).

10.2.Child Theme

1. About Child theme

A child theme is a theme that inherits the functionality and styling of another theme called parent theme. Child themes are the recommended way of modifying an existing theme without causing any changes in parent theme’s code as well as losing any modifications.

A child theme is recommended to use as the following reasons:
  • Using a child theme ensures your modifications to be preserved when the parent theme is updated.
  • Using a child theme can save you more time.

2. How to activate Child theme in Wunder

The child theme of Traveler enclosed in Traveler package is called Traveler-childtheme.

To activate the child theme:

Step 1 - Go to Dashboard -> Appearance -> Themes -> Add new theme -> Upload wunder-childtheme. Wait for a second.

Step 2 - Click Activate the theme.

For example, if you want to modify custom.css without making changes in Traveler code and being lost when updating, copy and paste custom.css in wunder-childtheme.

Step 1 - In wunder-childtheme folder, create a new folder named Css.

Step 2 - Copy custom.css from Css folder of the parent theme then paste it in Css folder of the child theme. Now you can modify any parts.

pic 4