WordPress & Basic Setup

Installing WordPress

WordPress is well-known for its ease of installation. Under most circumstances installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. However, if you wish to install WordPress yourself, here is the official documentation on it:

5 Minute Installation Guide

Theme Package Contents

Once you download the theme-package from ThemeForest, extract it. It contains:

brook.zip
Main Theme! This .zip is installed in WordPress.
brook-child.zip
Pre-created child theme for Brook.
brook-documentation.zip
Docs you are reading right now.
brook-demo-content.zip
Contains .xml file with Demo Content.

Theme Installation

You can install the theme in two ways: through Wordpress, or via FTP. If you have trouble installing the theme via Wordpress (this can happen on some specific webhost setups), please proceed with installing it via FTP and you will be able to get around the issue.

Theme Installation via WordPress Admin Panel

  1. Navigate to Appearance > Themes.
  2. Click Add New and hit the Upload button.
  3. Navigate to find the "brook.zip" file on your computer and click "Install Now" button.
  4. The theme will be uploaded and installed.
  5. Go to Appearance > Themes and activate the installed theme.

Theme Installation via FTP

  1. Log into your hosting space via an FTP software.
  2. Unzip the brook.zip file and only use the extracted brook theme folder.
  3. Upload the extracted brook theme folder into
    wp-content > themes in your WordPress installation.
  4. Go to Appearance > Themes and activate the installed theme.

Child Theme

It's highly advised to install and use a child-theme.

Child-theme extends the main-theme with custom settings or code.
If you wish to customize or make changes to Brook, child-theme will keep your changes safe when you update the main theme.
In pretty much all the cases, it is the best idea to immediately upon installation of Brook main-theme, you install and active brook-child theme.

Brook Package contains a pre-created child theme - brook-child.zip. Use it!
You must install the main-theme first, and then child-theme.

You should never update child-theme, it’s your custom code. Update only the main-theme.

If you wish, you can learn more about child themes.

Regenerating Thumbnails

Upon activating Brook and migrating from another theme, previously added featured images might take strange aspect-ratios, be unnecessary big or just look out of place.
This is because image thumbnails have not been resized/cropped per Brook's presets.

Just install Force Regenerate Thumbnails Plugin, and fire it up from Tools > Force Regenerate Thumbnails. This will regenerate all your 'pre-Brook' featured images, and you'll be golden.

Theme Update

There are three ways to update the theme to newer version. It is recommended to always update your theme to the latest version as we implement new features and improvements over time. Some of these updates might be needed in order to make the theme compatible with newer versions of WordPress. There is no risk on losing your settings and content. However, if you had done modifications on theme files, then they will be lost. For customization, you should use Child Theme (you should never update the child-theme).

Theme Update via Envato Market Plugin

Envato has released a plugin that aims to bring an automated, simple and fast way of updating your themes purchased on Envato. Upon installing the theme, you'll be notified and asked if you wish to install the Envato Market Plugin.

Once you activate the plugin, you'll be able to connect it to your Envato account and update the theme with one click.

Note that this plugin is still in beta, so it is possible to encounter a bug. In this case, use other methods for updating theme.

Theme Update via WordPress Admin Panel

WordPress doesn't have automated system for updating themes. You would have to first delete the current theme, and then install the latest version. This is a bit of a bummer.

Fortunately, there's a plugin that sorts this thing out. You can install Theme Upgrades Tool. Follow the simple guide-steps, and you'll be able to update the theme with a simple 'Update' option.

Theme Update via FTP

Similarly to the installing a theme via FTP, you can update your theme by simply overwriting the current theme files.

  1. Log into your hosting space via an FTP software.
  2. Unzip the brook.zip file and only use the extracted brook theme folder.
  3. Upload the extracted brook theme folder into
    wp-content > themes in your WordPress installation.
  4. You'll be asked if you really wish to overwrite the current folder. Confirm, and let the files upload.

Translating

Brook Theme comes with the created language .po & .mo files.
Child-theme also already contains these files, and they're ready for translation.

Included files are en_US, and located in languages folder.
If you need to create the translations for a different language, just duplicate and rename the .po file.
For example, french language files would be named fr_FR.po.
Then edit files and add translations.
Upon saving the translations, .mo will be automatically generated.

Changing your website language is very easy.
In WordPress Admin Panel, go to Settings > General, and at the bottom find Site Language.

Note that you can use translation files to change the theme strings in default en_US language.

For editing the translation files, you can use Loco Translate Plugin (which automates almost whole process explained above!), PoEdit software, or some of the online translation tools.

For more details about translating WordPress, check the Codex: Localization. First part covers creating theme and translation template file, but second part covers the translating (which you are interested in).

Plugins

Brook requires and recommends a couple of plugins to extend it's functionality.
All can be installed from WordPress Plugins Repository or automatically from notification in Admin panel.
Although, Brook will work perfectly without any of these plugins, you may want to extend theme's options with them.

Advanced Custom Fields - recommended
This plugin will enable additional fields and settings on Posts, Pages, Taxonomies and Author.
It is recommended that you install this plugin.
WP-LESS - optional
Installing this plugin will add advanced color options in WP Customizer.
You'll be able to set black, white and greys, in addition to the accent, link and cover colors.
WP Instagram Widget - optional
Lightweight plugin for displaying your instagram feed in a widget.
Brook has styles for this plugin out-of-the-box.
Brook's Instagram Footer widget must be created with this particular plugin, in order to get the correct styling.
Contact Form 7 - optional
Great plugin for building forms.
Brook has styles for this plugin out-of-the-box.
You are free to use any other plugin for creating forms.
This plugin is recommended because it is styled by the Brook theme.

Importing Demo Content

We have included the exported XML file from our demo, which allows you to quickly set up your theme with Brook demo content.

  1. The XML file is included within the download package at root level in a zip called brook-demo-content.zip
  2. Extract it and find brook-demo-content.xml
  3. Navigate to WP Admin > Tools > Import
  4. Select and install WordPress Importer
  5. Once its installed, select the XML file and upload it. It will take a few minutes to install and upload all content

Images used in Brook Demo Preview are not included in a theme-package.
By importing demo-content, you will get grey placeholder images instead of photos.

If Demo-XML file won't load, it's most likely due to host limitations. The easiest way to get around that is to leave the "download images and attachments" box unchecked. That will give you all the pages and posts without the attachments.

Blogging

Single Posts

Single Post Display Settings

Global settings for single posts can be set in
Theme Customizer > Blog Layouts & Posts > Single Posts.

Settings are pretty much self-explanatory. Everything is enabled by default.
If you wish not to display a particular segment, just check it off.

Overriding a particular Single Post

If you install the required Advanced Custom Fields plugin,
your Edit Post page will be extended with a couple of additional setting fields.

Show Cover Image
By default, featured images are shown as covers on Single Posts. You may choose to disable it's visibility on a particular Single post. Just check this off.
Custom Cover Image
With this setting you can customize the cover image. Useful when using vertical featured images.
Cover Image is Dark
If your custom cover image or the featured image is dark, check this field to make all overlaid text white, and thus readable.
Enable Comments
Unchecking this field will completely remove the comment form and all already posted comments from this post.
Enable Sidebar
Use this setting to override default Theme Setting set in Theme Customizer > Layout > Sidebar
Sidebar Position
Use this setting to override default Theme Setting set in Theme Customizer > Layout > Sidebar
Show Infobar
Show/Hide the Infobar on this particular post. This overrides the global setting from Theme Customizer > Blog Layouts & Posts > Infobar

Post Formats

Different post formats will change the display of that post in Excerpt List and Masonry Grid blog layouts.
Single Post and Full Content List displays will look the same, no matter what post format is set.

Post Formats:

Standard
Displays featured image and excerpt. This is default post format.
Quote
Displays first quote from the post's content.
Gallery
Displays first gallery from the post's content and the exceprt.
Video / Audio
Displays first embedded media from the post's content and the excerpt.
List of all supported third-party embeds in WordPress.
If desired content (quote, gallery, embedded media) for a particular post-format does not exist in it's content,
post will act as if it was standard, and it will display featured image.

Blog Layouts

There are three types of blog layouts. Each will be covered and described:

List with Full Content

  • This is Brook's default blog layout.
  • Doesn't display the featured image.
  • Displays full post content, completely styled, just as it would look in Single Post view.
  • Supports <!--more--> tag, for cutting the content.
  • Doesn't support manual excerpt.
  • Specific post format has no visual effect.
  • Good choice for continuous reading or full showcasing of your posts.

List with Excerpt

  • Displays featured image.
  • On specific post formats, featured image will be replaced with first gallery/quote/embedded-media from the post's content.
  • Below featured image, gallery or embedded media, excerpt will be displayed.
  • If manual excerpt is entered, it will be used.
  • If no manual excerpt is entered, it will be automatically created from first 20+ words of post's content, ending with a . ! ? ; - full sentence.
  • Doesn't support <!--more--> tag.

Archive List

  • Displays small featured image.
  • Displays post meta.
  • Doesn't display excerpt nor post content.

Masonry Grid

  • Pretty much, same article style as in List with Excerpt.
  • Doesn't display post meta, or social-sharing links.
  • Articles are laid out in masonry style.
  • Tablets show two columns, while desktop resolutions without sidebar display three columns.

Masonry Gallery Grid

  • Articles are laid out as a gallery in masonry fashion.
  • Displays post meta.
  • Doesn't display excerpt nor post content.
  • Tablets show two columns, while desktop resolutions without sidebar display three columns.

Homepage Setup

Your homepage can be set to display your latest posts or a custom static page.
Next part of the documentation will cover the case of setting up Latest Posts homepage.

Latest Posts is default display mode. You can check if that is the chosen display in
WP Admin > Settings > Reading > Front page displays.

To setup the Featured Slider on top of the homepage,
head on to Theme Customizer > Blog Layouts & Posts > Featured Slider.

Note that you can display Featured Slider on a Static Page via Page Settings on it's edit screen.

By default, your Featured Slider will display 4 latest posts.
In order to pick the exact posts/pages for the Featured Slider, your posts/pages must be properly tagged. Then, you can select a certain tag in Featured Slider Settings, and it will use only posts/pages of that tag.

We recommend using some descriptive tag, like 'Featured', for tagging posts/pages that you wish to be featured in the slider.

Once you've created a couple of posts, added featured images for them and tagged them with some common tag, pick that tag from the Featured Posts: Tag to use

Under Count, choose the limit for featured posts count. Note that you can turn the slider off with 0, or make it use all posts with -1.

Lastly, check Exclude Featured posts from blog, to exclude the exact featured posts from the main blog below it, thus removing the duplicates.
Of course, you can uncheck this setting, and display all posts undisturbed.

To disable the Featured Slider, set Count to 0

Homepage Cover

Alternatively, you can set the Cover banner, similar to those on Single Posts.

Check the Use Cover setting to enable the display of it.
Then, set the content for it and customize the background image.

Homepage Main Blog

Finally, choose the layout for the Latest Posts.

Choose the desired Blog Layout and Pagination Type.

Also, you can override general setting for display of the sidebar.
This is useful when you wish for all your single posts to have a sidebar,
but you want your homepage to be full-width.

Setting for the number of articles per page can be found in
WP Admin > Settings > Reading > Blog pages show at most.
This is global setting, and will be used for your archive lists as well.

Archives Setup

Settings for Archives are pretty straight-forward.
They can be found in Theme Customizer > Blog Layouts & Posts > Archives.

You can override the global setting for the display of the sidebar, and pick desired blog layout and pagination style.

Archives cover Tag, Category, Date and Author pages, as well as Search results page.

Tag & Category Covers

Brook Theme supports taxonomy descriptions as well as custom cover images.
All elements together create the Cover for that taxonomy page.
Feel free to customize your category descriptions and cover images in WP Admin > Posts > Categories.

Infobar


Infobar is very handy feature that sticks to the top of the screen and shows you what's the current post you're viewing, and how much of it have you read. It is available on Blog Layouts - Full List & Excerpt List, and on the Single Post.

Full/Excerpt List
Shows the current post name, percentage of read content and quick-jump links for previous or next post.
Single Post
Shows the current post name, percentage of read content, authoring date and quick-jump comment link. When post is 100% read, infobar changes into a share this section.

Settings

  • Infobar can be enabled or disabled independently on Full List Blog Layout, Excerpt List Blog Layout and Single Posts.
    For these settings, go to Theme Customizer > Blog Layouts & Posts > Infobar.
  • Each Single Post can override the global setting for Infobar in it's own Post Settings.
  • Infobar supports custom background, which can be set in Theme Customizer > Style > Backgrounds

Editor & Content

Brook Theme extends the native WordPress's TinyMCE editor with a couple of style formats, elements and shortcodes. Their usage will be covered here.

Formats

In Editor, note the Formats dropdown menu.
It contains custom Brook typography and button styles.

All formats have a WP Admin preview, so you'll have full WYSIWYG experience.

Formats > Brook Styles

Dropcap
Select the first letter of a paragraph, and format it as a Dropcap.
Highlighted text
Select words, or part of the text, and make it highlighted.
Similar as you would do with Bold or Italic
Highlighted Paragraph
Formats the selected paragraph as highlighted.
Half Left & Half Right
Wraps the selected elements in a 50% wide column.
In case that you need to clear the floats after this, and force the rest of the content back into it's natural flow, use Horizontal Clear element.

Highlighted paragraph and Half Left/Right, just as native Blockquote or H1-H6, are block level formats.
That means that they will format whole paragraph of text, even though you only selected a part of it.

Formats > Brook Buttons

This format will automatically find a <a> tag in your selected content, and format it as a button of selected style.
There are two different types of styles, which should be combined - Size and Style.

Elements & Shortcodes

While Formats format the existing content, Elements will input the new element into the content, at the cursor place.

Separator Full Width
Simple horizontal line for visual separation. Same as native <hr> - Horizontal Line.
Separator Small
This is a smaller separator that provides visual separation.
It can be horizontally aligned with native text-align tools.
Empty Spacing
Shortcode for fine tuning the vertical space between elements.
Just set the height value in pixels. Defaults to 15px.
Shortcode example: [spacing height="15"]
Horizontal Clear
This is invisible element that is useful when you need to clear floats and return the natural flow of the content.
Example - You add vertical image, and align it to the left. Content starts to wrap it, and goes to the right of it. In order to make a break and return normal content flow, just insert horizontal clear where you need it.
Striped Title
Shortcode for styled title/label.
Shortcode example:[striped]My Title[/striped]
Icon
This introduces the Icon Picker, which can be used to browse the Brook's icon set.
Upon selecting icon, it's shortcode will be placed in the content.
This shortcode will transform into an graphical icon on the preview of the page.
Icon can be placed almost anywhere, even in titles or dropcaps.
Shortcode example: [icon]brook-icon-facebook[/icon]

Image Slider

Create custom slider for images from your Media Library.

Attributes:
slides
Comma-separated IDs of images you wish to slide. Find the image ID in Media Library.
Example: slides="13,18,19,27"
height
Enter the height only if you wish to limit the overall slider's height.
If left empty, images will be displayed in largest available size (decided by available width)
interval
Time in milliseconds between automatic sliding.
Enter 0 to disable the auto-slide.
Preview:
Get the Shortcode:
[image_slider slides="n,n,n" height="" interval="4000"]

GMap

Create Google Map with custom pinned location.
Custom pin style and bubble content are supported.

Attributes:
lat
Latitude for the pin location.
lng
Longitude for the pin location.
zoom
Map zoom. Defaults to 14.
pin
Link to custom pin image, if you wish to personalize it more.
scrollable
Make map zoom/scroll on mousewheel.
Make true when using smaller maps.
Larger/full screen maps must have this at false to enable normal page scroll.
height
Custom height of map. Defaults to 16:9 aspect ratio.
content [BUBBLE]
Content for the pin bubble. Leave empty not to have pin bubble.
Preview:
Get the Shortcode:
[gmap lat="48.85" lng="2.34" zoom="14" pin="" scrollable="" height=""]BUBBLE[/gmap]

Social Links - Titles

Creates a styled list of social links with textual titles as labels.
You can enter as much social networks as you wish with simple
title="url" pattern.

Attributes:
title
Title for the social network. This will be visible label.
url
Custom link for the given label.
Preview:
Get the Shortcode:
[social_titles title="url" title2="url2"]
Example real-life case shortcode for Twitter, Instagram and Rdio:
[social_titles Twitter="http://twitter.com" Instagram="http://instagram.com" Rdio="http://rdio.com"]

Social Links - Icons

Creates a styled list of social links with icons as labels.
You can enter as much social networks as you wish with simple
icon="url" pattern.

Attributes:
icon
Icon name. You can browse the available icons from
Elements > Icon.
Note that icon name must be used, without the leading brook-icon- part to work.
url
Custom link for the given icon.
Preview:
Get the Shortcode:
[social_icons icon="url" icon="url2"]
Example real-life case shortcode for Twitter, Instagram and Rdio:
[social_icons twitter="http://twitter.com" instagram="http://instagram.com" rdio="http://rdio.com"]

Masonry Gallery is created with native WordPress gallery feature.
It supports captions and has option for lightbox.

  • When editing post click Add Media button.
  • Select Create Gallery from the left menu.
  • Pick one or multiple images from media library and create gallery.
  • Link to: Media File to enable lightbox feature.
  • Set number of columns. This will be automatically overridden in cases of smaller screens or displaying gallery in Grid blog layout.

Authors

Create & Edit Authors

To add or edit authors go to WP Admin > Users.
Essentially, author is a user with the role of 'author'.
If you need more information on the roles and their capabilities, check the official WordPress documentation.

Social Links

Among the user settings, you'll see Social Links Shortcode.
This is custom Brook field for embedding the social links with our shortcode.

If you wish to display it, you need to enter the Social Icons or Social Titles shortcode, configured with the author's links.
Please, check the documentation on these shortcodes for detailed explanation on how to configure it.

Cover image

Last two fields are for customizing Cover image for the author. This image will be used as background for Author Block on single posts, and for Cover on the Author Archive page.

Author's Image

WordPress uses Gravatar service for displaying author's image. Just create a gravatar profile, connect your author’s email to it, and image will be automatically displayed.

Alternatively, you can extend this functionality and use a third-party plugin which would allow you to upload your avatar image directly to your website.

Pages

Pages are created with the same editor tools as posts.
They are usually static, and prominently displayed in navigations.
They are commonly used for About and Contact pages.

However, beside this default functionality,
Brook extends the pages with the options to create custom blog lists on them, below the main content.
This way, you can have multiple custom blogs on your website, or create an awesome custom intro content to your blog ( and set that page as a homepage in WP Admin > Settings > Reading ).

Page Settings

If you've installed the required Advanced Custom Fields plugin, below the main content in Edit Page screen, you'll see the Page Settings.
First tab - Layout & Title has options for overriding the global layout settings on this particular page.

You can fully hide comments section or customize the appearance of sidebar.

Page Cover

In addition to the basic title, here you have fields for customizing the Cover of this page.Title Above, Description for additional heading content, and Custom Cover image if you want to additionally enrich it.

Page's Custom Blog

If you've installed the required Advanced Custom Fields plugin, below the main content in Edit Page screen, you'll see the Page Settings.
Second tab - Blog has options for creating custom blog on that particular page, and displaying Featured Slider.


Check Display Featured Slider to display the featured posts on top of the page.
This slider is configured in Theme Customizer > Blog Layouts & Posts > Featured Slider.


By checking the Use Blog option, you'll enable the blog, and make additional options to appear.

Blog Title
Title for custom blog. It left empty, title won't be rendered.
Blog Title Label
Prints above the Blog Title, as a small label.
Blog Title Description
Prints below the Blog Title, as a text description.
Blog Display Style
Pick one of the blog layouts for the blog.
Blog Category
Pick a category to filter the articles in your blog.
You can choose multiple categories.
Leaving everything unchecked will show all categories.
Blog Category Exclude
Pick a category to exclude from blog.
Blog Featured Exclude
By checking this option, you will exclude the featured posts from this blog, thus not creating duplicates.
Blog Posts per Page
How many articles will be showed per page.
Leaving this empty will fallback to the global setting from WP Admin > General > Reading
Blog Pagination
Pick a desired style for pagination.
Enable Sticky Posts
This gives you the option to skip the specifically designed sticky posts, and display them normally with the rest. This option is not available on native WordPress lists, since they must display sticky posts as intended.

Contact Page

In order to create a contact page, you need a plugin for creating custom forms.
We recommend Contact Form 7. It's easy to use and reliable.
Brook also contains styling for this plugin.

In the Contact Form 7 Admin area, you'll be able to build your custom forms,
which will later be included in your static page via the generated shortcode.
It's pretty simple, but nonetheless, here's a basic form we use on our demo:

[text* first placeholder "Your Name*"]
[email* email placeholder "Your Email*"]
[textarea* message x12 placeholder "Your Message*"]
[submit "Submit"]

Complex Contact Form Building

Brook offers a way of bulding a complex forms and splitting them into columns.

You can create custom columns with .half-left and .half-right classes.
Just wrap the content in <div class="half-left"></div>, and it will be wrapped in left column.

<div class="half-left">
    [text* first placeholder "Your Name*"]
    [email* email placeholder "Your Email*"]
    [text phone placeholder "Do you have a website?"]
    [select menu-928 "A Sponsorship Opportunity " "Just Want To Say Hi" "Something Else"]
</div>

<div class="half-right">
    [textarea* message x12 placeholder "Your Message*"]
    [submit "Submit"]
</div>

Theme Options

Brook's theme options are created with native WordPress Theme Customizer with live preview.
You can access it from the Theme Customizer link in the Admin Bar,
or from WP Admin > Appearance > Customize.

Theme Options: General

Site Title & Tagline
Default WordPress settings, used for building your website's title in a browser-tab,
and generating default meta tags.
Main Logo
You main logo image, which will be used in header.
It can be of a custom size, but it will get resized to fit the header height if you're using Minimal Header layout.
Small Logo
Alternative logo that will be used on smaller screens and on minimized sticky header in Minimal Header Layout.
It should be a smaller, simplified version of main logo.
If missing, main logo will be used.
Favicon
Favicon for your website.
Needs to be 16x16 resolution, in .ico format.
You can find a lot of favicon generator sites around the web.
Here's one: www.favicon.cc.
Apple Touch Icon
Favicon for the iOS and Android touch devices.
Needs to be 152x152 resolution, in .png format.
Load Pages with Ajax
Globally enable smooth ajax navigation through website.
Since pages are loaded with javascript,
some third-party plugins may not be aware that page loading/changing has happened, and thus not work correctly.
If this is the case with some of the plugins you'd like to use, you have two options:
  1. Easy: Just disable Brook's Ajax loading.
  2. Advanced: Hook the plugin to the Brook's Ajax navigation. Check Javascript Hooks for details.
Use Facebook Open Graph meta tags
This improves sharing your posts on Facebook.
If you use a third-party plugin that takes care of this, disable this option.

Theme Options: Layout

Layout: Header

Header Layout
Choose between Minimal and Classic header layout.
Header Menu Location
Choose if menu should be placed left or right in the header.
Header Widget Area will automatically be placed on the other end.
Use Search in Main Menu
Display search form at the bottom of the main menu in Minimal Header Layout and lower screens handheld devices.
Enable Sticky Header
Make header stick to the top of the screen, and be always visible.
On larger screen sizes, it will shrink in height once you scroll down the page and display the alternative-small logo.

Layout: Sidebar

Use Sidebar
Completely enable or disable sidebar.
This can be overridden on a particular post/page, homepage, or archives page.
Sidebar Position
Choose between left and right sidebar.
Set Sidebar Width on Desktop
Self-explanatory.
iPad will have fixed sidebar width, and this field will not affect it.

Layout: Footer

Footer Logo
Pick and upload your footer logo, if you wish to have one.
Copyright
Add copyright text. It supports multiple rows.
Enable back-to-top button.
Adds a back-to-top button in lower right corner.
Make footer appear in unfolding style
Enables styled appearance of footer when scrolling.
Make Bottom Footer centrally aligned
Bottom footer holds logo, copyright and footer menu.
By default, logo will be on the left, and copyright and menu on the right.
Enabling this option will set all elements on center, below each other.

Theme Options: Style

Style: Colors

By default, you can change only the Accent, Links and Gradient Cover colors.
However, if you install the recommended WP-LESS plugin,
you'll gain ability to define white, black, and greys in between.

Accent Color
Used as primary accent color for buttons, hover effects and accented details.
Links Color
Used as the main color for links throughout the content.
Gradient Cover Color
Defines the color of the gredient overlaying Cover Heading and Author Block.
White
Everything white: button text, elements over the images.
Pale Grey
Used as background on form elements, code blocks and highlighted text.
Light Grey
Used whenever a slightly lighter version of grey is needed. Most of the borders, meta-info, widget titles, and textual labels.
Grey
Main text color. Used mostly for typography.
Black
Everything black: titles color, dark-black elements, secondary-links.

Style: Backgrounds

Pick Backgrounds for the Body, Header, Infobar, Main Menu, Sidebar and Footer.
Dark-modes can be enabled by checking the needed fields.
Dark-mode will render text in light color, thus making it readable on darker backgrounds.
Body doesn't support dark-mode.

Style: Typography

Here you can set the typography options for the theme.
Some notes:

  • After all the available elements, on the bottom you'll see a Character Sets field.
    This will enable you to include additional character sets (like greek or vietnamese) into the Google Fonts embed.
  • Settings for Labels, are affecting post-meta, buttons, title labels, social links, blockquote cite
  • Kerning setting has high sensitivity. Use 0.1 or 0.2 values for the best results.
    You can use a negative values also, like -0.1.

Theme Options: Blog Layouts & Posts

Homepage

This panel has the settings for the sidebar usage, main banner image or title, featured posts, and style of the main blog in homepage (latest posts).
It is covered in detail in the Homepage Setup part.

Archives

This panel has the settings for the sidebar usage, main banner image and style of the blog list in all archives pages.
It is covered in detail in the Archives Setup part.

Single Posts

Here you can find options to enable or disable various sections of the single post display.
They are all visible by default.

Infobar

Choose where should Infobar be displayed/hidden.

Sharing Settings

Configure the list of social networks on which your posts can be shared.
This is Brook's styled feature.
If you wish to use third-party plugin or service, you'll most likely wish to disable all of Brook's sharing options.

These sharing links are visible below each single post, and posts in Full Content List and Excerpt List layouts.

Theme Options: Advanced

Custom CSS
Textarea for inputing custom CSS.
With this option, you can quickly edit and customize the theme, or some additional elements on your website.
Embed GoogleMaps js
By default, theme will load Google Maps files for displaying maps with the GMap shortcode. If you do not use a map anywhere on the site, you may uncheck this field to skip that files, and thus increase the load speed of the site.
Display Pingbacks
Disabled by default. Enable it if you want to display pingbacks alongside your comments.
Google API
Enter your own Google API key that will be used for Google Fonts and Google Maps. If left empty, theme's own API key will be used. If in doubt, leave empty.

Theme Options: Navigation

This is default WordPress options panel.
Here, you can assign your custom-created menus to a dedicated menu areas.
Brook has two menu areas: Header and Footer.
These settings can also be found in WP Admin > Appearance > Menus

Theme Options: Widgets

This is default WordPress options panel.
Here, you can add widgets to the dedicated widget areas.
Same settings can be found in Appearance > Widgets.

Live Preview in Theme Customizer can sometimes make the process of setting widgets behave weird.
If you notice something similar, move on to Appearance > Widgets and customize widgets there.

Theme Options: Static Front Page

This is default WordPress options panel.
Here, you can choose what does your homepage display - Latest Post or a custom static page.

Widgets

Widgets can be accessed and customized in WP Admin > Appearance > Widgets.
Brook brings 8 dedicated widget areas, and 4 custom widgets.

Widget Areas

Sidebar Area 1
Basic sidebar widget area.
Sidebar Area 2 (Sticky)
This widget area is rendered below the Sidebar Area 1.
It sticks to top of the window, and stays in the viewport while scrolling.
Header Area
Best used for social links.
Depending on the Header Menu position, this widget area will be rendered on the left or right.
404 Area
Widget Area that acts as a main content on 404 Page Not Found.
Useful for getting your visitors back to the important content on your website.
Search Results Area
Widget Area that acts as a main content if search provides 0 results.
Footer Instagram Area
Widget Area displayed as a first full-width row of the footer.
It is designed to be used specifically with WP Instagram Widget plugin.
Footer Area Left/Center/Right
If used - best used together. These areas are all 33% wide, and will fill the footer.

Brook Widgets

Beside the native WordPress widgets, Brook brings 4 custom ones to the table.
Additionally, we have styled the recommended WP Instagram Widget, so it fits perfectly in the theme.

Brook Widget: About Author

Create your about info for sidebar or footer with ease.

Title
Basic widget title.
Image URL
Input full url to the image that will be used as a background. Widget height will depend directly on the height of this image. It can be image from your media library (look for a image url on the right in your WordPress media library).
Image darkness
Below the Image URL, choose the appropriate darkness of this image. It will render the overlaid content in black or white, to improve readability.
Gradient Color
Pick a custom color for gradient overlaying your background image. This can default to the color set in Theme Options > Color: Gradient Cover
Name
Add your name that will be displayed under the image.
Social Shortcode
Input your custom social shortcode here.
For details on how to build the shortcode, check Social Title and Social Icons parts.
Description
Add custom description to be shown at the bottom of the widget.
Supports paragraphs and shortcodes.

Brook Widget: Blog List

Display custom blog list in the sidebar or footer.

Title
Basic widget title.
Style
Pick between two blog layouts: Classic List and Image Grid.
These are specific layouts crafted for widget usage.
Number of posts
Set the maximum number of posts to display.
Category
Filter the posts by specific category, or skip to display all posts.
Tag
Filter the posts by specific tag, or skip to display all posts.
Note that if both Tag and Category settings are specified, only posts that match both cases will be displayed.
This can be used for displaying, for example, only 'featured' tagged posts from the 'Movies' category.
Order by
Choose ordering rule for the posts.
For example, 'Latest Posts' widget would use date, but 'Most Popular' would use comment count.
Order
A->Z or Z->A

Brook Widget: Social Links - Icons

Build your own social links with icons.

  1. To set a new icon for social network,
    click on the icon box to browse and pick your icon.
  2. Next to the icon, input it's full url.
  3. To add new social network to your list, click Add new social media.

Brook Widget: Social Links - Titles

Build your own social links with titles as labels.

  1. To set a new title for social network,
    input it in the first field.
  2. Next to the title, input it's full url.
  3. To add new social network to your list, click Add new social media.

Instagram Footer is created by placing WP Instagram Widget into the Footer Instagram Area widget area.
WP Instagram Widget is installed through the same-name plugin. It is a recommended plugin, and upon activation of the theme, you should see the notice for installation of the recommended plugins.

Footer Instagram will take full width of the screen, and photos will fit the space.

Advanced
This section is for developers.

Javascript Hooks

If you're installing a third-party plugin, or just building some functionality on your own, there's a possibility that you'll need to hook into Brook's Ajax loading, or make the theme aware of your added content/function.

Hooking into Ajax

Brook fires an event when new page has been loaded with Ajax.
If some plugin works only on initial loading or full page refresh, but not after navigating to other page, chances are that it is not aware that new page was loaded via javascript.

You need to kickstart it. Of course, only if that plugin supports to be manually fired.
You can use the following snippet:

$(document).on('brook:ajaxPageLoad', function(){
    plugin_function();
});

Recalculating layout

This is mostly concern regarding the sticky sidebar.
If the content changes, Brook must be told to recalculate the heights and update the position of sticky sidebar.
After your changes, just trigger the Brook's re-layout:

$(document).trigger('brook:layout');

FAQ

How to add manual excerpt?

Field for manual excerpt is hidden by default in WordPress.

When in Edit Post screen, in top-right angle find Screen Options, pull down the options, and check Excerpt setting.
You'll be able to see the manual excerpt field below the main content editor area.

How to improve and resize logo?

Logo will look much sharper and have overall better rendering if it's dimensions are even numbers (260x120, 144x144).

Header Layout: Minimal

Logo takes the 85% height of the available header height.
That means 100px height on desktops, and 64px height on mobile, tablets and sticky header.
If you wish to alter the height, paste this code into Theme Customizer > Advanced > Custom CSS:

.header__logo img {
    max-height: 100%;
}

In this example, logo has been altered to take the maximum available height, thus being the biggest possible.
Just change the percentage to tune the height per your need.

Note that logo height is limited by the header, and it can't be enlarged to dimensions above 120px.

Header Layout: Classic

You logo is displayed in it's real dimensions.
Logo's padding can be customized with this CSS:

.banner-logo {
    padding: 30px;
}

How to embed instagram image?

Unfortunately, this is a known WordPress bug - Instagram auto-embed doesn't work properly.
Current solution would be to either:

  1. Manually paste your embed code into Edit Post content (text editor, not visual)
  2. Use Simple Instagram Embed plugin, which sorts the auto-embed issue out.

What image size to upload?

No matter what image size you upload (as long as it is big enough), it will be automatically resized according to it's usage and placement.

If you're adding the image to your content, you'll be able to pick it's display size (bottom-right in your screen), or soft-tune it with the live resizing tool in the editor.

With all that being said, maximal width that any image could have is 1200px.
By uploading images wide at least 1200px, you make sure that everything will look spot on.

Image height is completely optional, and aspect-ratio will be kept in pretty much all the cases and placements.

How to change image-size preset?

In your child-theme's functions.php use the following function:

add_action('after_setup_theme', 'change_image_size', 11);

function change_image_size() {
    remove_image_size('xl');
    add_image_size('xl', 1200);
}

In this example, image-size xl is changed.
You can find all Brook's image-size presets originally defined in main theme's functions.php file.
If you need more details on customizing the preset, you can check official WordPress documentation.

Embedded media is not responsive.

This usually happens when Jetpack plugin is installed.
Specifically, Jetpack's Shortcode Embeds module overrides the Brook's functionality for responsive embedded media,
and all the Youtube/Vimeo embeds start rendering out of proportion and size.
Just deactivate this module from the plugin and things will get back to normal.

If the above approach doesn't help, make sure to use the original URL for embedding media. Don't use shortcoded or embed-codes. WordPress will automatically convert your link into embedded media when you paste the link in the editor.

For example, when embedding YouTube videos in content, paste the link in this format:

https://www.youtube.com/watch?v=2wsUHhiMpGw

If you wish to use a third-party plugin for gallery, it is a great possibility that it uses the native WordPress' [gallery] shortcode, which Brook also uses for it's masonry gallery. This might lead to an error.

To disable the Brook's overrides for the gallery, in your child-theme's functions.php paste this code:

add_action( 'init', 'remove_brook_post_gallery' );
function remove_brook_post_gallery(){
    remove_filter( 'post_gallery', 'brook_post_gallery', 10 );
}

How to make header on pages opaque?

If you wish to remove to transparent header feature on single posts or pages, just paste this code into Theme Customizer > Advanced > Custom CSS:

.header__bg {
  opacity: 1 !important;
}

In case that you wish to only remove the transparency for desktop, but leave it on mobile, wrap the custom CSS in media-query like this:

@media only screen and (min-width: 1171px){
  .header__bg {
    opacity: 1 !important;
  }
}

How to change Cover's height?

Cover’s height is determined by the actual textual content in it. If you wish to change it's height or fine-tune the vertical position of the title, just change the top and bottom paddings. These are the current values:

.brook-cover:first-child {
  padding-top: 180px !important;
  padding-bottom: 100px !important;
}

How to change Featured slider's height?

To change the Featured slider's height, use this CSS snippet and customize the exact height value:

.loop-container--style-carousel .post__media img {
  max-height: 600px !important;
}

How to equalize width of the paragraphs with images/blockquote in the content?

In order to make paragraphs take the same width as stressed elements that are 'breaking out of the column', just use this CSS:

.post__content blockquote,
.post__content .highlighted-p,
.post__content .alignnone,
.post__content .gallery--newspaper,
.post__content .brook-embed-container,
.post__content .mejs-container,
.post__content .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

.post__content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.post__content .alignleft {
  margin-left: 0 !important;
  max-width: 100% !important;
}

.post__content .alignright {
  margin-right: 0 !important;
  max-width: 100% !important;
}

How to remove meta details from posts display?

Comments, categories, author and date in the meta below the title can be removed independently for single post views and blog lists ( like homepage ). Use the CSS that reffers to your need:

/* Remove comments from blog-list */
.loop-container .meta--comments { display: none !important; }

/* Remove categories from blog-list */
.loop-container .meta--categories { display: none !important; }

/* Remove date from blog-list */
.loop-container .meta--date { display: none !important; }

/* Remove author from blog-list */
.loop-container .meta--author { display: none !important; }

/* Remove comments from single post */
.article-single .meta--comments { display: none !important; }

/* Remove categories from single post */
.article-single .meta--categories { display: none !important; }

/* Remove date from single post */
.article-single .meta--date { display: none !important; }

/* Remove author from single post */
.article-single .meta--author { display: none !important; }

Support

Thank you for purchasing our theme.

If you have any questions that are beyond the scope of this help file, please feel free to contact us on support@korra.io.
We will respond in the shortest time possible.

Credits

Theme uses SmoothScroll.js plugin by Balázs Galambosi.