This is the theme documentation file. Please search this before submitting a support request. Note that we do not support theme customizations beyond it's original functionality and appearance.
Live Theme Preview View On ThemeForestCurrent version: 3.1.0
This version of FlatBook is the result of a long lasting development period. It includes a new theme structure and features many new customizing options and style settings (based on a different framework than the previous versions) to stay up to date with the latest WordPress development standards. If you are using an older version of FlatBook (before v3.0), when you update the theme you will have to setup your website again.
In this section you can learn more about getting started with your WordPress project using FlatBook theme. If you don't have much experience with WordPress, it is highly recommended to follow the steps in this section carefully as it comes in order, to setup your starter website and demo content successfully. So let's begin!
To use FlatBook WordPress theme correctly, you must be running:
Your demo content install may fails and similar issues occur if you have a low PHP configuration limit settings. You can either increase these limits on your own, or contact your web host and ask to have the limits increased to the following minimums:
After you downloaded the theme package from ThemeForest, unzip the FlatBook Package folder and open it. Inside the package, you will find the following files and folders:
Assumed that you have your WordPress installed and ready to go, you have two ways to install the theme:
Note: When uploading the theme, please make sure that you choose flatbook.zip file, not entire package you downloaded from ThemeForest. If you upload the wrong file, you will get an error saying “missing style.css”
When the theme is successfully installed and activated, you will see a notice message at the top of your dashboard screen, asking to install the required plugins** **of the theme.
Click the Begin Install Plugins link and follow the upcoming instructions until the required plugins of the theme become successfully installed and activated. If you did everything correctly, the message disappears.
If you need your theme to look exactly the same as in the live theme demo, you will need to import the demo contents and settings. For WordPress newbies, it is highly recommended to import the demo content, it makes the customization process much more easier. It can be good starting ground when starting to customize your site.
Follow the steps below to import demo content:
Finally, there are a few settings came with the WordPress installion by default, what needs to be changed before you can start customizing your website.
Congrats! For now, all contents has been successfully imported, you are ready to customize!
FlatBook comes with a live theme customizer with more than 100+ customizing options included, what gives you the ability to modify the layout, typography, colors and many other settings instantly - without need to refresh the page - what makes the theme customization process quick and easy.
To open the Live Theme Customizer, go to Appearance » Customize
The General panel groups the most common settings of the site.
Set the site basics in this setting panel.
Choose what to display as the homepage of your site.
If you set A static page, you can choose the Homepage and the Posts page from your pages.
Here you can add your social networks, as many as you like, and reorder / delete if not needed. You can display the social icons in the right side of the navbar or the copyright footer, later we will discuss this. Click on Add social network button, choose a network and enter the link.
In this section you can modify the page preloader animation effect.
Note: if you don't upload an image, the default "404" heading will show up at the top of the page.
In the navbar panel, you can customize everything related to the top navigation bar.
In this panel you will find settings related to the headers of the site.
In this panel you find settings related to the footer of the site.
Set the default colors of the theme in this panel.
In this settings panel you will find options related to the site blog.
FlatBook has 1 nav menu location called Primary Menu at the top of the pages. In the Menus section you can create, edit and manage the menu items of the navbar. You can use three different menu item types, each for different purpose.
If you don't have the demo menu coming from the import, you have to create it:
Click on the Add Items button and select items from the Pages box to create menu items linking to other pages. To create a page menu link, just click on the page name you would like to add.
FlatBook supports dropdown menus until one level depth. It's useful to organize your nav menu links below each other to look clean. To create dropdown menu link, drag the sub item below the parent
Use the Custom Links box from the left sidebar when you are creating onepage menu links, pointing at one of the content sections on the same page. To create a onepage menu link, follow these steps:
book-features
#book-features
You can create menu items for Posts, Categories and Tags same as you create a page menu link.
FlatBook has two widget areas, you can add 14 kind of custom widgets into it. To add a widget to one of the areas, go to Appearance » Customize » Widgets, select a widget area and click on Add a Widget button.
This widget area is placed in the footer above the copyright bar. It's not recommended to add more than 4 widgets, as each one represents a column in the footer.
This widget area is located in the sidebar of the Blog (posts page) and the Single Post page.
Note: you can only see the Blog Sidebar within the widget areas, if you are viewing the Blog or the Single Post page in the customizer.
FlatBook has powerful blog features with 6 Posts Page and 2 Single Post page layouts, and many blog and single post page related options in the Blog section of the Theme Customizer.
If you haven't imported the demo content, you will need to create your blog page first:
There are 3 kind of layouts for the Blog (posts page).
You can set the layout at Appearance » Customize » Blog » Archives in Blog archive layout option:
To create a new blog post, follow the steps below:
FlatBook have currently 2 kind of blog post format.
This is the default blog post. If you would like to have this one, just leave everything as it is, and add your content.
This post format features represents a cool image carousel at the top (instead of featured image). To use gallery post format for one of your posts, you have to change the Post Format option to Gallery at the Status & visibility section of the right sidebar. Then, you can add / reorder / remove the images in the Gallery section of the right sidebar.
If you set a featured image for this type of post, it will show up as a thumbnail of the post in footer or sidebar widget.
FlatBook uses Elementor for building pages, which is the #1 web creation platform for WordPress. If you're just getting started with Elementor, it's h recommended for you go through their getting started documentation.
Important notes on Elementor Page Builder:
Follow these easy instructions to create a new page:
FlatBook does not have custom page templates, but you can use the default page templates of Elementor:
There are several customizing option for the global header of pages.
To edit it, go to Appearance » Customize » Header » Page Header setting.
There are several ways to edit a page with Elementor. You can create your own content from scratch, however it is recommended for beginners to copy an existing element coming from the imported demo content, and customize it.
For the most easy usuage, you should enable editing handles.
To edit an element, just click on it and customize the upcoming settings in the left sidebar and click on the Update button to save the modification.
To create a copy of an element, hover over the edit icon in the top right, and hit the upcoming Duplicate icon (or just right click on the element and choose Duplicate).
Note: This method can be used with Elementor elements, columns, sections... basically everything.
The theme comes with 4 custom Elementor widgets, bundled in the flatbook-elementor-widgets plugin. You can look for them typing the "flatbook" keyword in to the widgets search field, while you are in the Elementor editor.
This widget adds a section with a tablet which previews your sample contents added in tabs:
This widget adds a section with the most recent posts displayed in 2-4 columns:
This widget adds a heading title with custom word highlighting options:
This widget adds an image box with a lightbox, where you can add your sample chapter overview content:
In this section you can follow our best practices using FlatBook theme.
The theme features a MailChimp newsletter signup form located in the subscribe footer bar. To get it work, you need to get your custom MailChimp URL, here is how to do that:
<form> tagaction="..." attribute, between the parenthenses
The theme features a basic contact form on the Contact page in the demo content. To make it work, you will need to modify the recipient email address of each form you have. See an example:
You can read more about the additional settings of Contact Form 7 in the official plugin documentation.
To setup a PayPal button for your pricing section, follow these steps:
To add icons before navigation menu items, follow these steps:
airplay)As you may know, a child theme is a theme that inherits the functionality and styling of the parent theme. Using child themes are a popular way of modifying the source code of an existing theme without risks.
If you already have some experience with WordPress - and decided to use FlatBook with a child theme - feel
free to install the flatbook-child.zip archive from the /Theme folder of the main
package, you downloaded from ThemeForest.
Note: If you would like to use the latest 3.1 update, and you are using an older version of FlatBook (before v3.0), when you update the theme you will have to create your website again.
If you already have a website created with an older version of FlatBook (< 3.0) and want to use the current version, you will have to create your content again. It's really important to create a safety backup of your existing website and database before doing anything, so if something may went wrong while recreating your contents, you can easily set everything back to the default state. For this purpose, you can use one of the free backup plugins from the WordPress plugin directory, like All-in-One WP Migration than install the new theme files.
There are two ways of updating the theme to the latest version, you can learn more about them below.
flatbook.zipThe theme is completely translation ready, to translate it to your own language, you will need a .po editor
software like Poedit. Here is how you can do it:
default.pot file from the /flatbook/languages/ folderxx_XX.po where 'xx' is the localization code of your language (eg. fr_FR is french)The main stylesheet of the theme is called flatbook.css located in the /assets/css/
folder. To catch up with the latest coding standards, FlatBook was written in Sass markup language. If you wish to modify the source .scss files and compile the main theme stylesheet again, feel free to watch the source files, located in the /assets/scss/ folder.
It is highly adviced to use the Online Autoprefixer tool on the css file, after you done working with it.
FlatBook is integrated with Uniicons which has 4500+ free vector icons. If you would like to use a custom icon anywhere around the theme, you can just copy the code from the linked website and paste it in the code of the desired part.
For example, it is used in the "Contact Details" part of the Footer Widgets: <i class="uil uil-airplay"></i>
Below you can see the third-party assets used in the theme.
Greatful thanks to Ryan McGuire from GratisoGraphy, for letting me to bundle his cool images with the theme!