Thank you! for buying one of our template, if you find any kind of issue or bug don't hesitate on contact us.
We will resolve your problem as soon as possible.
- Name: Breek
- Author: EstudioPatagon
- Platform: Wordpress
- Latest Update: 09 August 2019 - version 1.3.0
- Super Light and Modern design.
- Constantly updated.
- Translation ready (English and Spanish included).
- Minified and Optimized code.
- ACF Pro bundled (save $29).
- Built with SCSS and pre-compiled with Prepos 6 (Windows and Mac compatible).
- Dedicated advertising section (below header, before and after post content, custom advertise to place anywhere).
- Advertising section between grid posts. demo here
- Supports menu with icons
- Sticky sidebar for Posts
- Lazy Load for Lists (home pages, archives, categories, etc).
- Lazy Load for post content.
- Lazy Load for embed (iframes like Youtube/Vimeo/Soundcloud).
- HTML5 & CSS3 ready.
- 3 Single post dispositions
- No Sidebar Style for Post and Pages see here.
- Custom Tag page, see here.
- Custom Author page, see here.
- Custom 404 Page see here.
- About me Widget.
- Search Widget.
- Custom Galleries.
- Advertising sections.
- Disqus Support.
- Fully responsive.
- Video Support (Vimeo, Youtube, etc).
- Retina Display Ready.
- Font Awesome icons.
- Works on Android, Ipad and Iphone.
- Documentation included.
- Clean Design.
- Well Coded.
- Navigation Menu.
Breek is a WordPress theme so the basic requirements are the same of Wordpress
2. Theme Setup
2.1. Install the theme
This guide assumes that you already have a Wordpress installation ready.
Uploading the theme into wp-admin
- Login on your admin panel.
- Go to Appearance -> Install Themes
- Upload -> and "Select file" which will open the File Upload dialog window.
- Browse to the folder where you have wp-breek.zip and upload it.
- Now you can activate the theme.
Uploading the theme on custom hosting (FTP)
The instructions are pretty simple:
- Connect to your FTP using a FTP software, example Filezilla.
- Unzip the wp-breek.zip file on your computer.
- Upload the extracted breek theme folder into wp-content / themes in your wordpress installation.
- Login on your wordpress admin panel.
- Go to Appearance and activate breek.
2.2. Install Required Plugins
After you activated successfully the template, you will see a notice box in the top of the admin:
- Click on "Begin installing plugins", this will redirect you to the full list of required/recommended plugins.
- Only 3 plugins are required to get the theme working with all features: Breek Functions, ACF and Redux Framework, all others plugin are totally optional, but if you want to import demo content is recommended to install all of them.
- Click on bulk actions, select "install" and finally click "apply"
After a while you will see a message like this "All plugins installed and activated successfully", if not, try reinstalling them on "appareance -> required plugins".
2.3. Import Demo Data (optional)
This step is fully optional, if you already have a working blog, you can go directly to Basic Theme Usage.
To import the demo data it is strongly recommended that you have already installed the plugin "One click demo import" from the last step (2.2).
- Click on appearance
- Click the submenu import demo data
- Now click on "Import Demo Data" button and wait until is fully imported.
- This will take a while depending of your server speed and internet connection.
After finished you will see a successfull message like this:
Assign the correct menu to the header
After you imported all the content you must select a main navigation for the template, you must follow the next steps:
- Go to appearance -> menus
- You will see a full menu displayed, just go to the bottom and check display location "header"
- Click Save menu
Now you will see the correct menu on your website:
Assign the correct amount of posts to see the grid layout
By default Wordpress show your latest 10 posts as your home, so it is recommended to change to 9, 6 or 12 always as multiple of 3.
- Go to Settings.
- Click on Reading.
- Finally change the posts limit like the next screenshot:
2.4. How to update the theme
- Download Envato Toolkit from here: https://envato.com/market-plugin/upgrading/
- Upload that plugin into your WP admin like the next screenshot:
- After installed and activated, you will see a new section "Envato" at the bottom of your wp-admin panel. You must click settings and add your token here:
- If you don't have any token create, you must click the next url: https://build.envato.com/create-token/?default=t&purchase:download=t&purchase:list=t
- Enter a name, for example "Theme Updates" and you must ensure "Download your purchased item" checkbox is active:
- Finally copy your generated token into your wp-admin -> envato -> settings -> token field.
- If everything is correct, you will see a new list similar to this:
- Now you can check regularly whenever one of our themes is updated.
Super Important: every time Breek is updated you must ensure you have the same version for Breek Functions plugin.
For example, Breek Theme v2.7 need at least Breek Functions v2.7 to work properly. So if you are experiencing any kind of problem, it is recommended to unninstall Breek Functions and Re-install the plugin.
3. Theme Usage
3.1. Page Usage: how to create a homepage
There are 3 types of pages that you could use in any place that you want:
- HomePage (for your latest articles)
- Default Page (for any kind of content)
- Fullwidth (for any kind of content but without sidebar)
The most important page with some extra fields is the Home and after you select on Page Attributes -> Template -> Home, you will see something like this:
There is a basic builder on the left side, this will help you to create different kind of layouts without any effort. It is recommendable to add some advertising + posts or carousel + posts modules to build a full home page. This builder has the drag&drop functionality and you can reorder any module.
Finally set that page as Home on Settings -> reading, like the next screenshot:
How to create a Home Page with sidebar:
- Create a new page.
- Set the page template as "Home" and add a new module "Grid with sidebar", like this:
- Finally set that page as Home on Settings -> reading:
- Same works for classic posts if you want that layout or build any other custom home page.
As you can see in this theme, we are not using any page builder because slow down a little the speed and the Google Page Score. Anyway, Breek will work with any Page Builder that you want to use, for example we recommend Elementor (it's free and the speed is quite good).
If any of the available modules doesn't fit your needs, we recommend you to submit a ticket and we will check your request (maybe we can code a new global module for all our customers).
Breek includes an easy way to add some basic shortcodes. Inside the main editor there is a custom button:
After you click that button a custom dialog will be opened. On the left side you can select what type of shortcode you need to generate and finally just fill the required fields.
The must used shortcode is the button, here is an example of how should be filled:
Breek is compatible with all standards widgets available on Wordpress, anyway, we already includes a set of custom widgets to complement the template. The full list is:
- 125x125 ADS: usefull if you want to create a grid of advertising sections
- Flickr Gallery: display a grid of images from your Flickr account
- Fluids ADS: display only 1 advertise with a max of 280px of width.
- Posts by Category: custom list of posts filtered by a certain category.
- Recent Posts with image: display recent or random posts.
- Recent Tweets: latest Tweets from any twitter account.
- Social: display your social profiles (you must set your profiles on theme options panel -> social profiles)
- Video: Custom Youtube/Vimeo video.
There are 2 important places to add widgets:
- Default Sidebar: this is the main widget area for articles and pages.
- Footer: this is a global content area that will appear in every page, it is recommendable to use a set of 3 widgets and a max of 6 widgets.
You can add multiple custom sidebars on Theme Options -> Sidebars
3.4. Post Usage
The post usage is pretty simple, after you click Add new on post section, you will see something like the next screenshot:
- First, enter your title.
- Add your content.
- Select the post format, usually is standard (with an image).
- Select or add the most appropiate category.
- Select the post style and if the post will show the default sidebar.
- Set a featured image.
- Click Publish.
- Optional, you enable download resources and add an url for your download button.
It is important to know, whenever the post format is changed on the right sidebar, it wil appear new custom fields on the left side (below the main content editor):
In the last screenshot, you will see the post format gallery was selected and we could add new images just clicking on Add to gallery (this button will open your media library and you can select any image that you want)
IMPORTANT: it is highly recommended to always set a featured image whichever is your post format. For example if you select Video format, on small post list (sidebar) you will see a small image instead of a video:
4. Theme Options Panel
Breek includes a powerfull options panel, so you can easily change the main options of the template. This panel is located at the bottom of the wp-admin sidebar:
This page is really easy to use, is just like any form inside the wp-admin, you must click/change the option that you prefer and finally click on save changes.
If you are experiencing any kind of problems with the theme options, you can always click Reset section (this will reset the current active tab) or even you can Reset All options (all tabs inside the theme options panel).
Before you Reset all the options it is important to create a backup of your current options:
- Go to theme options -> Import/Export
- Click on Download Data File
This will download a backup of your current options, so in any case you want to go back, you can click Import from File and paste all the content inside redux_options.json file.
4.1. Subscribe Settings
Here you can change subscribe settings to enable the top subscribe button on the header section.
First of all you must have a Mailchimp Account, if you don't want to use the subscribe form, just leave blank this input field an disable the display subscribe button.
If you already have a Mailchimp Account, you must follow the next steps:
- Login into https://mailchimp.com/
- Click on Lists on the top menu
- You must have a created list before to do the next step, if not, you must create a new one clicking on Create list button
- On the right side of your created list, you will see a submenu, click on Signup forms
Select form builder.
- When you finish to edit your form, you will see an input text box on the top with the short url, something like: http://eepurl.com/dxHIUz
- You must paste that url into Theme Options -> Subscribe Settings -> Subscribe URL.
Note: if you are using any other subscribe website, you can paste that URL as well it will work for any URL you paste.
On header tab you can change the appearance of the Header, it is important to know there is some hidden options that will be displayed only on certain cases, for example:
If you select Header Layout -> Advertising Area, you will see extra fields like the image and advertising URL.
Just secondary options like copyright and a custom logo (only for footer) can be added here.
Here you can manipulate Advertising from all sections. The only ads section that will not be displayed automatically is the "Custom ADS shortcode", that will generate a custom ads that can be used anywhere inside your website, for example:
After you fill all required fields, you can paste that shortcode inside any post or page.
Usefull if you want to change the main colors of the template, if you need to add some extra changes it is recommended to use advanced settings -> custom css box.
Here you can change current fonts used for primary texts and primary titles, if you don't want to change any font, just leave everything in blank.
The Article titles font size only applies when you are viewing the content of an article, not homepages, archives or any other page.
This panel is fully optional, you can add custom sidebars that can be used on your pages, for example:
- .Click on Add More
- Now you will see an input text field, here you must name you custom sidebar (with an unique name)
- Click Save Changes
- Go to appearance -> Widgets
- Now you will see your custom sidebar to use in any page that you want.
The custom sidebar will appear on your pages at the botom on General Information box. You must set "Enabled" the sidebar option in order to see the Sidebar List.
All these options affects Single Articles (content inside any article), the only important option is if you want to use Disqus Platform instead of self hosted comments you must follow the next steps:
- Select Disqus instead of self hosted.
- Add your Disqus ID
- Click Save Changes
How to get your Disqus ID
To get the correct Disqus ID, you must register and create a new site on the next url: https://disqus.com/admin/create/
After you successfully created your site, you will see your Disqus ID on the Browser URL field, like this:
4.9. Social Profiles
In this section the social profiles will be used on our custom widget "(EP) Social", so it is required to fill your current profiles before the widget is added on any sidebar.
4.10. Advanced settings
If you are a developer and you are actually using ACF to create Custom fields, you can enable ACF on your admin menu (by default is disabled).
5. Advanced Setup
5.1. How translate the theme
You can translate the template to any language that you want using the files located at breek/languages folder:
Translating Breek with POEDIT:
- Search for breek.pot (inside breek/languages folder).
- You can use POEdit to load this file.
- Click on Open you will see a dialog like this.
- Click on create new translation at the bottom of the application.
- Select the language that you want, for example: french.
- Use the translation field to make replacements.
- When you are ready, go to File -> Save as then save the file with your wordpress locale code inside breek/languages folder. Example: if you are working with a french wordpress installation your file name will be fr_FR.po
- Go to your server via FTP, and upload the language files into your theme (located at wp-content/themes/breek/languages).
5.2. Syntax Highlighter
Breek supports code highlighting via Prism Plugin: you can check the plugin documentation here.
If you want to highlight your code, you must always use
<pre class="language-X"><code></code></pre> tags, where X can be: html, css, js, php, etc.
Highlight HTML example:
Line numbers class is optional, so if you dont want numbered lines just use
Important: you must always use <pre><code>your code</code></pre> wrappers
Note: if you are using Gutenberg, just add the Custom HTML block and inside <pre><code> tags.
5.3. Child Theme
Breek includes a child theme to make the updates easier.
If you are planning to do several CSS changes, it is highly recommendable to do these changes inside a Child Theme, so you will never loose these changes.
The steps are pretty simple:
- Upload wp-breek.zip into wp-admin -> appearance.
- Activate Breek.
- After activated, you must upload wp-breek-child.zip into wp-admin -> appearance.
- You can edit whatever CSS you want or PHP into functions.php.
6. CSS Styles
This project uses the following .css files for development:
- assets/css/font-awesome.min.css - font awesome icons.
- assets/css/grids-ie.css - Unsemantic grids for IE.
- assets/css/jquery.magnific-popup.css - MagnificPopup jQuery Lightbox..
- assets/css/tooltipster.css - Main tooltipter assets.
- assets/css/prism.css - Syntax Highlighter styles.
- assets/scss - Main project styles, this folder includes: reset, grids, template style and responsive media queries.
In production mode we use the next minified CSS files:
- assets/dist/plugins.min.css - all external plugins in one large file used in the template.
- assets/dist/style.min.css- Main project styles minified and optimized.
Plugins and libraries
- jQuery - jQuery http://jquery.com
- assets/js/jquery.lazyload.js - LazyLoad for images http://jquery.eisbehr.de/lazy
- assets/js/jquery.sticky.js - Sticky menu http://labs.anthonygarand.com/sticky
- assets/js/jquery.sticky-sidebar.min.js - Sticky Sidebar https://github.com/abouolia/sticky-sidebar
- assets/js/jquery.magnific-popup.min.js - jQuery Lightbox http://dimsemenov.com/plugins/magnific-popup/
- assets/js/jflickrfeed.min.js - Flickr Feed http://www.newmediacampaigns.com/page/jquery-flickr-plugin
- assets/js/pace.min.js. - Minimalistic Loader http://github.hubspot.com/pace/docs/welcome/
- assets/js/jquery.tooltipster.min.js - Tooltip Utility http://iamceege.github.io/tooltipster/
- assets/js/scripts.js - This file will include all JS files and it will be compiled with Prepos 6.
- assets/dist/scripts.min.js - all external plugins and functions in one large file used in the template.
IMPORTANT: if you are a developer and you need to ADD JS changes, we recomment you to edit functions.js and use Prepos 6 to autocompile your code changes.
8. Theme Development
For example,If you want to do heavy changes to CSS, you must follow the next steps:
1.- Unzip wp-breek.zip (this is the template only file) and remember where is the folder location.
2.- Install the compiler, we recommend you to use Prepos 6, you can download it here.
3.- After installed you must see a window like this (just click continue trial):
3.-Click on "Add Project" on the left bottom side.
4.- Search for breek folder (where you already unziped the project) and search for "assets" folder.
5.- Click on config icon -> refresh, this will load Prepos 6 Config file inside theme, so everytime you save a SCSS or JS file, it will be minified and saved into breek/assets/dist folder.
6.- Open breek/assets/scss/ and add your changes, the most important CSS styles are inside base/_style.scss file for example, if you want to edit the main color, you can edit _settings.scss
On this screenshot we already changed $red variable to a dark blue color at line nº 22.
7.- After you save settings file, you will see a notification if there isn't any error:
8.- Zip Breek Folder and reupload into your Wordpress Installation.
8.1 How to remove minified scripts or css libraries
Sometimes you want to remove a specific library from our theme, the solution is pretty simple:
1.- Prepos 6 must be installed and prepos-6.config must be properly imported (check section number 8).
Removing this line, will disable prism syntax highlighter. After that just save your file and you will a success message (a green face).
3.- If you want to remove CSS libraries, just open /assets/scss/plugins.scss and remove all the @import line, for example:
That will remove prism CSS, after that, just save your file and you will see a success message.
This section will explain the basics concepts of optimization to get the highest score on Google Page Speed test.
9.1 Install Cache Plugin
As you know there are a lot of cache plugins available for Wordpress, but we will recommend you W3 Total Cache in this case, this plugin has a good sort of options and you can import a config file easily.
- Go to plugins sections
- Click Add new
- Search for W3 Total Cache and install it
- After activated you will see a new section Performance on your left sidebar.
- Click on Performance -> General Settings and go to the bottom of that page.
- You will se an import/export section, just click on Select File and search for w3-total-cache-config.json (this file is located on Demo Content folder after you unzip the full template from Themeforest)
- Finally you must enable theme optimization options.
9.2 Image Optimization
There is a custom field on every post where you can upload optimized images (compressed), so it is highly recommendable to fill that field with the sizes described below:
If you are using grid posts as home page, you must use 680x500px
If you are using classic posts as home page, you must use: 850x450px
There is a lot of recommeded tools to compress images, if you don't want to loss image quality, just skip this section.
Highest compression tool: Toolur
We tested several compression tools and toolur online, is one of the best if you want to get 0 errors on Google Insight.
- Compression method: C
- Image Quality: 70%
- Don't resize and don't enlarge images.
TinyPNG: good quality and weight balance
TinyPNG is one of the most used compressor in the web, has a very basic interface and you will lost almost 10 - 15% quality. Its is highly recommended if you want to optimize your images without loosing quality.
FileOptimizer: desktop APP
This application has the a good balance pretty closer like TinyPNG but as a desktop app.
The only one important thing, is to enable "allow lossy optimizations":
Upload an optimized avatar
Finally it is recommended to upload an optimized image as avatar, so you must click edit my profile and go to the bottom of that page:
The purpose is pretty simple, gravatar doesn't set and expiration time for resources and your avatar always loads externally. This will give an small speed bost to achieve better scores on Google.
10. Fonts used
By Font Awesome
If you have any questions, please use our profile contact form on Envato http://themeforest.net/user/estudiopatagon
In case you find any bug, issue or just having some problems with theme, use our ticket system: https://estudiopatagon.ticksy.com/