Thank you for purchasing my theme. The FlatApp is a special app landing page theme, built for iOS or Android developers who want to build their website on
the popular Wordpress platform. I did my best to make this documentation as informative as possible, but
if you have any questions that aren't covered in the helpfile, feel free to contact me
via my support system or email me via the
contact form on my userpage here.
Thanks so much!
Table of contents
The downloaded package should contains three directories and two .zip files:
1. Fireworks PNG: here are the original layered png files
2. HELP: the documentation file that you actually reading now:)
3. flatapp-installer.zip: this is the installer package that contains the tamplate files
4. flatapp-child.zip installer file for the child theme
5. PSD: the psd files, but that files generated with fireworks ( 'cause I used to work with FW )
The only thing that you need to do before installing FlatApp is to getting WordPress installed on your web server. Unfortunately the wordpress installation process is beyond the scope of this help file, but don't worry you just have to go through some easy steps, furthermore you can find detailed instructions on the WP team's official site:
Installing the theme via the Wordpress theme installer ( step by step just for the beginner's sake )
Step 1: Login to your wordpress admin area. If you can't find your login page, please visit the your
site url plus "/wp-login.php" address. For example: if your domain name is "http://your-site.com",
the login page will be available on "http://your-site.com/wp-login.php".
Step 2: Once you successfully logged in click on the "Appearance --> Themes" menu link.
Step 3: Now you're on the themes page. You should see the "Add New" button at the top of the page. Click on that button then select "Upload Theme"..
Step 4: Select the flatapp-installer.zip. It is important to select exactly the flatapp-installer.zip file not the entire package that you downloaded from the Themeforest. Next click the "Install Now" button and wait a little bit. It may take a several seconds.
Step 5: Once the theme installed you need to activate it by clicking on the activate menu item under the "Theme succefully installed message". After then new menu items should appear in the dashboard navigation:
Step 6: It is important to know that the theme stores all the custom post types in a bundled plugin, so you can reach the contents even if the theme is deactivated. That is good, but you need to install the bundled plugin. The steps you need follow can be seen below:
Installing the theme through an ftp client
In this case you need to extract the FlatApp-installer.zip file. Once it unzipped you should see a simple folder named flatapp. Next, using any ftp program, upload the entire 'flatapp' folder into the themes folder on your webserver ( wp-content/themes ). Once you get the theme uploaded go to your dashboard and activate the theme. That's all.
As we know the wordpress is a blog engine in default, therefore your latest blog posts will be shown
on the homepage, but you would like to see something similar to the
demo site, right? Please follow the next
steps to achieve that:
Step 1: First of all let's delete the sample page, because we don't need that predefined page at all.
Step 2: After then you have to create a new page. So click on the Pages --> Add new menu item. Now type the title / name of the homepage. Just for the sake of simplicity it will be "Homepage" in our example. And the most important part of the process is selecting the "Homepage template" on the right side. Please don't try to add content via the page editor. Each and any content on the homepage will controlled by custom post types and theme options.
Step 3: Now the homepage is created, but you still need to select it as a homepage on the Setting --> Reading admin page. You can set an alternate page for the blog posts too, but it isn't necessary if you don't want to blogging. Anyway, blogging stuff will be covered in the documentations as well.
You need to set up the navigation before start to create content. It's a little bit tricky, because
there is only one page, so the menu doesn't build links between different pages, unless you add a blog page to the site,
but we will talk about this option later.
The url fields of the menu items will contain the targets of the page scrolling JQuery script. Let me explain how it works:
in default case there are fifteen different sections on the homepage and every section has an identifier.
Below are the sections with its identifiers:
1. Home ( all home page variations use the same identifier ) - #home
2. Features 2 - #features2
3. Video tour - #video-tour
4. Screenshots ( carousel style ) - #screenshots1
5. Testimonials - #testimonials
6. Subscribe - #subscribe
7. Features 1 - #features1
8. Fun facts - #fun-facts
9. Services ( aka. features 3 ) - #services
10. Screenshots ( list style ) - #screenshots2
11. Team members - #about
12. Quote section - #quote
13. Pricing tables - #pricing
14. Download buttons - #download-section
15. Contact section - #contact
In default the homepage contains all of the sections in the same sequence you can see above. If you want to hide one of them, you will need to set "nothing" the relevant section content option on the "Theme settings --> Homepage" admin panel.
The navigation will be based on custom links where the labels are optional, but the url must be the identifier of the target section. Below you can read the step by step instruction:
Step 1: Go to the wordpress menu editor by clicking on the Appearance --> Menus menu item in your dashboard navigation.
Step 2: You are now in the menu editor so you can crete your first menu with the desired name by clicking on the "Create Menu" button.
Step 2: After then you need to add items to your freshly created menu. As I said above, we are going to use custom links. The label can be anything, but the url must be a valid identifier without any http://
Step 3: Don't forget to select the menu for the proper locatioan once all the items created and push the save button. Your final result should looks something like:
Even though the theme has plethora of options and some of them seem to be difficutl for the first glance, beleive me, they are easy to understand. All of them have a
short help text that appears when you move the mouse over the question mark. Some of the tutorial videos also represent how to use theme options. Anyway,
feel free to write me anytime in case you don't understand one of the options.
FlatApp comes with eight different home sections. I call them sections since all of the contents can be found a long homepage that consist of different sections. Obviously the home
section is the very first section. The both the available layouts and components can be selected on the "Theme settings --> Homepage" admin panel.
Global homepage options
Some of the homepage elements can be found all of the available home layouts while others are built for one style only. The welcome message, download button and home button
elements can be used across the home sections.
Special homepage options
As I mentioned the special features of the additional home section layouts can be controlled by special options. Here is the list of them:
Homepage Background: Used by the home2 and home6 layouts.
Homepage Mockup: Used by the home5, home6, home7 and home8 layouts.
Background pattern: Used by the home3 and home7 layouts.
Background Video: Used by the home4 and home8 layouts. Only YouTube videos allowed!
FEATURES 1 POST TYPE
You can list the features of your app in three different layouts by using this post type. The logic of the posts is quite easy. There is a title, a featured image, text contents and a metabox
that allows you to select a layout formation. The direction and style of the entrance animation is automatic. You can disable entrance animations for the entire page on the
"Theme settings --> General" admin page.
FEATURES 2 POST TYPE
Working with this post type is a bit more difficult but still quite understandable. First of all you can set up a title and
an intro text for the section on the "Theme settings --> Homepage":
To create posts or features in this case, you need to click on the "Features style 2 --> Add Feature" in the admin. This layout of this post type is designed to show six selected features of the app around a phone mockup, so please try to write titles and text contents wisely. Long titles and texts can broke the layout.
You have 200+ icons in the admin to choose from, but the theme is compatible with the entire FontAwesome library ( version 4.4 ). If you select an icon from the list below the text editor and click on it, its css class will be added to the custom icon field, but you can copy and paste any class from the mentioned library if you can't find your perfect icon in the list. So, this how the admin side of the "Extensive Docs" feature looks:
And this is the result on the client side:
Use icons from the Font Awesome library:
1) First things first, go to the http://fortawesome.github.io/Font-Awesome/icons/ page and select an icon.
2) Once you found the icon you like click on it.
3) Copy its css class.
4) Then paste it into the custom icon field:
First of all it is important to know that there is only one "Screenshots" post type, but there are two sections that shows the same screenshots in two different layouts: a carousel style section ( #screenshots1 ) and a grid of images ( #screenshots2 ). Creating screenshots is really easy. Click on "Screenshots --> New Screenshot" then a select a thumbnail and full size image. The recommended minimal width for the thumbnail is 290 in pixels.
You can showcase four fun facts with a parallax background. In fact you can show more or less than four, but four is the optimal number in order to keep look of the section beatiful
( According to the urban dictionary a fun fact is short fact that can be about anything, as long as it is interesting and fun. A fun fact can be told at any time and doesn't
have to be relevant to anything ).
Creating these funny little elements isn't difficult at all. Go the to "Fun Facts --> Add Fun Fact" where you can define the "Fact" in the title field and add the related number in the "Number" field. You can control the direction and style of the entrance animation as well in the relevant metabox on the right.
The first element is the result:
You can set up the background of the section on the "Theme settings --> Homepage":
In fact I use this section as a third features section on my demo page, but I named it "Services" because the original intention was to enable the buyers to showcase their app related services such
as design, development etc. Logic of the service elements is quite easy: there is an image, text content and title. It is recommended to use circle images or images with 1:1 ratio ( e.g. same
width and height ) with the minimal width of 200px. You can download some great flat icons here.
It is also important to know that the layout is designed to show services with the same amount of text lines. Obviously it is not possible to create services with the very same text, so please control
the lines with the "Read more" button. If the visitor clicks on that button, the rest of the contents will be loaded right above the the service cards. Please check the relevant tutorial video
in case you do not understand the process. This is how the admin side of a service item should look:
And the result of that should be like this one:
The title and intro of the service section can be edited on the "Theme settings --> Homepage" admin panel.
You can show the team members of your company easily thanks to the Team custom post type. Just click on the
Team --> Add Person in your admin navigation. You are now in the "Add New Person" admin page and I guess it
doesn't looks too difficult for you after the previous examples, but for the sake of safety below are two
screenshots to help you understanding the about post type.
The frontend should look like this:
The title and intro of the team section can be edited on the "Theme settings --> Homepage" admin panel.
FlatApp utilizes the testimonials post type to show some customer feedback on your website. The
logic of this post type is quite plain. The post title will be the name of the customer, the featured image is her / his avatar and
the contents of the editor will be the testimonial itself. Generally that's all.
The theme also features a custom post type that can help you create pricing tables, so you don't need to install any plugin. I admit it can only handle one pricing
tables section only, but that is very easy to create at least.
The link for the "Purchase" button, the amount of tables per row, the title and the intro of the section can be edited on the "Theme settings --> Homepage" admin panel.
Custom post formats:
As a full featured WordPress theme, FlatApp supports four of the WordPress custom post formats beyond the default format. Some of them has an additional metabox to store a shortcode which will create a full width content above the text teaser. In my opinion the logic of the metaboxes are quite understandable, but please view the relevant tutorial videos if you are not sure how to use them.
The FlatApp theme comes with 3 blog layouts: full width, left sidebar and right sidebar. You can change the layout on the "Theme settings --> Blog" admin page. The recommended minimal size of the featured images is 960 pixels regardless the selected layout. It is recommended to compress your images before upload. A compressed 960x675 image is lighter than an uncompressed 500x375 while the quality is almost the same, at least it is really hard to notice the difference. The Jpeg Optimizer is a quite good online tool.
If you want to uplad a custom avatar that appears in your comments, I recommend you to use the WP User Avatar plugin that is fully compatible with the theme. The old custom avatar option of the theme was built on deprecated coding standards, so it was time to replace it with this up-to-date plugin.
Mode has a custom social widget that can show 14 different social icons in the sidebar. The widget is called "Social Profiles" and can be found in the widget list on the "Appearance --> Widgets" page.
The theme also has a widget which allows you to show your short bio, profile picture and social contacts in the sidebar. QUICK TIPP: save the text data of the widget then re-fresh the site in case the "select image" button doesn't work.
Latest posts widget
FlatApp offers a widget that extends the capabilities of the default recent posts widget. It show posts with their thumbnails in the sidebar. The widget uses the "Small thumbnail" image which can be added to each post regardless the post format. If that image is not available, the featured image will be used to fill out the space.
Latest version of Mode features the Facebook Open Graph metabox which allows the editors to customize Facebook sharing components such as title, teaser image and description.
ADD A BLOG PAGE
NOTE: I'd like to note that we will use the menu structure what we created in the
"3) NAVIGATION" chapter.
Step 1: If you already have a blog page ( otherwise please create one ), go to the menu editor and add that page to the navigation.
Step 2: As I said above the theme contains two menu locations: Home Page Menu and Inner Page Menu. The Inner Page Menu is built for the inner pages, therefore you have to create an another menu for the blog page. This additional menu will be very similar to the existing one, but you need to use a page type for the homepage item, and you have to insert the url of your site into the custom links before the ids. Once the items created and the menu saved please select your new navigation for the Inner Page Menu by checking the relevant checkbox at the bottom. The image below might be helpful:
To insert a shortcode into the editor, push the shortocodes button in the TinyMce button bar. After then the shortcodes box
will appear, and you can choose one from the codesnippets.
[br] - Makes a line break. It can be really useful.
[p] - Makes an empyt line.
[separator1] - Grey separator line.
[separator2 title="Separator Title"] - Grey separator line with title. It can be used to separate sections / chapters on the page.
Full width images
Before you add an imageframe to your post, you need to know the absoulte path of the selected image.
I recommend you to upload your images first to the media lybrary, then copy and paste the urls into
a texteditor. I think this is the easyest way to collect the relevant image urls for your post.
[image src="The full path to the image"] - full width image.
[image_title src="The full path to the image" title="Image title"] - full width image with title.
You will need to know the id of the videos in order to use the video shortcodes. The ids can be found in the urls.
[youtube id="Video id"] - a simple embedded youtube video
[youtube_title id="Video id" title="Video title"] - YouTube video with caption
[youtube_full id="Video id"] - Full width YouTube video.
[youtube_full_title id="Video id" title="Video title"] - Full width YouTube video with caption.
[vimeo id="Video id"] - a simple embedded Vimeo video
[vimeo_title id="Video id" title="Video title"] - Vimeo video with caption
[vimeo_full id="Video id"] - Full width Vimeo video
[vimeo_full_title id="Video id" title="Video title"] - Full width Vimeo video with caption.
The drop cap is the first letter of a paragraph that is enlarged to "drop" down two or more lines. It can be used to decorate your articles. Mode offers drop caps
in three sizes:
[drop_cap_small]A[/drop_cap_small] - Small
[drop_cap_medium]A[/drop_cap_medium] - Medium
[drop_cap_large]A[/drop_cap_large] - Large
Besides the defaul <blockquote> element you can use two additional shortcode to show quotes inside your posts.
[quote author="Author"]Insert the quote here[/quote] - Simple inline quote.
[quote_full author="Author"]Insert the quote here[/quote_full] - Full width code which fills out the entire content area.
FAQ / TROUBLESHOOTING
I would like to notice that this is the very first version of theme. My beta testers and me did our best to avoid every issues and I
think the theme works without problems, but if you find anything that doesn't work perfectly, please don't contact me instead of underrate
the theme. I'll do my best to solve your problems as soon as possible. My email address is firstname.lastname@example.org.
It seems none of the animations and effects work.
possible causes in this case:
This problem used to happen with auto-installed WordPress platform at GoDaddy. In this case you will need to go to the wp-content folder of the problematic site and delete the .htaccess file. It is always recommended to create a backup before delete it.
The menu items don't scroll the page when I click on, what to do now?
Please check the id inside the url field of the custom link. It is also important that the mentioned field must contain the id only. If you add http:// and such,
the scrolling effect won't work. The custom item that scrolls the page should look like this:
How can I remove unused sections from the homepage?
In default there are 15 active home page sections out of 18. Obviously you don't use all of them, so you will need to deactivate some.
You can do that on the "Theme settings --> Homepage" section. Select "nothing" for the section you want to hide.
It is also possible to change the sequence of two or more sections. The order of the sections isn't strict at all.
How can I change the order of the screenshots / features / services / testimonials etc. ?
As we know the wordpress is blog engine in default case. The mentioned content types are powered by custom post types and the Worldpress
handles their items as blog posts. WP always shows the latest post first, so you can change the order by changing the post dates of the
selected elements. If you find this way uncomfortable, feel free to try out the
Post Type Order plugin. It works well for me.
The ajax driven elements ( testimonial and sevice item ) don't load into the homepage properly.
Change the permalinks to default. In fact the ajax loaded elements should well with all of the available permalinks,
but some servers don't support ajax calls with permalinks other than default.
The Contact form doesn't work. What am I suppose to do?
Emailing is one of the most complicated part of webdevelopment. There are several things that may cause the misfunction of the contact
form. Fortunately the theme contains two alternative solutions in order to avoid problems with the contact form.
1) If you can't receive emails, go to the "Theme settings --> Contact form" page and check the "Disable PhpMailer" option. Click "Save Changes" , refresh your site and try out the form. Note: the PhpMailer is the script behind the contact form. It is a widely used and very reliable mail sending php class, but some servers don't support it. If you select the mentioned option, the theme will use the wp_mail() function instead of the PhpMailer.
2) The theme is compatible with the Contact Form 7 plugin. It is the most popular and most reliable contact form plugin. Install the plugin, create a form ( or use the form that the plugin offers in default ) and paste its shortcode into the "ContactForm 7 shortcode" field on the "Theme settings --> Contact form" page then save the settings. Now the new form should appear on the contact section.
3) If none of the alternatives above work, try to install the Easy WP SMTP plugin.. This plugin allows you to configure and send all outgoing emails via a SMTP server. This is very helpful, because there are lot of hosting companies that doesn't support mail() function on their server.
The form works, but I receive the messages into the spam folder.
In this case you can try the solution 3) of the previous question, or simply allow emails from the address that
sends the contact form messages.
How can I add capthca to the contact form?
Unfortunately the default form of the theme doesn't allow captcha, you will need to install the Contactform7 plugin. Please view this and this video to learn how to install and configure the mentioned extension. Once it got installed please check official tutorial on how to use captcha. That page was written by the author of the plugin, so that is the most compheresive help I can give you in this case.
UPDATE THE THEME
How to get the latest version: Updates are free and it is easy to get the latest versions. You need to log in to your Themeforest account, go to the "Downloads" page
and download the theme again. You can download the installer file separately, but I recommend to download the entire package, because
the documentation and other files may change too.
Installation: You don't have to delete the previous version of the theme to install the latest one, because each version has its own folder ( flatapp, flatapp_v11 etc. ) within the wp-content/themes directory.
Menu locations: The wordpress will handle the new version as a different theme, so you have to select again your menu for the relevant theme location.
I modified my theme. Will I lose all of the mods? No, the new installation won't overwrite or delete your previuos developement, but your modifications won't be inherited. As you can read above, this version has its own directory, so it won't use your modified files at all.
JQuery by John Rising - http://jquery.com/
JQuery easing - http://gsgd.co.uk/sandbox/jquery/easing/
FlexSlider by Muffin - http://flex.madebymufffin.com/
tipTip by Drew Wilson - http://code.drewwilson.com/entry/tiptip-jquery-plugin
Backstretch by Scott Robbin - http://srobbin.com/jquery-plugins/backstretch/
SwipeBox by Constantin Saguin - http://brutaldesign.github.io/swipebox/
YTPlayer by Matteo Bicocchi - http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/
Iconsweets2 by YummyGumm - http://iconsweets2.com/