It’s awesome to know that you decided to purchase Brook. No doubts, you will join our happy customers community in seconds! You won’t make any mistake here, because our detailed documentation will guide you. Please be sure to check it out before getting started. We have outlined all kinds of necessary information and keep them easy-to-read-and-follow. Our theme is based on WordPress platform, so we assume that you have already WordPress installed and ready to go.
To use Brook, you must be running WordPress 4.4 or higher, PHP 5.6 or higher, and MySQL 5 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.
Hosting is more secure when PHP applications, like WordPress, are running using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using PHP. Just ask your potential host if they run PHP or something similar.
Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:
You can verify your PHP configuration limits in the System tab in the Backend-mainpage. Take a look in the left sidebar for Brook back end > Insight Core > system.
Your mission is make those 4 sections turn from yellow to green.
Tips For This Part :
How to choose PHP version and enable PHP extension?
Step 1: Come CPanel find select PHP version
Step 2: Choose version 5.6 and enable XML reader extension
Step 3: Save the file
To install Brook – your powerful WordPress theme, you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information:
When you purchase Brook from ThemeForest, you need to download the Brook files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find Brook.
Click Downloads to see these two options.
All of ThemeMove’s items come with 6 months of included support and free lifetime updates for your Theme. Once the 6 months of included support is up, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit bug reports via email or item comments and still have access to our online documentation knowledge base and video tutorials.
Envato clarifies item support policy here.
We have an advanced, secure ticket system to handle your requests. Support is limited to questions regarding the theme’s features or issues that are related the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customization of your theme, we suggest enlisting the help of a developer.
How To Start Receiving Support
Step 1: Click Here to create an account. You will need your accession which can only be received after buying the theme from Themeforest.net.
Step 2: Once you are signed up, you need to sign into our support center with your new account.
Step 3: Follow these steps before you submit a support ticket.
Step 4: To create a new ticket, hit New.
See how to take your purchase code:
Hit Download then choose License Certificate & Purchase Code.
To help speed along your request, we require that you follow the steps below before posting a ticket in the Help Desk.
Step 1: Please take a moment to search the Basic Troubleshooting Issues, as the answer to your question is likely already in here - nearly 80 % of all tickets opened are due to the issues described in this guide.
Step 2: If your question or issue has not been brought up, then please open a ticket with the following information:
Please note that in most case the support staff cannot do much without this information. So to avoid unnecessary delays please provide the information above.
Also please deactivate all the plugins that don't come with the theme, this will allow us to rule out any third party plugins conflict. We don't deactivate the plugins on a client's site, because sometimes this may cause unforeseen issues.
Step 1: Navigate to Appearance > Themes
Step 2: Click Add New, then click Upload Theme > Choose File
Step 3: Navigate to the .zip file on your computer, then click Install Now
After activating, you should be redirected to the themes page with TM Brook activated:
Step 1: Unzip zip file package – the zip package is inside Brook files folder you have downloaded from ThemeForest.
Step 2: Connect to your FTP server and navigate to the folder where your WordPress is installed.
Step 3:Go to wp-content/themes/ and upload theme folder (the path will look like this: wp-content/themes/tm-brook)
Step 4: Open WordPress admin panel (navigate through the web-browser to the folder where you have installed the WordPress e.g www.yourdomain.com/wp-admin/) and go Appearance > Themes on admin sidebar. Activate Brook.
IMPORTANT! After theme installation, at the top, you have a box with information about required and optional plugins. To install them and activate, please navigate to Appearance > Install Plugins section, and install only necessary plugins.
After activating Brook, you will see this notice:
Click Begin installing plugins. You will be navigated to Install Required Plugins page.
Simply check all of them (or all of required plugins and some recommended plugins you like) and from the drop down select Install, then hit Apply.
When finishing, it should look like this:
Required plugins: Insight Core, Visual Composer, Revolution Slider
Recommended plugins: Visual Composer Clipboard, Essential Grid, WooCommerce, Contact Form 7, MailChimp for WordPress, WP-PostViews
Insight Core is a required plugin for all Thememove themes. It manages manyimportant tasks including plugin installation, demo data import, update notification. Users will also find information of documentation and support link there.
An amazing eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.
Visual Composer for WordPress is drag and drop front-end and back-end 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. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.
Slider Revolution is an innovative, responsive WordPress Slider Plugin that displays your content in a beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, the visual, drag & drop editor will let you tell your own stories easily.
Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, Captcha, Akismet spam filtering and so on.
Allows you to copy/cut and paste single content elements or stack of content elements across pages without ever leaving WPBakery Page Builder ( Back end) interface!
An extension of WooCommerce plugin that allows your users to compare some products of your shop. You can quickly access to the compare table, rearrange the compare products with drag/drop.
WooCommerce Smart Wishlist is a simple but powerful tool that can help your customer save products for buy later.
Our demo data import lets you have the whole data package in minutes, delivering all kinds of essential things quickly and simply. All you need to do is to navigate to Insight Core > Import. Hit Import this demo.
Have a cup of coffee. The process is within minutes.
When finishing, it should look like this:
Go to Setting > Reading > Front page displays and choose the page you like to be your front page then hit Save changes.
Common Installation Issues:
1. It Is Always Recommended To Backup Your Current Setup
We recommend you have a current backup of your site. Simply go to Theme Options >> Import / Export and export your backup.
2. Do Not Keep Older Copies of The Theme In WP Theme Folder
You should completely remove all previous theme folders before adding the new updated theme folder. Don't just rename the theme folder. If you rename your theme folder when you update, then the path will be no longer valid. Because WordPress stores menus and widget settings and some other settings by folder path, you will need to rename your theme folder back to what it was before, then your settings, menus, widgets will be restored. So the total renaming process has no meaning.
3. Reset Browser Cache, Server Cache And Plugin Cache
It is always recommended to reset your browser, plugin, and server cache when you update. Visual issues may happen and more often than not, its caused by caches, and they need to be emptied. Each browser allows you to remove cookies, history and other data. If your theme or ThemeMove Core version is not updated after uploading the new files, it is due to a server-side caching system. Some hosting providers have server-side cache systems installed to optimize the speed of content delivery, please clear any server-side cache or ask your host to do it. This is also true for google pagespeed setups or cloudflare setups.
4. Update Child Theme
If you have copied template files from parent theme to child theme, please make sure to revert to parent theme first to confirm if the issue exists there too. If it doesn’t, please update the templates copied to child theme with the parent theme.
5. Required & Recommended Plugins Must Be Updated
When you update the theme, you will see a notification message in your admin telling you the required and recommended plugins need to be updated. Follow the onscreen prompts to install the plugin updates. We have listed some required plugins and they have to be installed and activated for theme features to work. Make sure you are always using the most recent version of these plugins. You will be prompted to install it upon installing or updating your theme. If you dismiss the prompt or do not see it, then you can go to Plugins >> Installed Plugins >> Update Available (if have) and update the plugins there.
Firstly, you need to download the new theme package from your Themeforest account. Once you have the new theme package, you can choose to upload the theme via WordPress or via FTP.
1. Update theme via FTP
Step 1: If you have downloaded Installable WordPress file only, please unzip the tm-Brook.zip file. If you have downloaded the All file and documentation package, please unzip the tm-Brook.zip file and then unzip the secondary tm-Brook.zip file which will give a tm-Brook folder.
Step 2: Connect to your FTP.
Step 3: Upload the extracted tm-Brook folder to: wp-content/themes/. Just replace existing files and folders.
Step 4: Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated.
2. Update theme via WordPress
Step 1: You need to deactivate the current Brook theme in Appearance > Themes section by simply activating a different theme. Once you activate a different theme, you can delete the Brook.
Step 2: Retrieve the tm-Brook.zip file from your new Themeforest download. If you download All files & documentation, then you need to unzip the archive file you received, the tm-Brook.zip file will be inside of it.
Step 3: Then simply upload and activate the tm-Brook.zip file in the Appearance > Themes section like you've done when installing theme.
3. Update theme using Plugin
Step 1: Navigate to Insight Core > WelcomeWelcome
Step 2: Fill your Purchase code and click Submit. Your site is automatically updated.
You can adjust WordPress settings as follows:
Step 1: You can set Site Title, Tagline in Settings > General.
Step 2: You can set Blog pages show at most, Front Page displays in Settings > Reading.
Step 3: You can set Discussion settings in Settings > Discussion.
Step 4: You can set Image sizes in Settings > Media.
We used the following sizes on our demo sites:
Thumbnail size: 150 x 150
Medium size: 300 x 300
Large size: 1024 x 1024
Step 5: You should ensure that a non-default permalink setting is selected, e.g. Day and name in Settings > Permalinks.
Brook comes with advanced settings panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the sizable amount of options Brook provides, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. Go to Appearance Customize on admin sidebar to access the setting options. See below for screenshot of our Customize panel.
Step 1: Navigate to Pages in your admin sidebar and click Add New option.
Step 2: Enter a new name for your page, then find the Page Attributes box on right side to set your Parent or Template page.
Step 1: Choose Backend Editor or Frontend Editor to edit your page. Backend Editor gives you the backend interface while Frontend Editor gives you the user interface. Visual Composer works with both.
Step 2: Choose Add Element to start adding our premade elements to your new page.
Step 3: Choose elements you want to add to your new page in the element box and start editing them.
Explore more about Visual Composer here.
Step 1: Go to Pages > All Pages. Then point at the page you want to edit. You will see the Quick Edit option.
Step 2: Edit the title as you want. Delete the current slug. Then hit Update. It will automatically generate new slug for your page.
You can also edit some other options such as parent, template, status... If you want to edit more options, hit Edit instead of Quick Edit.
Brook provides a few Templates which support for specific needs of user. For example; you want a page without Header and Footer you can choose Blank Page. What you need to do it select it in Page section of WordPress admin.
Blank Page: This is the Blank page template, when you use this, the header and footer will be removed.
Coming Soon 01: Use pre-made coming soon template
Maintenance: Use pre-made maintenance template
One Page Scroll: Create beautiful full screen scrolling page
Step 1: Create a new page or edit an existing one.
Step 2: On the right side of the page, you'll find the Page Attributes box.
Step 3: Under the Template option, choose your desired Page Template from the dropdown field. To learn more about what each page template is for, please refer to the section above.
Step 4: Once finished, click Save Draft or Publish.
To customize Coming Soon 01, Coming Soon 02, and Maintenance navigate to Appearance >> Customize>> Maintenance.
Select the Page Template and change the sections follow your demand.
One-page site is a smart function that let the user show all of your site’s information into one page which split into multiple sections. If you want to know how One page Site works please take a look in Landing product demo Here.
Step 1: Create a new page or edit an existing one.
Step 2: Change to Classic Mode by clicking in Backend Editor
Step 3: Click Add Element >> Choose Row
Step 3: Click Edit this Row
You now see a table like this
Choose the type of Row Stretch you want and keep rolling down
Step 4: Name the Row ID and click Save Change >> Publish or Update
Step 5: Come to Appearance >> Menus >> Create a new menu
Step 6: Find Custom Links in the left column
Step 7: Fill URL section by delete http:// and replace by #your row ID in step 4 >> Click Save Menu
Step 8: Back to the page you established and roll down to Page Option >> Header
Step 9: Change Primary Menu to the menu you create in step 5 and Enable One Page Menu
Step 10: Click Update to finish
Step 1: Page >> Add New
Step 2: Change from Backend Editor >> Classic Mode
Step 3: Find the Page Attributes box on right side to set your template to One Page Scroll
Step 4: Choose Add Element >> Row
Step 5: Click “ +” button to add element such as Revolution Slider 5, Portfolio feature
Step 6: Hit Row Setting
Step 7: In Row Stretch choose Stretch row and content (no paddings)
Step 8: Scroll down to Height section choose Full Height Calculated.
Step 9: Come to One Page sheet. You can choose the skin of pagination, and logo.
Step 10: Hit Save Changes button. And Publish the page.
Besides, you can change the Navigation Display and Scroll Effect in Page Option box below.
Step 1: Navigate to Appearance from your admin dashboard then click Customize
Step 2: Find Header > General
Step 3: Choose the Header style you want in Global Header section. There are 16 different header styles for you to select from.
Now the chosen header style is set to be the default header of all pages. However, you can still a different header style for particular pages, blogs, products or portfolios by setting a style in each section.
Note: If you have imported the demo, the header of the landing page is fixed in page settings (we will discuss this later on in the Page section). Therefore, if you want to try setting up the default header style, you would have to create a new page.
Step 4: Click on Publish button to finish.
Step 1: Navigate to Appearance from your admin dashboard then click Customize. Next, hit Header. You can see a list of available header styles.
Step 2: Double click on the header style you want to customize.
Step 3: Set the configurations listed on the left sidebar.
Note: If you have imported the demo, you will not be able to see the changes you made because the page already had a fixed header style. For your convenience, refer to the following list to find the corresponding header style of each page.
'Header style 01' =>"Grid Blog"
'Header style 02' =>"Grid Classic"
'Header style 03' =>"Business"
'Header style 04' =>"Masonry Gallery"
'Header style 05' =>"Shop"
'Header style 06' =>"Freelancer"
'Header style 07' =>"Minimal Portfolio"
'Header style 08' =>"Creative Portfolio"
'Header style 09' =>"Indie Musician"
'Header style 10' =>"Portfolio Fullscreen Slider - Left Vertical Header"
'Header style 11' =>"Product Landing"
'Header style 12' =>"Minimal Metro Grid"
'Header style 13' =>"Onepage"
'Header style 14' =>"Architecture"
'Header style 15' =>"Portfolio Fullscreen Type Hover 02"
'Header style 16' =>"Landing Page"
Step 4: After customizing, do not forget to click Publish button to save your changes.
List of 20 Header styles:
A sticky header has its position fixed at the top of your webpage even when users scroll down to navigate the page. This allows users to quickly access the menu from any section of the page.
All you need is to hit Header Sticky then Header section.
Now you can enable or disable the Sticky Header.
In addition, you can also customize the height, padding top, padding bottom, color background, etc. of the Sticky Header.
Step 1: Similarly, first, you need to go to Appearance from your admin dashboard then click Customize.
Step 2: Then hit Top Bar > General
You can see there is only one of Top Bar. You can customize them by clicking on Top Bar button or Hire button.
Step 3: Don’t forget to hit Publish before moving on.
How to customize the Top Bar Style?
Step 1: Navigate to Appearance >> Customize >> Top Bar
Step 2: Choose the Top Bar style that you want to customize.
Step 3: Make all the necessary changes then hit Publish button to save your settings.
There are 5 Page Title Bar style for you to select from.
Step 1: Navigate to Appearance >> Customize >> Page Title Bar
Step 2: Choose General .
Now choose which Page Title Bar Style you want.
Step 3: Click on Publish button to finish.
For example: Search Heading
This is how the text you enter in this section will display on the search result page.
Similarly, you can also choose a different Page Title Bar style for particular pages, blog pages, product pages and portfolio pages.
Note: If you have imported the demo, you won’t be able to customize the Page Title Bar in the landing page. Please create a new page if you would like to try to set a default page tittle bar style.
Step 1: Navigate to Appearance from your admin dashboard then click Customize. Next, hit Page Title Bar. You can see a list of available Page Title Bar styles.
Step 2: Double click on the Page Title Bar style you want to customize.
Step 3: Customize each section of this style. You can change its color, background, padding, font, etc.
Step 4: Hit Publish button to save the changes.
List of 5 Page Title Bar
Step 1: Navigate to Apperance > Menus in your admin sidebar and click Create a new menu option.
Step 2: Give your menu a name, then hit Create Menu.
Step 3: Choose menu items you want to add from the left and hit Add to Menu.
Then hit Save Menu .
Your new menu has been created:
Step 1: Go to Appearance > Menus on admin sidebar. From dropdown list, select a menu to edit then hit Select.
Step 2: Rename menu name as you wish. If you want to add more menu items, choose them from the left and hit Add to menu.
With each menu item, you can rename or drag to make it sub-menu.
Remember to hit Save Menu when you finish editing.
Step 1: Navigate to Mega Menu from the admin dashboard >> Add New Menu
Step 2: Give your menu a name
Step 3: Click Backend Editor button.
Step 4: Hit Add Element >> Find Row
Step 5: Choose the type of mega menu to be displayed by clicking on the second option of the top left section.
Step 6: Click “+” button to choose the element you need.
Here we have 5 tabs: Content, Structure, By Brook, WordPress Widgets, and Deprecated.
To create a Mega Menu like shown in the demo, choose By Brook >> Widget Better Custom Menu.
Fill in all fields of the Widget Better Custom Menu settings as belows:
Widget title: Name the title
Style: Choose a menu style
Menu: Choose the menu you have created in Menus
Extra Class name: (optional)
Remember to hit Save Changes.
Step 7: Click Publish to apply the settings.
To add a new mega menu to your site, navigate to Appearance >> Menus then choose among available menus for a suitable place for your new mega menu:
After successfully creating your mega menu, you’ll need to add it to the Menus.
Step 8: Navigate to Appearance >>Menus
Step 9: Click on Select a menu to edit then choose the menu you want to add into the mega menu.
Step 10: Find the Mega Menus section.
Step 11:Mark the menu you want to show then hit “Add to Menu”. You can drag then drop them to make them follow your desired order of display. Remember to hit Save Menu to save all of your changes.
Note: You cannot add more than 1 mega menu in the parent menu section.
Step 1: Navigate to Slider Revolution > New Slider.
Step 2: Enter a Slider Name (1) and Slider Alias (2), and click Save Settings.
Step 3: You'll now be redirected to the plugin's main admin page where you'll see your new slider listed.
Hover to your new slider, a pen which means "Edit" will appear. Choose that to start building your slider.
Step 1: Go to Slider Revolution and hit the slider you want to edit.
Step 2: Choose Main/Background Image if you want to change it, then hit Media Library or Object Library depending on where you want to get your image.
Navigate to other tabs: General Settings, Thumbnail, Slide Animation, Link and Seo, Slide Info, Nav. Overwrite to customize. You just have to follow those comprehensive instructions.
To setting the Slider, please read more in Revolution Documentation.
There are 2 ways for you to add Slider in Page
Way 1: Create a new page >> WP Bakery Page Builder >> Plus button >> Choose Revolution Slider 5.
Way 2: Find Sliders section in Page Options box.
Revolution Slider: Choose the available slider you want.
Slider Position: There are 2 positions: Above Header and Below Header.
Step 1: Navigate to Footer >> Add new
Step 2: Name the Footer style and change it from Backend Editor to Classic Mode
Step 3: Click to Add Element and find the element you want to appear in Footer.
Step 4: You can change the Effect and Styling in Footer Options box.
Note: There are 2 Footer effect; Normal and Parallax. Parallax is the effect that help footer rolls from below.
Step 5: Do not forget to Publish it.
Step 1: Appearance >> Customize >> Footer
Step 2: Choose the Footer style you want.
Note: If you have imported the demo, you will not be able to see the changes you made because the page already had a fixed footer style. Please choose a random page for example: Blog page to test it.
Step 3: Click Publish to save the change.
Note: In the case you choose specific Footer style in the Page Option then it will be prior.
Step 1: Navigate to Insight Core> Sidebars
Step 2: Hit Add New Sidebar button.
Step 3: Name the Sidebar
Step 4: Hit agin to Add Sidebar
Step 1: Appearance >> Widgets. You can see all of the Sidebar here.
Step 2: Choose the Widgets you want and drag it to the Sidebar you want or click on it to choose the Sidebar.
In the case you want to delete its settings, drag it back.
Step 1: Appearance >> Customize >>Sidebar
Step 2: Choose the Sidebar you need for each type of page.
Sidebar 2 can only be used if sidebar 1 is selected.
Sidebar position option will control the position of Sidebar 1. If Sidebar 2 is selected, it will display on the opposite side.
Step 3: Hit Publish to save the setting.
For individual page, you can choose the Sidebar in Page Option box.
Step 1: Navigate to Post > Add New in your WordPress admin sidebar.
Step 2: Create a title, and insert your post content in the editing field.
Step 3: For setting the type of your post, just choose from the Format field on the right sidebar.
Step 4: Add Categories from the right side. Categories is meta information you create for the post. Each category is a meta link that your viewer can click to view similar type of posts. To assign it to the post, check the box next to the Category name. You can also access and edit Categories from the Post sidebar item in your WordPress admin sidebar.
Step 5: Add Tags from the right side. Tags is meta information you create for the post. Each tag is a link that your viewer can click to view similar type of posts. Type the name of the tag in the field, separate multiple tags with commas. You can also access and edit Tags from the Post sidebar item in your WordPress admin sidebar.
Step 6: For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.
Step 7: Once you are finished, click Publish to save the post.
Here is the screenshot that shows the various areas of the blog post page:
Step 1: Post >> Categories
Step 2: Name the category and fill to other section below.
Step 3: Hit Add New Category . Your new Category will aprear in the table of all category immediately.
Similar to Category, you can create a new Tag in the same way.
Step 1: Come to Page >> Add New
Step 2: Name the Page and change from Backend Editor to Classic Mode.
Step 3: Choose Blog element.
Step 4: Fill all the options in Blog Settings table, especially choose the Blog Style you want.
Step 5: Hit Save Changes to finish.
Step 6: Customize Page Options in WPBakery Page Builder.
Step 7: Hit Publish to save your page.
In this section, you’ll learn to set up an online store with WooCommerce plugin
Step 1: Be sure that you’ve installed WooCommerce. Check the plugin section
If you haven’t install or activate WooCommerce, get back to Plugin Installation section.
Step 2: Configure general settings for your WooCommerce store such as currency, tax, checkout, shipping, etc. by navigating to WooCommerce > Settings
Step 3: To create new order: Hit Orders > Add Order.
Step 4: To create new Coupon: Hit Coupons >> Add Coupon.
For more settings of WooCommerce, click here.
Navigate to Appearance > Customize > Shop. Here you will see three tabs: Shop Archive, Product Single, Cart page.
When you install Brook, you may encounter some problems. Check for clarifications here.
First, you need to go to Appearance > Customize > Site. These are parts that have color options: Main Color, Link Color...
Hit Apperance > Customize > Site Indentity.
Edit the site title and hit Save and Publish.
Hit Appearance > Customize > Logo. Here you can set your default and mobile logo.