SeoWave Documentation

Skip navigation

# Documentation

An overview of SeoWave, how to install and use, theme options and examples, and more.

# General Information

We would like to thank you for purchasing SeoWave!

This documentation file helps you to understand the whole theme concept and how it works. You should read all sections of the file before start your work. Here have multiple detailed explain of elements, theme sections and included video tutorials.

If you have any questions that are beyond the scope of this help file, please check out and search for Forum page.

After that you still can't find the solution yet, please leave a ticket on Support system then support agents help your issue.

# WordPress Information

Surely you have already installed WordPress on your server. If you don't installed it yet and you are new to WP and have problems installing it, you might want to check out following tips.

About WordPress
  Detailed instruction about WordPress
Installing Tutorials
  Installation tutorial by WordPress
Instructional Video
  Video lessons by Woo Themes
Getting Started
  WordPress Tips for Beginners
WP101 Basix Training
  Some great videos from WPTuts on WordPress

# What’s Included In Package

You need to download theme files after you've purchased the it. Following image describes downloads section of the item and you have 2 download choices.

Downloading All Files gives you a all-files.zip file with all the content listed below

documentation
  This is costumer's handbook. Obviously, If you can reading this file, you're open this file :)
seowave.zip
  You can use this file for install function of built in WordPress.
seowave-child.zip
  Child theme. Please make your file changes in it. And this child theme helps you to keep your changes in it even updated main theme continually. You should read more details about child theme here.
dummy-data
  You have an One Click option for import demo data. But if you need detailed xml files please pick up those here. You should read about how to use it from Dummy Data part of this document.
changelog.txt
  Contains changes history, date and modified files list.

Downloading the installalable WordPress theme only gives you the SeoWave.zip file.

# Installation

You can either choose to upload the theme via WordPress upload function or via ftp to your site.

### 1. Via WordPress theme uploader (recommended)

Step 1
  Login to your website
Step 2
  Go to `Appearance -> Themes`
Step 3
  Click on `Install Themes` tab
Step 4
  Click on Upload link and Browse to the `SeoWave.zip` file (it is located in the folder you've downloaded from ThemeForest).
Step 5
  Click `Install Now` button
Step 6
  Then you see SeoWave settings page right side on Dashboard menu section.
Step 7
  Now you are ready to go. Create your new site and control it.

### 2. Via FTP client

Step 1
  Login to your hosting via FTP client application (such as FileZilla and CuteFTP)
Step 2
  Go to `wp-content -> themes` directory
Step 3
  Upload SeoWave folder (uncompressed) into this directory
Step 4
  Refresh `Appearance -> Themes` of your dashboard and Activate the theme.

# Initial Settings

After the activation you see this notice at top of your dashboard. This theme requires those three additional plugins and you need to install those.

Please click on Begin insalling plugins.

Envato Toolkit
  The Envato WordPress Toolkit enables you to access your Envato WordPress purchases from within your WordPress Dashboard. It allows you to not only install themes, but also to receive update notifications and update automatically, just like regular WordPress themes.
Visual Composer
  The most advanced PageBuilder Plugin that is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required
Revloution Slider
  This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
Portfolio Plugin
  This plugin an optional plugin but highly recommended for your portfolio. It has own features and sinlge post options those compatible with portfolio details section. Your portfolio posts won't let go after you activated different themes on your site and that's the biggest reason why we are adding portfolio post type as in a custom plugin.

Please select all plugins and select Install option on dropdown and finally click on Apply button.

You will see this page after activated plugins.

### Configure Envato Toolkit Plugin

Envato Toolkit plugin requires MarketPlace username and API Key. You can get API key from your Settings tab of ThemeForest account. Lets provide those infomation and get theme update anytime and easily.

# Demo Data

### One Click Demo Data Options

Theme has dedicated data option. You should click one of those link and select your desired home page layout. Action will set few important tasks including selection of Home page, Main navigation setting and Sidebar widgets when you click on Import Demo Data button.

Please wait for a while until imports all the content.

### Full content Demo site setup

Previous option helps you to include minimized demo content on your site reason for quick include. But you can have full demo data with regular XML data imports.

1. Go to Tools → Import
2. Choose WordPress from the list.
3. Upload the demo content.xml using the form provided on download.
4. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
5. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.
6. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus are imported. You will need assign the menu a theme location & you’ll need to configure widgets. This is a limitation of WordPress’ import system.

# Update Instructions

#### Note

Please make sure you backup your existing theme folder before updating. Additionally we recommend performing the update on a development site before making it on your live site.

### Via Envato Toolkit Plugin (recommended)

Hope you have provided your account information in Envato Toolkit plugin. If you go to the plugin page, you'll see similar to following image. Let's click on Update automatically link at right bottom. This is a most efficienat and easy way to integrate latest verion on your site.

After clicking to auto-update, you’ll see the confirmation that everything worked correctly.

### Via WordPress theme uploader

Go to the Appearance => Themes and activate another theme than SeoWave such as TwentyTwelve, TwentyThirteen or SeoWave child theme. Delete the old version of the theme because folder name existing error comes up when we try to install it without deletion. Then install the theme again as you see early in this documentation.

### Via FTP client application

Usually updating a theme means replacing the old files with the new ones. You can see changelog.txt file from the new download archive and you can get updated files list as modified/added and deleted. Upload and overwrite those files on your theme directory.

If theme changed lots of files and you really hard to collect changed files, there is a better way to do it when it comes to WordPress themes.

WordPress treats two version of the same theme as different themes. That is, if you have SeoWave v1.2 and v1.3 in your `wp-content/themes` folder they are treated as two different themes independent of each other.

That means you can have multiple version of the same theme installed on your blog. So whenever there is a new version of your theme available, instead of replacing or deleting the files of the older version follow this procedure.

1. Try to upload new theme archive to the site
2. If the folder name of the new version clashes with the old version, rename the folder of new version.
3. Upload the new version to your `wp-content/themes` folder via FTP or through the interface provided by your web host or by using the upload feature in WordPress.
4. Activate the new version from your dashboard.

The main advantage of following the above procedure is you can quickly switch back to the old version of the theme if you find any problems with the new version or if it clashes with any plugins you are using.

# Live Customize Panel

Live Customize panel has many options those help you to control your site. You have to know only where your desired options exist and how to use them. Please take some time to navigate through each tab and read options' description.

Group | Class | Description
--- | --- | ---
`General` | Primary color | The color that fills title background, link, link hover and pagination etc. But if the color doesn't fit for your area, you can set correct one at specific areas. Those customizations won't be overwritten by this.
General Font | General font family options
Secondary Font | For sub menu and meta description
Menu font |
Text color |
Footer & Sidebar text color |
Footer Background color |
Sidebar, secondary link color |
Background color |
`Branding &Logo`
`Logo Image Options` |
Logo Image | Choose you logo image and see live result. If you think your logo image bigger at top, you can edit directly the image from media library popup.
Logo Width | Don't you remember? Just click on your logo image and see the image details from media library.
Retina Logo Image | x2 size of your original logo image.
Favicon | 16x16, PNG/ICO/JPG
Login Page Logo | up to 274x95px
`Advanced` | `Header` |
Header Style |
Header Height (px) | It increases header padding by difference between logo height and this value. But it doesn't show any result if you set lower value than logo height.
Header Background Color |
Menu color |
`Top bar` |
On off TopBar |
Background color |
Left content |
Right content 1 |
Right content 2 |
`Page Title Area` |
Title Top Space |
Title Bottom Space |
Background Image |
Title Background Color |
`Content` |
Heading Color |
Heading Font | Font family option for H1-H6 tags and Post title
Heading Weight | Option for H1-H6 tags and Post title
`Sidebar options` |
Widget Background Color | Only for boxed/bordered widgets
Widget Title color |
Widget Title Font | Font family / Font size / Font weight
Widget Text Color |
`Footer` |
Enable Footer | On/Off
Footer Layout Style | Select your footer column number and column variations. Then add your widgets under Appearance => Widgets by column number.
Background Color | Sub Footer color is 10% darker than footer.
Footer Heading color |
Footer Title Font | Font family / Font size / Font weight
Footer Text Color |
Footer Link Color |
`Sub Footer` |
Enable Sub Footer | On/Off
Sub Footer Type | Choose Content / Left Content + Right Menu / Left Menu + Right Content
Sub footer content | Please go to the Appearance => Widgets section and add some widget with your text content. Also you can have social links there or rich content.
`Post Types` | `Post Options` |
Related Posts | On/Off
Author Box | On/Off
Post Comments | On/Off
Next/Prev links | On/Off
`Page Options` |
Author Box | On/Off
Page Comment | On/Off
`Portfolio Options` |
Portfolio Label | Use this field to rename your portfolio custom post type.
Portfolio Slug | Changes the default slug for this post type.
Related Posts | On/Off
Comment | On/Off
Next/Prev links | On/Off
Portfolio Main Page | Please select here main portfolio page. It's important for your breadcrumb.
Portfolio Sidebar | You can set here default portfolio sidebar area.
`WooCommerce` |
Shop Page Layout |
Product Page Layout |
Overlay Transition |
Shop Page Sidebar |
Product Page Sidebar |
`Share Buttons` |
Facebook | On/Off
Twitter | On/Off
Google+ | On/Off
Email | On/Off
On Posts | On/Off
On Pages | On/Off
On Portfolio | On/Off
On Products | On/Off
`Extras` | `Export/Import` |
`Custom CSS` |
General CSS |
Tablet CSS | Screen width between 768px and 991px
Wide Phone CSS | Screen width between 481px and 767px. Ex: iPhone landscape.
Phone CSS | Screen width up to 480px. Ex: iPhone portrait.
`Widgets` |  | You can add your widgets here to sidebars and footer columns.

You can Reset all your changes back to default with bottom corner icon. Don't forget to backup your settings if you think some of them are important to you.

# Page Builder : Visual Composer

After the installation, you can configure something on following place for Visual Composer. You might want to allow VC for your custom post types initially.

Please read more about Visual Composer page builder from separate documentation file.

# Additional VC Elements by our theme

Visual composer has tons of elements that presents content view. But our theme has a few advanced elements that enriches this beautiful theme. Please hit on the tab and find elements and use them for your need. Every element has a purpose and detailed options.

- `Blog posts`
- `Button`
- `Clients item`
- `Clients` - container element
- `Counter`
- `Feature box`
- `Google maps`
- `Image slider`
- `Portfolio`
- `Price table`
- `Process item`
- `Process` - container element
- `Quote item`
- `Quote` - container element
- `Register box`
- `Service box`
- `Team`
- `Testimonial`
- `Title`

# Page Options

You'll find Page options at bottom of your main editor. Please read the option name and description and use them for customize your every single page.

# Portfolio Options

Theme has an additional element for your portfolio. You can make your portfolio page with it first by it's options including Column variations, Filter and Pagination options.

# Menu & Navigation controls

Menu system works through WordPress core functions. Then I hope you don't have any trouble with it. We extended menu options with a few options such as Menu Icon and Mega menu options. Please look at next images and follow the steps for your menu.

# Contact Form

Our theme is compatible with Contact form 7 and please put following markup on the Form field of your form. Then your form turns similar into our style that presents on Contact page.

    <div class="col-sm-6">
    <div class="row m0">
    <label>Name <span>*</span></label>
    [text* your-name class:form-control]
    </div>
    <div class="row m0">
    <label>Phone</label>
    [text* your-phone  class:form-control]
    </div>
    <div class="row m0">
    <label>Monthly Budget <span>*</span></label>
    [select menu-715 class:form-control include_blank "300 USD" "400 USD" "500 USD"]
    </div>
    </div>
    <div class="col-sm-6">
    <div class="row m0">
    <label>Email <span>*</span></label>
    [text* your-email class:form-control]
    </div>
    <div class="row m0">
    <label>Website <span>*</span></label>
    [text* your-website  class:form-control]
    </div>
    <div class="row m0">
    <label>How did you learn about SEOWAVE</label>
    [select menu-482 class:form-control include_blank "Google Search" "Yahoo Search"]
    </div>
    </div>
    <div class="col-sm-12">
    <div class="row m0">
    <label>Which services are you interested in?</label>
    [select menu-979 class:form-control include_blank "Off Page Optimization" "On Page Optimization"]
    </div>
    </div>
    <div class="col-sm-12">
    <div class="row m0">
    <label>Additional Information</label>
    [textarea your-message class:form-control]
    </div>
    </div>
    <div class="col-sm-12 text-center">
    <button class="borderred_link" type="submit"><span>submit details!</span></button>
    </div>

And mail section would be inserted

    From: [your-name] [your-last-name] <[your-email]>
    Subject: [your-subject]
    Phone : [your-phone]

    Message Body:
    [your-message]

#### Get Free Quote form

    <div class="input-group">
        <span class="input-group-addon"><img src="http://demo.themeton.com/seowave/wp-content/themes/seowave/images/icons/footer/name.png" alt="Icon"></span>
        [text* your-name class:form-control placeholder "Name"]
    </div>
    <div class="input-group">
        <span class="input-group-addon"><img src="http://demo.themeton.com/seowave/wp-content/themes/seowave/images/icons/footer/email.png" alt="Icon"></span>
        [email your-email class:form-control placeholder "Email"]
    </div>
    <div class="input-group">
        <span class="input-group-addon"><img src="http://demo.themeton.com/seowave/wp-content/themes/seowave/images/icons/footer/url.png" alt="Icon"></span>
        [text* your-web class:form-control placeholder "Website url"]
    </div>

    [submit class:borderred_link "Get Quote"]

    From: [your-name] <[your-email]>
    Subject: [your-subject]

    Website:
    [your-web]

# Sources and Credits

Thank you to all who developed following projects/products. We really appreciate your support and time. We definitely couldn't do this template without you. We wish you all the best.

Special thanks to:

#### Images

- PhotoDune.net - Team images, some slider backgrounds
- PublicDomainArchive.com - Background images, portfolio image & gallery images
- Joshua Jadon - Book cover images on Home7, didn't included on download
- KLM - Be My Guest collection by Julian Burford
- IconFinder.com - Free social logo PNGs
- SubtlePatterns.com - A couple of transparent background textures

#### Open Source Projects

- Twitter Bootstrap
- Isotope
- jQuery
- Owl Carousel Slider
- MediaElement HTML5 Player
- Less By Alexis Sellier

#### Premium Projects

- Visual Composer by WPBakery
- Revolution Slider by ThemePunch