We want you to be completely satisfied with this theme. If you have any questions that go beyond the scope of this documentation, please refer to our support portal for the most up-to-date resources.
We've taken careful measures and a lot of time to document this theme fully. Please refer to the support portal above for very helpful resources that expand upon the helpful information in this documentation, including:
The following sections explain everything there is to know about this theme, from installing it, to importing demo content, to modifying theme files, to setting up content carousels, to troubleshooting, to helpful tips and beyond! Please let us know if we missed anything or anything is inaccurate in this documentation - we would greatly appreciate it.
ThemeForest provides two different theme files to download. You need only download the installable theme file unless you want additional reference material such as layered PSD designs or PNG components. Once you've downloaded the installable theme zip file, there are two ways to install it in your WordPress install:
We usually recommend the FTP method since it cuts out the middleman (WordPress uploader code) and is the most straightforward way to do it. However some prefer directly installing in WordPress for convenience. To use the WordPress installer:
If you run into any issues it is possible that a plugin or internal component is causing issues, and sometimes max upload filesize limits imposed by web hosts can also wreak havoc on larger themes. Whatever the cause, if you want to manually upload the theme via FTP:
Important The folder you install/upload should be called "flavor" and contain the style.css
file directly inside of it (this is the file that tells WordPress the name of the theme). Do not install/upload any other folder, such as "Flavor-Theme" for instance. This will cause the theme to break and give you problems. If you do happen to have already uploaded the wrong folder you can likely fix the issue without having to re-upload or move the theme. To do so, open the ajax.php
file inside the functions folder and adjust the wordpress location variable on line 7: $wordpress_location = "../../../../wp-load.php";
. For instance, if you uploaded the Flavor-Theme folder containing the flavor folder instead of just the flavor folder itself, you would need to add one extra ../
to the string since it's technically one folder level deeper, so it would become: $wordpress_location = "../../../../../wp-load.php";
. However note that using any other folder besides the flavor folder is untested and highly discouraged.
We have made recreating the demo site easy with a 3-step process. This process assumes you have a blank WordPress install with no content.
Because the demo settings are required to be loaded before importing the XML file, you will need to make a few more selections.
If you are installing this theme on a brand new blank WordPress installation, you can skip this section. If you already have articles with featured images in your WordPress site before you install the theme, you will need to resize your featured images to fit the dimensions of all the thumbnail areas. To easily and quickly do this, install the AJAX Thumbnail Rebuild plugin, and then go to Tools >> Rebuild Thumbnails and run it once. After the first time you run it, you will not have to run it again since any images uploaded after you have installed the theme will automatically be sized correctly. It only applies to images uploaded to your media library before you install the theme.
Tip If you have a lot of images it might take a while to complete - just let it work its magic and if for some reason it doesn't finish the first time feel free to run it again as many times as you want - it won't hurt anything or create any duplicate images.
This theme is built using Bootstrap and is an 1140px-wide responsive layout. All of the code is spaced, indented, commented in-line, and semantically written to make it as easy as possible to edit and customize to your particular needs. The theme is built with valid HTML5 code and has been tested to be compatible with Chrome, Firefox, Opera, Safari, IE9, and IE10, and was also tested on an iPad using Chrome and Safari as well as an iPhone. The theme is HiDPI/retina compatible. It was built and tested with WordPress versions 3.5 and 3.6. The general layout of the HTML code is as follows:
<div class="container-fluid" id="top-menu-wrapper"> <div class="row-fluid"> <div class="floatleft" id="top-menu"> ...top menu bar... </div> </div> </div> <div class="container"> <div id="trending-row"> <div id="trending-wrapper"> <div class="row"> <div id="trending"> ...trending carousel... </div> </div> </div> </div> <div id="logo-bar"> <div class="row"> <div id="logo" class="span4"> ...logo... </div> <div id="sizzlin-wrapper" class="span8"> ...sizzlin' carousel... </div> </div> </div> <div class="row"> <div class="span12"> <div id="main-menu-wrapper"> ...main menu... </div> </div> </div> <div class="row"> <div class="span12"> <div id="featured-bar-wrapper"> ...featured carousel and widgets... </div> </div> </div> <div class="row"> <div class="span12" id="top-ten"> ...top ten carousel... </div> </div> <div class="row post-loop"> <div class="span12"> <div class="sortbar"> <div class="row"> <div class="span12"> ...sortbar buttons... </div> </div> </div> <div class="content-wrapper"> <div class="row"> <div class="span12"> <div class="main-loop"> ...post loop... </div> <div id="sidebar-wrapper" class="sidebar-right"> ...sidebar... </div> </div> </div> </div> </div> </div> </div> <div id="footer-wrapper"> <div class="container"> <div id="footer"> <div class="row"> ...footer widgets... </div> </div> </div> </div>
The style scaffolding for this theme is provided by Bootstrap which enables all the responsive layouts and basic styling of most elements. The bootstrap.css
file which is in the css/ folder is loaded by the theme first, followed by the theme's main stylesheet: style.css
in the main folder. Then lastly the Internet Explorer specific stylesheets are loaded which are in the css/ folder called ie9.css
and ie10.css
. You'll notice another file in the css/ folder called editor-style.css
which is only loaded in the admin panel and is used to style the content editor box.
Since this theme is both responsive and HiDPI/retina ready, it has a fairly complex stylesheet and makes use of media queries to serve specific styles for specific displays. Also, any Bootstrap style overrides that are necessary for the theme are also within the style.css file. We have provided a blueprint of the stylesheet so that you can more easily find what you're looking for:
/************************************************* general fonts *************************************************/ font declarations /************************************************* general utilities *************************************************/ some css resets and utility classes /************************************************* top menu *************************************************/ the styles for the top menu /************************************************* generic post listing *************************************************/ some styles that apply to all post listings /************************************************* trending *************************************************/ the trending carousel /************************************************* logo bar *************************************************/ the logo area including sizzlin carousel /************************************************* main menu *************************************************/ the styles for the main and sub menus /************************************************* featured bar *************************************************/ the featured carousel and right widgets /************************************************* top ten bar *************************************************/ the top ten carousel and right social widgets /************************************************* post loop *************************************************/ the grid and list view main post loop layouts /************************************************* page content *************************************************/ single review, post, and page views /************************************************* directory listing *************************************************/ minisite directory styles /************************************************* sidebar *************************************************/ all the sidebar widgets styles /************************************************* footer *************************************************/ footer widgets styles /************************************************* general widget style *************************************************/ some styles that apply to all widgets in all areas /************************************************* shortcodes and Bootstrap overrides *************************************************/ shortcode styles and bootstrap overrides /************************************************* ratings *************************************************/ styles for the various rating methods /************************************************* jQuery rateit (stars) *************************************************/ /************************************************* jQuery selectBox *************************************************/ /************************************************* jQuery slider (form toggle slider) *************************************************/ /************************************************* jQuery simplyScroll2 *************************************************/ /************************************************* jQuery revolution slider *************************************************/ styles for all the various jquery plugins used by the theme, combined into the style.css file instead of separated out into their own files for faster site loading /************************************************* responsive declarations *************************************************/ starts with largest desktop size and works down to mobile portrait layouts /************************************************* general retina declarations for all layouts *************************************************/ comes after responsive declarations because it needs to override them in some cases /************************************************* font icons *************************************************/ the icon font set declarations /************************************************* demo purposes only *************************************************/ styles for the demo settings panel used on the live demo
Tip Whenever you want to change the style of any part of the theme, use Chrome or Firefox+Firebug and right click on the area you want to change and choose Inspect Element. That will bring up a console that shows exactly which lines of CSS in exactly which files affect that element so that you can go in and change the style how you see fit.
This theme enqueues WordPress's built-in javascript libraries correctly using the wp_enqueue_script
function and does not make any manual calls to jQuery or jQuery UI libraries. Here are the scripts that are enqueued:
wp_enqueue_script("jquery"); wp_enqueue_script('jquery-ui-core'); wp_enqueue_script('jquery-ui-tabs'); wp_enqueue_script('jquery-ui-widget'); wp_enqueue_script('jquery-ui-slider'); wp_enqueue_script('jquery-ui-effects-core'); #the following are only loaded if demo settings panel is enabled wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 ); wp_enqueue_script( 'wp-color-picker', admin_url( 'js/color-picker.min.js' ), array( 'iris' ), false, 1 );
After jQuery and jQuery UI are loaded, the theme then loads the Bootstrap necessary javascript library contained in the bootstrap.js
file within the js/ folder. Finally, there are several jQuery plugins necessary for various UI elements throughout the theme (such as carousel animations and Twitter feeds for example), and they are contained within the plugins.js
file in the js/ folder. Here's a list of the plugins contained in the plugins file:
Important The theme actually uses the minified version of both files in the js/ folder for performance reasons: bootstrap.min.js
and plugins.min.js
. We have provided the unminified versions for your convenience. You'll notice even in the unminified version of the plugins.js
some of the various plugins are still minified within the file, but at least they are all separated out and commented so that you can selectively remove one if needed.
You'll notice there is no custom.js file or or any other javascript file that has all the theme-specific javascript code, and that's because all of this is contained within two PHP files called scripts.php
and scripts-ajax.php
within the inc/ folder. The reason for this is because within a lot of the javascript functions it is necessary to access a theme setting or other PHP variable, so the page is actually a PHP file that outputs javascript. These files are loaded in the footer so they do not have any negative performance impact. When you open each of the files to edit them you'll see normal javascript code with some PHP variables dispersed throughout.
The scripts.php
file contains all the document.ready javascript code and custom functions used by the theme. It calls all of the previously mentioned jQuery plugins, such as superfish and slider revolution. After the document.ready area comes the window.load section which does more of the same, just during a different time of page load. Finally at the bottom you'll notice a block of javascript that is only loaded if you have the demo settings panel active, and it deals with the custom functions necessary to change theme colors by interacting with the settings panel for instance.
The scripts-ajax.php
file contains all of the AJAX functions needed for the live post sorting and filtering in the post loop and widget areas. It also contains the AJAX for live user ratings and like functionality. This file is for more advanced users and will not be explained here since it shouldn't need to be updated, but in case you need to do so the file is commented, indented, spaced, and semantically written for your convenience.
The framework.php
file, which is called by the standard functions.php
file, sets up all the theme functions and classes. Within this file is the main IndustrialThemes class that builds out theme constant variables, functions files (found inside the functions/ folder), theme actions/filters/supports methods, and localization.
There are two main folders containing all of the PHP files used by the theme, the inc/ folder and the functions/ folder. The inc/ folder contains all of the files that are called by the theme files using the it_get_template_part()
function. The argument within the function matches the filename of the file to load within the inc/ folder. For instance, this it_get_template_part('trending')
will load the trending.php
file within the inc/ folder. A good example of this is the theme's header.php
file:
<!DOCTYPE HTML> <html <?php language_attributes(); ?>> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php if (is_search()) { ?> <meta name="robots" content="noindex, nofollow" /> <?php } ?> <title><?php wp_title( '|', true, 'right' );?></title> <?php do_action('it_head'); ?> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> <?php echo it_get_setting("analytics_code"); // google analytics code ?> </head> <body <?php body_class('it-background'); ?>> <div id="ajax-error"></div> <?php it_get_template_part('menu-top'); # the fluid top menu ?> <div class="container"> <div id="bg-overlay" class="row"><div class="span12"></div></div> <?php it_get_template_part('trending'); # trending carousel ?> <?php it_get_template_part('logo-bar'); # header bar containing logo and sizzlin slider ?> <?php it_get_template_part('menu-main'); # main menu ?> <?php it_get_template_part('featured'); # featured bar ?> <?php it_get_template_part('top-ten'); # top 10 bar ?>
As you can see this allows a very clean set of standard WordPress theme framework files and keeps all the code organized into the various components. In fact, almost every PHP file you open follows suit and does not contain very much code but instead calls a file within the inc/ folder. This is done for the purposes of easily reusing large blocks of code, such as the main post loop code found in the post-loop.php
file within the inc/ folder. You'll notice the files that call this particular file (all of which are almost identical) are:
A similar scenario exists for the page-content.php
file within the inc/ folder, called by:
The heart of the theme is within the functions/ folder and these files are called directly within the IndustrialThemes class from the framework.php
file. This includes files that create the core functionality, review and minisite functionality, widgets and shortcodes, and admin functionality for the theme options page, page and post meta boxes, and general administrative and troubleshooting utilities. There are numerous files that make up the framework of the theme, so we have listed them all out below along with a brief description of what each one does:
This theme contains both a compressed, non-layered version and a layered PNG version of every template image. If you want to edit one of the images within the theme's images/ folder you will notice that if you open it in a graphics editor it is just a flattened bitmap. Instead, look inside the PNG folder which comes inside of your main theme download folder from ThemeForest and find the corresponding image. You can open it in a graphics editor and make custom changes since it is a fully layered PNG version of the image. If you cannot find a corresponding version of the image you're trying to edit please contact support and let us know so we can provide you with the image.
Addionally we have made available the layered design PNGs and PSDs for your convenience. These files are contained within either the PNG or the PSD folder (which is in the same location as the PNG folder mentioned above). You can open any of the PSDs in a capable graphics editor (such as Photoshop) and quickly find any part of the theme you're looking for. Alternatively you can open the corresponding PNG file in a capable graphics editor (such as Fireworks) and get the same access as the PSD version. This theme was designed using Fireworks and PNGs as opposed to Photoshop and PSDs, so the best option would be to edit the PNGs since they were converted retroactively into PSDs and not the other way around.
These are the design files provided (they are named the same in both the PNG and PSD folders):
Tip If you cannot find a corresponding image in the PNG folder it likely means there is no layered version available, such as for minisite icons or very simple one-color graphical elements. However just to be sure we haven't missed it, feel free to contact us and ask about it.
Using the theme is actually pretty self-evident, and whenever there is any information that needs to be conveyed you can find it by hovering over the help icon to the right of each setting in the theme options and also in the post and page meta box options. We have also created screecasts that detail step by step how to accomplish common theme tasks, such as creating a minisite or using the shortcode generator. There are several additional helpful pieces of information that you may come across which are detailed below. Further questions that come up after the theme has been published will be added to the FAQs.
If you run the Theme Check plugin, which is a requirement for submitting themes to ThemeForest and the WordPress plugin directory, you'll notice some warnings/errors that warrant explanation. Here is a list of the warning messages that occur and the explanation as to why each of them exists:
Explanation: The theme does not support using a custom image for the header. You can use a custom logo and a custom background, but due to the nature of the theme layout there really isn't a container for a header-specific image.
Explanation: This is needed for serializing the theme options in order for users to be able to export and import their theme options. There is no malicious code or file operations and it is purely for theme settings importing/exporting purposes and only available to the site admin.
Explanation: Required by the functions in the widget that displays Twitter, Facebook, and Google+ social counts. This is the standard way of obtaining this information and interacting with the social media vendor APIs and there is no malicious code or file operations happening.
We use W3 Total Cache on our live preview demo, which is a great web performance tool that provides lots of caching options. We have also optimized all of the images used in our live preview using the WP Smush.it plugin which greatly reduces filesizes of images without sacrificing quality. Other than these two plugins, we are running the stock theme as it was built for performance. For instance, icon fonts are used instead of icon images which provides two benefits: performance and HiDPI/retina capability.
We know it's important that your site is as fast as possible, which is why we've designed the theme to be as fast as possible. However if you test the theme using page speed metric sites like Pingdom and GTMetrix you'll always see room for improvement. It's important to note that not all site performance measures can be accomplished purely in the code - a lot of it has to do with web server settings, external assets like images, and third-party code. To further fine-tune the speed of your site we recommend following the techniques described in the page speed testers, and if you need professional expertise we recommend FreelanceSwitch.com for great developers.
We have extensively tested the theme using various page speed metric sites and fine-tuned it as much as we possibly could before we released it. Here is an itemized list of common recommendations we came across during our testing, along with our explanation of precisely why the issue is either irrelevant to the actual theme code or why we chose not to implement it:
Explanation: The theme only uses 2 javascript files, one for Bootstrap and one for the theme's jQuery plugins. The rest of the files are enqueued correctly and via best practices from WordPress's internal js library and thus cannot be combined. The reason the Bootstrap and the plugins javascript files are not combined is to make it easier to update Bootstrap in the future, and serving two js files instead of one has such a negligible impact that we are not worried about it.
Explanation: This is again referring to the javascript imported directly from within WordPress's internal libraries, and WordPress requires that querystrings be used in the enqueueing functions (in other words, this is not a theme issue but rather an inherent WordPress issue).
Explanation: The main featured slider is fully responsive, so the largest size image that is needed for all responsive layouts is used for the slider image, and sometimes the smaller (scaled) size is shown depending on which responsive layout you're on. For instance, with the smallest featured slider layout, the largest responsive layout (large desktop) actually doesn't show the largest image - rather the second largest responsive layout (small desktop) does because it hides one of the widget columns to the right of the slider and displays a slightly larger overall slider, which causes page speed metric testing tools (which don't know this information) to make an irrelevant recommendation.
Explanation: Because of the nature of how robust and feature-rich the theme is, there is simply no way to reduce the number of DOM elements. If you want less DOM elements, you should use a "less" theme :)
Explanation: This is one area that could probably be improved, but the ratio of performance increase versus time required to implement was not deemed to be worth the cost.
Explanation: This is caused by Facebook integration within the social widgets and there is nothing to be done on the theme's end (in other words, this is not a theme issue but rather an inherent Facebook issue).
Explanation: The Pinterest widget displays images without image dimensions. Just don't use it and you won't have this issue. There's nothing that can be done on the theme's end (in other words, this is not a theme issue but rather an inherent Pinterest issue). All image dimensions are specified correctly within the theme code.
We tried to make the upgrading process as simple as possible if you are currently running one of our previous themes like Made or SwagMag. However since this theme is part of a brand new IndustrialThemes framework, which is a complete rewrite of the entire codebase and existing framework, some work is required to upgrade your site to be able to run this theme. Upgrading from SwagMag to Made was simple because they were built on the exact same framework, but not so with this theme. The good news is we are planning on releasing several themes on this new framework, which means that upgrading from this theme to future themes will be a walk in the park.
Can you upgrade? Short answer: absolutely. Long answer: you need to carefully follow the steps listed in this guide to upgrade your site, and it's going to require some effort and a bit of time on your part, but in the long run we think it's totally worth it. This theme is so much more powerful than anything we have created so far that there is almost no comparison.
So, how to upgrade? We ran several simulations and performed lots of mock upgrades just to see what all is required, and we've settled on this guide as a pretty solid set of steps. If you don't understand something or if you experience some sort of error or catch a bug in the process, please let us know via our support center.
Important Make a backup of your site before you perform these steps! You never know what could go wrong and it's always a good idea to make a full backup before you perform any major changes to your site (a full backup means your WordPress database and your site files). We are not responsible for loss of data or content.
Tip We recommend creating a copy of your site in another location on your web server, like within a test subfolder that you create. That way you can play around with the upgrade process without worrying about your live site going down or breaking something and having to restore a backup. Once you get your site all setup how you want it in your test install, you can then copy it back over on top of your live site without having to worry about down time. This can be somewhat involved and is not something we'll explain here since it's a very common issue and there's lots of documentation out there already on the subject. Start with the official Codex article about moving WordPress and then look at the link at the bottom of the article under "Additional Information", specifically How to move WordPress site to another server with zero downtime which further points to an available plugin called ManageWP.
So as you can see, the reviews themselves become available and visible pretty much immediately. The tweaking and fixing really comes into play to match up all the details of the reviews.
All external assets used by the theme have been bought and paid for or are free for commercial use. We have taken careful strides to make sure we attribute every asset to its creator and owner even if attribution is not required. In order to keep this list updated easily and contained in just one place, we have created a section of the support center purely for housing credit/copyright/licensing information. Please refer to that page for credits: