We would like to thank you for purchasing Flap!

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 Knowledge base 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.

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

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.

Download Package

 

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 :)
Flap (Zip)
You can use this file for install function of built in WordPress.
Flap-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.
Licencing (Folder)
This contains the licensing files.
DummyData (Folder)
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 (Text)
Contains changes history, date and modified files list.

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

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 Flap.zip file (it is located in the folder you've downloaded from ThemeForest).
Step 5
Click Install Now button
Step 6
Then you see Flap settings page right side on Dashboard menu section.
Step 7
Now you are ready to go. Create your new site and control it.
Step 1

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 Flap folder (uncompressed) into this directory
Step 4
Refresh Appearance -> Themes of your dashboard and Activate the theme.

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.

Step 1
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.
Layer Slider
The most advanced Responsive WordPress Slider Plugin with the famous Parallax Effect and 3D Transitions! You can use LayerSlider to create a breathtaking Image Slideshow, Banner Rotator or Content Slider to your site!
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.

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

Step 2

You will see this page after activated plugins.

Step 3

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.

Step 4

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.

Demo data

Please wait for a while until imports all the content.

Revolution Slider Content

Revolution slider exports slider content with image and css files into a zip archive. But we don't want to include all those files into our theme zip and increase theme archive size. If the theme is getting bigger, you'll face many problems related that for example, exceed of upload file size limit or execution time problem.

Therefore this option includes only slider content and layers. Images and css styling come from online demo site and if you don't see proper layer styling there, please insert demo sliders from dummy-data folder. Or you can edit those sliders and replace your images and styling.

 

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.

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.

Update

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 Flap such as TwentyTwelve, TwentyThirteen or Flap 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 Flap 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.

Theme Options 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 option's description.

Tab Class Description
General SettingsReset Colour OptionsReseting color options value.
Responsive OptionUse Responsive design layout.
Tracking CodeAdd your Google Analytics or other tracking code here. This will be added into the footer of your site.
Remove Heart LikesIf you don't need any heart/like section on post and widget section, please turn this option ON.
Page BuilderYou can deactivate Page Builder featured on specific post types such as post, page and portfolio.
Top BarEnable Top BarTurnig on/off top bar
Top Bar (Left) 
Top Bar (Left)Please add elements here and order them with mouse drag & drop.
Top Bar (Right) 
Top Bar (Right)Please add elements here and order them with mouse drag & drop.
Text content 1 
Text content 2Please add text content for your top bar.
Social Profiles on Top BarPlease add text content for your top bar.
Post And PagePost Format in SingleIf you turned this option OFF, post format content won't show on single post pages.
Related PostsRelated posts on bottom of post content in single post page.
Author box on Posts 
Comment on PostsWordPress has its own way to disable comments in a Post. But you should turn this option OFF if you want to remove comments for all your posts.
Author box on Pages 
Comment on PagesWordPress has its own way to disable comments in a Page. But you should turn this option OFF if you want to remove comments for all your pages.
Portfolio OptionsPortfolio SlugPortfolio slug that should be show at url for portfolio single items.
Portfolio ColumnsItem column on Taxonomy / Category page. You can select 2, 3 and 4 columns layout.
Portolio Sidebar Type 
Portfolio Sidebar 
Single Layout 
Single Sidebar 
Comment on Portfolio item pageWordPress has its own way to disable comments in a Page. But you should turn this option OFF if you want to remove comments for all your pages.
Portfolio Next Prev Links at TopYou can turn off Next Preview and Main page links at right bottom on single portfolio page.
Main Portfolio PageA page which shows when click on View all button from single portfolio item.
Portfolio Related Posts at BottomPortfolio Related Posts at bottom of your portfolio item page.
Archive Category TagsCategory Sidebar Type 
Category Sidebar 
Archive Layout 
Archive Sidebar Type 
Archive Sidebar 
Tag Layout 
Tag Sidebar Type 
Tag Sidebar 
Search Sidebar Type 
Search Sidebar 
Sidebar Type on Author Page 
Author Sidebar 
WooCommerceWooCommerce Page Layout 
WooCommerce Sidebar 
Product Single Layout 
Product Single Sidebar 
Product Overlay TransitionChoose whether you would like the product overlay transition to be enabled.
Share and SocialsShare Buttons 
Visibility of Share Buttons 
Custom SidebarCustom sidebarYou can create unlimited siderbars for your site. You should add widgets on Appearance=>Widgets after you have added new sidebar here.
Footer OptionsEnable FooterThose are general footer layouts. If you need more creative footer area there, you should select Footer layout #1 and add your layout content there. It is possible to add page layout shortcode in here with text widget.
Footer LayoutSelect a background image or pattern.
Footer Background ImageRepeat
Footer BarFooter BarFixed or Scroll
Footer Bar (Left) 
Footer Bar (Left)Please add elements here and order them with mouse drag & drop.
Footer Bar (Right) 
Footer Bar (Right)Please add elements here and order them with mouse drag & drop.
Footer Text 1 
Footer Text 2  
Custom CSSCustom CSS (General)Your general custom style
For TabletsScreen width between 768px and 985px
For Wide PhonesScreen width between 480px and 767px
For PhoneScreen width up to 479px
Backup OptionsBackup and Restore OptionsYou can use the two buttons below to backup your current options, and then restore it back at a later time. This is useful if you want to experiment on the options but would like to keep the old settings in case you need it back.
Transfer Theme Options DataYou can tranfer the saved options data between different installs by copying the text inside the text box. To import data from another install, replace the data in the text box with the one from another install and click "Import Options".

The theme has detailed site customization options which builtin WP Customize functions. Please click on Site Customize link from the WordPress admin bar and use the dedicated options for your specific parts.

Please find & read description of options and see what they can do from here.

Tab Class Description
General OptionContainer LayoutYou can set site layout here. You have fullwidth and boxed variations.
Site Top SpaceIf you need to set top space above than everything, please set this option
Site Bottom SpaceIf you need to set bottom space bottom of footer area, please set this option
Background ImageBody background image
Background RepeatBackground property
Background Position (x,y)Background property
Background AttachmentBackground property
Header OptionLogo Image 
Logo HeightOriginal logo height
Logo WidthOriginal logo width
Retina Logo ImageRetina logo, it should be 2x version of regular logo image
Favicon ( 16x16, PNG/ICO/JPG )
Login Page Logo (up to 274x95px)
Header Height (higher than logo!) You need more space on header area, please use it
Header Fixed at TopFixed header type
Enable Search Box 
Menu AlignmentRight | Left | Center
Header Transparent 
Header Opacity 
Title Area OptionTitle Area SpaceYou can set title area background on every pages, and this is default area for regular wp pages including category, archive etc
Background Image 
Background Repeat 
Background Position (x,y) 
Background Attachment 
Color OptionsPrimary ColorSelect here main ancient color of your site. All related styles generate by this color. And you don't need to select boring detailed options including border bolor etc
Text Color 
Body Background Color 
Content Background Color 
Top Bar Background Color 
Header Background Color 
Footer Background Color 
Brand Success 
Brand Info 
Brand Warning 
Brand Danger 
Font OptionsGeneral Font Family 
General Font Size 
General Font Weight 
Menu Font Family 
Menu Font Size 
Heading Font Family 
H1 Size 
H2 Size 
H3 Size 
H4 Size 
H5 Size 
H6 Size

Activate Page Builder

Starting Page Builder

Add Element and Control buttons

Choose an Element. All elements are based on WP shortcode.

All elements have common controls such as Edit, Clone and Remove. Also you can order and arrange elements with Drag and Drop.

You can save current layout as a Template. Then you can apply it on another pages.

Short video about Page Builder

A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post.

Post Options

Flap supports WP 3.6 post format and this style is inherited by 3.6. But it doesn't matter and works equally if you are using previous version of WordPress core.

  • aside - Typically styled without a title. Similar to a Facebook note update.
  • gallery - A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  • link - A link to another site. Themes may wish to use the first <a href=""> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
  • image - A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
  • quote - A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  • status - A short status update, similar to a Twitter status update.
  • video - A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
  • audio - An audio file. Could be used for Podcasting.
  • chat - A chat transcript.

More about Post Format here http://codex.wordpress.org/Post_Formats

Page Options

You'll find Page options at bottom of your main editor. Then you can control your page with that. Please read the option name and description and use them :)

General Page Options General Page Options

One Page Options

Yeah, I hope you like One Page design already. Here you can see how to accept One Page with this theme. Prepare you pages as you want there and follow the steps in this image.

Page Options

Ultimate Page Options

The page template gives you an unlimited possibility. First you need to Page Template as Ultimate. Then related 2 option boxes appears at bottom of main content editor.

  • First box is Ultimate Page Options and it has detailed options for customization of this page and those will work independent from theme options. Please look at what they do:
    1. Container Layout
    2. Logo (for this page)
    3. Enable Topbar
    4. Enalbe Search Box
    5. Menu Alignment
    6. Enable Header Transparent
    7. Header Height
    8. Enable Footer
    9. Enable Footer Bar
    10. Menu Font
    11. Heading Font
    12. Body Font
  • Second box is Less Options for this page. You can customize your css style here.
Page Options

You see background image moves different apparent position when you scroll you page down. That parallax effect can apply for background images of Page and Row element.

Page Parallax

Row Parallax

Video Background

You can set up this beautiful option like following. Lets edit your Row element and set video options.

Most of themes provide portfolio single layouts. But we don't because our theme has Page Builder. You can build any custom layout and use it with Template for all of your portfolio items.

Add Portfolio Item

Video and Gallery portfolio items

You can show your portfolio items as Gallery and Video posts. Please use following options for your need.

Create Portfolio Page

You need to do following steps for your menu.

If you need to use your custom menu icons there, you should upload them on Icon field as above image. You need to resize and upload there proper image and control your image icons with this css selector.

img.nav-custom-icon { width:14px; height:12px; }

If you need sub menu treasures (only for sub elements of mega menu), you should make following changes on your sub menu elements.

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t even need to leave your web browser. To do an automatic install of WooCommerce log in to your WordPress admin panel and go to: Plugins > Add New.

In the search field type “WooCommerce” and click Search Plugins. Once you’ve found the plugin you can view details about it such as the the point release, rating and description. Most importantly of course, you can install it by simply clicking Install Now. After clicking that link you will be asked if you’re sure you want to install the plugin. Click “yes” and WordPress will automatically complete the installation.

It’s possible at this stage that you will be taken to a page requesting the FTP details of your webserver. This will be the case if you’ve not installed a plugin on this particular installation of WordPress before. If so, simply fill in your details to complete the installation.

Manual installation


The manual installation involves downloading the plugin and uploading it to your webserver via your favourite FTP application.

  1. Download the plugin to your computer.
  2. Unzip the file.
  3. Using an FTP program, or your hosting control panel, upload the unzipped plugin folder to your WordPress installation’s wp-content/plugins directory.
  4. Activate the plugin from the Plugins menu within the WordPress admin.

After you’ve installed and activated the plugin, be sure to select ‘Install WooCommerce Pages‘ to get started.

More details of WooCommerce setup

If you need more detailed documentation of WooCommerce usage, you should visit this link and get your information.

WooCommerce options (builtin the theme)

Download Package

Very first we need to select Footer layout on Theme Options => Footer.

Then we need to add widgets into Footer Sidebar area on Appearance => Widgets.

Thank you all of you guys for your amazing works. We always appreciated for you!

Open source projects

Licensed projects

jQuery & Plugins

Demo Graphics from Photodune site (didn't included in download)