FlatBook WP Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Author: ErikTailor
Contact: erno22szabo@gmail.com
Current Version: 1.3.1
Documentation Version 1.3.1
Created: 2013-11-01
Modified: 2014-09-13

×I assume you have your own wordpress installion, so let's get started!


You can install the theme in two ways:

  1. FTP Upload: Unzip the “flatbook-theme.zip” file and upload the contents to the /wp-content/themes folder on your server.
  2. Wordpress Upload: Navigate to Appearance > Install Themes > Upload. Select the zipped theme folder. Hit Install Now and the theme will be uploaded and installed.

When your theme has been installed successfully, hit Activate to get it work.

Activate Plugins

At the top of your dashboard now you see a large notice to activate FlatBook theme's required plugins.

Hit Begin Install and when it is successfully installed, navigate to Plugins > Installed Plugins and activate the newly installed FlatBook Custom Posts plugin.

Import Demo Content

If you would like to have the same content like in FlatBook's live preview, you need to import demo content. To do that, follow the steps below:

1.) Navigate to Tools > Import > Wordpress, and install the wordpress importer.

2.) When it's ready, browset Extras/Import/flatbook-demo-content.xml from the main theme folder and hit Upload file and import

3.) Check the Download and import file attachments checkbox and hit Submit

4.) Now it's imported successfully, head to Appearance > Menus and choose "FlatBook Menu" from the dropdown menu and hit Select

5.) Make sure that the Top primary menu checkbox is checked, and click Save Menu

5.) Go to Appearance > Options Backup and copy-paste the content of flatbook-theme-options.txt from the Extras/Import folder within the main downloaded folder, and hit Import Theme Options

6.) Finally head to Settings > Reading and set "Home" for your front page, and "Blog" for your posts page than hit Save Changes

×For now, if you refresh your site it should look like exactly as in the live theme demo but with placeholder images of course. Now you can start customizing your kickstarter demo site, i believe it's the most easy way to achieve quick results. Happy editing!

×Navigate to Appearance > Theme Options to set a lot of cool stuff for the theme and edit parts of the main content.

Home Sections

Here you can add or remove sections from the home page, and also feel free to reorder them as you wish with drag and drop movements.

When you feel ready, click on the Save Changes button and it will be applied.

×Note: just a notice, that you are not allowed to create multiple sections from the same "Section Type", at the moment there's only a possibility to have one from each.

Section nsme reference

If you haven't imported the demo content, you'll have to create every section as a new wp page at Pages > Add New & set 'Page Template' to the section type you need.

General Options

Here you can upload your logo and favicon for your site, and set the color scheme. The Primary Color means the basic color scheme of the site, the Secondary Color is for hover effects.

Below you have the ability to choose from more than 300+ fonts for headings, provided by Google Fonts.

Finally you can select navigation style, at the moment there are 3 different options.

×For the best result it's recommended to choose a bit darker variation of the primary scheme for the secondary one.

Set Up Slider

First you need to upload a background image for the slider, go to Appearance > Theme Options > Slider and upload your desired background image with a 2000x625px optional size. Make sure that the "display slider" checkbox is checked.

To add slides, click the Add New button below Slider Options.

Create your slides using the picture above as a reference. If you don't need one of the fields, just leave it empty. You can add as many slides as you want, but it is recommended to keep under 3-4 slides to avoid longer page loading. When you are ready with your slides, click Save Changes and now you can see your slides by visiting the home page.

Note: For the best result, please upload images for slides in a 450x459px size.

Set Up Counter

Go to Appearance > Theme Options > Counter and check the Display Counters option to show the counter on the site.

Next click Add New to create new counter, and enter the title and a numeric value for it. When you are ready with your counters, click Save Changes.

Note: For the best result is optional to use 4 counters, as the theme was designed for four of them.

Set Up Includes

Add as many includes icon box as you wish and reorder them if needed with drag and drop movements.

Set Up Call To Action Bar

Go to Appearance > Theme Options > Call To Action and fill the fields with your details then click Save Changes.

For the description, you can use html tags if you switch to Text based editor.

×Note: the call to action bar is actually the bottom part of the "Samples" section with the scrollable tablet mockup, so they can't go without each other.

Set Up Testimonials

Add as many testimonials as needed, and reorder them with drag and drop if you like so.

After creating your testimonials click Save Changes

Set Up Custom Section

At Appearance > Theme Options > Custom Section you can add any html custom content what you need and feel free to use shortcodes if needed. You can upload a background image for the section or just set a color if you wish, finally hit Save Changes to apply the modifications.

Set Up Pricing

Next go to Appearance > Theme Options > Pricing and select the layout (2 tables, 3 tables, 4 tables), upload a background image for the pricing section, finally click Add New then fill the table with your details like on the reference below.

Set Up Contact

Install and activate Contact Form 7 plugin if you haven't done already. If not, check back to plugin activation

  1. Go to Appearance > Theme Options > Contact and select Basic Contact Form for the contact method.
  2. Add your text for the contact bar, and hit Save Changes
  3. Navigate to Contact > Add New and create your wished contact form. I won't dig into the details about creating a contact forms with Contact Form 7 plugin, but feel free to use my sample form from the theme demo, you will find it here: Extras/Layouts/flatbook-contact-form.txt you just need to copy paste it and done.
  4. Create a new page at Pages > Add New and set the page Template to Contact, paste your previously created form's shortcode in the page content area and finally hit Publish.

Set Up MailChimp Subscribe

  1. Go to Appearance > Theme Options > Contact and select MailChimp NewsLetter Subscribe for the contact method.
  2. Add your text for the contact bar, and enter your unique MailChimp link (see more below) and finally hit Save Changes
  3. Follow the steps below to get your MailChimp Unique Link.

×There are 3 different custom post types included with FlatBook, you can find them in the main navigation.

Video Reviews

  1. Navigate to the Video Reviews menu item and click Add New
  2. Enter a title for the video review and add a short description
  3. Enter the youtube URL for your video in the custom meta box below the content area.
  4. Click Publish to save and publish your video review.
×Note: You can add custom html or text content in the post content field, it will show up just above the video review clips


  1. Navigate to the Samples menu item and click Add New
  2. Enter a title and add content for this sample, these will show up in the tablet mockup.
  3. Click Publish to save and publish your sample.

Note: You can insert images into your samples too, just click the img button over the editor, and add your link for the previously uploaded image.

If you using an image as a content of one of the chapters and need it to fill the whole screen, add the full-sample class for the image.


  1. Navigate to the Overviews menu in the Dashboard and click Add New
  2. Enter a title and add content for this sample, then upload an image for it by clicking on Add Featured Image on the right.
  3. Add your wished contents and titles
  4. Click Publish to save and publish your overview.

Note: You can add as many as you want, but by default only the last four will be seen. If there's more than four, a show more button will come up below them to load the rest.

×Beside custom posts and sections on the home page, you can create individual pages for your contents.

Creating Pages

To create an individual page navigate to Pages > Add New and set the page Template to Page. Add the title for the page, add content for it (i will get on the available shortcodes in the next section) and click Publish to create your new page.


FlatBook has some shortcodes to make content editing easier. In the following you can see the available shortcodes with a short explanation and a code sample what you can just paste in your editor in Text view.

Columns Shortcode

FlatBook is based on the Skeleton Grid system, it has 16 columns by default. You can easily add columns to your content, just take a look at the code sample of the usuage.

It is recommended to put everything in these columns if you are editing your own content, for example an individual page.

[column width="1/2"]This is the first half column[/column]
[column width="1/2"]This is the second half column[/column]

Width options:

  • 1, full
  • 1/2, eight
  • 1/3, one-third
  • 1/4, one-fourth
  • five, six, seven etc.

Lead Shortcode

The lead shortcode is the center-aligned introduction, what can be seen under the section titles in my demo.

[lead]Lorem ipsum dolor sit amet consescetur elit adipiscin massa[/lead]

Divider Shortcode

The divider shortcode is a 1px full width solid grey divider, it can be used for separating different content sections.


Titles Shortcode

You can define titles for your content from a variety of h1-h6 tags. You can see the theme demo's Shortcodes section for reference of the headlines layout.

[title type="h2"]This is a h2 headline[/title]

Type Options:

  • h1, h2, h3, h4, h5, h6

Button Shortcode

You can easily add buttons with this shortcode, just set the size, color, and URL for the button.

If you leave every settings blank (except the src of course), by default the button is medium sized, and colored.

[button size="large" color="light" src="http://www.link.com"]Click Me[/button]

Button Options:

  • Size: small, medium, large
  • Color: colored, light, dark
  • Src: your url

Happy editing!

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.