Overview

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:

Screencasts

Helpful visual video guides addressing common questions such as how to create minisites

FAQs

Answers to frequently asked questions including question that surfaced after the writing of this document

Credits

Licensing information about theme assets like images and fonts

Support Center

Where to get help if your issue is not addressed in any of the above resources

Contact Info

How to get in touch with us

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.

Getting Started

Requirements

• PHP 5.0+
• WordPress 3.8+
• cURL must be enabled on your web server (http://stackoverflow.com/questions/1347146/how-to-enable-curl-in-php-xampp)
• If you are using the social counts widget, file_get_contents() requires that you have allow_url_fopen turned on (http://www.php.net/manual/en/filesystem.configuration.php#ini.allow-url-fopen)
• If you have PHP version 5.3.9+ and you have more than 1,000 options posted in your theme options (this will rarely ever happen) you need to increase your max_input_vars setting on your web server (http://stackoverflow.com/questions/10303714/php-max-input-vars)

Installation

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:

1. WordPress Theme Installer
2. Manual FTP Upload

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:

1. Login to WordPress and go to Appearance >> Themes
2. Click the Install Themes tab at the top
3. Click the Upload link
4. Choose the theme .zip file on your computer that you downloaded from ThemeForest and click Install Now
5. The theme should now be available to activate in your list of themes

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:

1. Unzip the theme file that you downloaded from ThemeForest
2. Connect to your web server via FTP (contact your web host if you don’t know how to do this)
3. Navigate to your WordPress install and find the wp-content/ folder, and then the themes/ folder inside of that
4. Upload the implicit folder directly inside of the themes/ folder so that it exists in this location: /wp-content/themes/implicit
5. Login to WordPress and go to Appearance >> Themes
6. The theme should now be available to activate in your list of themes

Important The folder you install/upload should be called “implicit” 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 “Implicit-Theme” for instance. This could potentially cause problems or at the very least confusion later on.

Importing the Demo Content

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.

1. Import the content

• Go to Tools >> Import >> WordPress >> Choose File and select the implicit.xml file that is provided with your ThemeForest download.
• Click “Upload file and import”
• Select “Download and import file attachments” and click Submit (don’t make any author assignments, unless of course you want to reassign posts to existing authors).

2. Activate the theme

3. Install the settings (click the green button at the bottom of the Theme Options page)

AJAX Thumbnail Rebuild

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.

Code Structure

HTML

This theme is built using Bootstrap and is a fluid, full-width, 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 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 version 3.9. The general layout of the HTML code is as follows:

View Code

    
<div class="container-fluid no-padding">

	<div id="sticky-bar">

        <div class="row">
        
        	<div class="col-md-12">
    
        		...top sticky bar...
                
            </div>
        
        </div>
        
    </div>

</div>

<div class="after-header">

	<div class="container-fluid no-padding">
    
    	<div class="row no-margin">
        
        	<div class="col-md-12">
            
            	<div id="sticky-nav">
    
                    ...left sticky nav menu...
                    
                    <div class="after-nav">
                    
                    	<div id="headliner">
                        
                        	...headliner page builder panel...
                    
                    	</div>
                        
                        <div id="infinite-grid">
                        
                        	...infinite grid page builder panel...
                    
                    	</div>
                        
                        <div id="trending">
                        
                        	...trending page builder panel...
                    
                    	</div>
                        
                        [...additional user-specified builder panels...] 
                        
                        <div id="footer" class="container-fluid">
                        
                            <div class="row no-margin">
            
               					<div class="col-sm-4">
                                
                                	...footer column 1...
                                
                                </div>
                                
                                <div class="col-sm-4">
                                
                                	...footer column 2...
                                
                                </div>
                                
                                <div class="col-sm-4">
                                
                                	...footer column 3...
                                
                                </div>
                                
                            </div>
                        
                        </div>
                        
                         <div id="subfooter" class="container-fluid">
                        
                            <div class="row no-margin">
            
               					<div class="col-sm-6">
                                
                                	...subfooter left...
                                
                                </div>
                                
                                <div class="col-sm-6">
                                
                                	...subfooter right...
                                
                                </div>
                                
                            </div>
                        
                        </div>
                    
                    </div>
                    
                </div>
            
            </div> 
        
        </div>    
    
    </div>

</div>
   
    

CSS

The style scaffolding for this theme is provided by Bootstrap which enables all the responsive layouts and basic styling of most elements. The code for the bootstrap begins at the top of the style.css file, followed by the rest of the theme code. The responsive styles are at the end of the file, as well as the retina images.

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:

View Code

    
/*************************************************
begin bootstrap framework
*************************************************/
   
Bootstrap framework (minified)
 
/*************************************************
general fonts
*************************************************/

font declarations

/*************************************************
general utilities
*************************************************/

some css resets and utility classes

/*************************************************
ads
*************************************************/	

general ad styles

/*************************************************
sticky bar
*************************************************/	

the fixed sticky bar at the top of the page

/*************************************************
sticky nav
*************************************************/

the fixed sticky nav at the left of the page

/*************************************************
post sharing
*************************************************/

the addthis+ post sharing widgets

/*************************************************
bar headers
*************************************************/

the various page builder panel headers/labels

/*************************************************
sortbars
*************************************************/

styles for the various sort button control bars

/*************************************************
pagination
*************************************************/

the styles for the pagination

/*************************************************
icons and buttons
*************************************************/

common styles for all icons and buttons

/*************************************************
overlay panel formats
*************************************************/

styles that apply to all overlay post panels

/*************************************************
grid specific
*************************************************/

post loop grid formats

/*************************************************
blog specific
*************************************************/

post loop blog (longform) formats

/*************************************************
horizontal scroller
*************************************************/	

the horizontal scroller page builder panel

/*************************************************
trending slider
*************************************************/	

the trending slider page builder panel

/*************************************************
top ten builder panel
*************************************************/	

the top ten list page builder panel

/*************************************************
headliner
*************************************************/

the headliner builder panel

/*************************************************
connect bar
*************************************************/

the connect page builder panel

/*************************************************
utility menu bar
*************************************************/

the utility menu page builder panel

/*************************************************
widgets
*************************************************/

all sidebar widget panels

/*************************************************
footer
*************************************************/

all styles relating to both footer and subfooter

/*************************************************
single page content
*************************************************/

styles for any time a single page is being viewed

/*************************************************
author listing
*************************************************/

the author listing loop template page

/*************************************************
directory
*************************************************/

the directory template pages

/*************************************************
shortcodes and bootstrap overrides
*************************************************/

since this file is loaded after bootstrap, any specific overrides to the default bootstrap style is done here

/*************************************************
plugin compatibility
*************************************************/

some style tweaks are necessary to make BuddyPress and WooCommerce look good

/*************************************************
ratings
*************************************************/

general styles for whenever ratings appear anywhere in the theme

/*************************************************
rating meters
*************************************************/

the circular rating meters used throughout the theme

/*************************************************
jQuery rateit (stars)
*************************************************/

/*************************************************
jQuery slider (form toggle slider)
*************************************************/

/*************************************************
jQuery colorbox
*************************************************/

/*************************************************
jQuery smooth div scroll
*************************************************/

this is used by the top ten and horizontal scrollers

/*************************************************
font icons
*************************************************/	

the icon font set declarations

/*************************************************
print style
*************************************************/	

/*************************************************
browser specific compatibility
*************************************************/	

/*************************************************
retina
*************************************************/	

swaps out template images with 2x size for HiDPI displays

/*************************************************
responsive
*************************************************/	

responsive layout media queries

    
    

Tip Whenever you want to change the style of any part of the theme, use Chrome or Firefox 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.

jQuery

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_register_script('it-plugins', THEME_JS_URI . '/plugins.min.js', false, false, true);	
    wp_register_script('it-scripts', THEME_JS_URI . '/scripts.min.js', false, false, true);		
    wp_register_script('it-addthis', 'http://s7.addthis.com/js/300/addthis_widget.js#async=1', false, false, true);		
    
    #jquery
    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-effects-core');
    wp_enqueue_script('jquery-effects-slide');
    wp_enqueue_script('jquery-touch-punch');
    
    #other scripts
    wp_enqueue_script('it-plugins');
    wp_enqueue_script('it-scripts');
    wp_enqueue_script('it-addthis');			
     
    #wp ajax library
    wp_enqueue_script('itajax-request', THEME_URI . '/js/ajax.min.js', array( 'jquery' ));
    wp_localize_script('itajax-request', 'itAjax', array('ajaxurl' => admin_url( 'admin-ajax.php' )));	
    
    
    wp_register_script('it-plugins', THEME_JS_URI . '/plugins.min.js', false, false, true);	   
    

After jQuery and jQuery UI are loaded, the theme then loads the theme’s plugin-specific javascript libraries (including Bootstrap) contained in the js/plugins.min.js file. There is an unminified human-readable version in the same folder called plugins.js. Then the custom javascript file used by the theme js/scripts.min.js.js is called, which contains all of the custom javascript used by the theme. There is also an unminified version of this file in the same folder called scripts.js. After that, the AddThis+ script is called. Lastly the theme’s AJAX javascript is loaded which is contained in the js/ajax.min.js file. There is an unminified human-readable version in the same folder called ajax.js. Here’s a list of all of the javascript plugins contained in the plugins file:

Bootstrap

All Bootstrap related javascript

Superfish

Enables smooth menu drop down animations and provides some style helpers to menus

SmoothDivScroll

Powers the top ten and horizontal scroller sliders

Fitvids

Enables videos embedded within the post loop to be responsive

Flickr

Provides the functionality of the Flickr photos widget

RateIt

Provides the functionality of the star rating mouseover and rating click functions

Resize

Detects when the browser is resized and used for equal height columns functions

Colorbox

Fancy lightbox effect for featured images and inserted media/galleries

There are a few additional javascript functions contained in the inc/scripts.php file. The reason for this is because within a few 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. This file is loaded in the footer so it does not have any negative performance impact, and it is kept as minimal as possible with most of the scripts kept in the js/scripts.min.js file. When you open the file to edit it you’ll see normal javascript code with a few PHP variables dispersed throughout.

PHP

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 various page builder templates where the code loops through the theme options and then loads the respective file. An example is in the index.php file:

<?php get_header(); // show header ?>

<?php 
#loop through content panels
$builder = it_get_setting('builder');
if(!empty($builder)) {
	foreach($builder as $component) {
		it_get_template_part($component);	
	}
} else {
	it_get_template_part('portholes');
} 
?>

<?php get_footer(); // show footer ?>
    

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 grid style loop code found in the grid-paged.php file within the inc/ folder which is used in various places within the theme. Here is a list of all page builder-enabled template files:

• 404.php
• archive.php
• buddypress.php
• index.php
• page.php
• search.php
• single.php
• template-authors.php
• template-directory.php

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 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:

View File Structure

Design Assets

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 category 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.

Troubleshooting & Tips

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 setting up category colors/icons 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.

View FAQs

Theme Tips

• Names of rating criteria cannot match names of details or awards/badges (or “video” for featured video)
• You cannot use the word “content” for any of your rating criteria or details since that is a reserved WordPress word
• The grid infinite and grid paged builder panels do not show sticky posts first because of how WordPress calculates posts per page with sticky posts – it would offset the flow of the grid if sticky posts are on subsequent pages. See here for more info.
• Number of user ratings displayed on single review articles doesn’t update live via AJAX (and shouldn’t since it’s an average)
• When a comment is deleted, the post custom meta fields are not deleted with it. This means if a user rates and/or submits pros/cons for an article via the comments and then their comment gets deleted, that user cannot post another comment with a rating and/or pros/cons again because that information still exists (but they can submit a standard comment)
• If an article has never been liked it will not show up when filtering for likes, but if an article has been liked once and then unliked back to 0 likes (this will probably rarely happen) it will show up when filtering for likes. However, it will show up correctly at the end of the list with 0 likes. The discrepancy is worth note because it can be confusing if some posts with 0 likes display and some with 0 likes don’t display.
• When adding carousel short codes to posts, do not use any left or right alignment on the main sliding image (you should only use block-level elements in carousels for them to function correctly). Image can be any size and will be responsively scaled down, it just can’t ahve alignright or alignleft classes.
• Longform posts are not able to display a sidebar even if you have chosen to show a sidebar for the post.
• To get images to expand beyond the left and right alignment of the main content on longform posts (like the demo) you need to set the alignment of the inserted image to “center”.
• Any page with the Directory template assigned will not be able to display a sidebar even if you set it to display in the page options.

“Theme Check” Explanation

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:

No reference to add_theme_support( ‘custom-header’, $args )

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.

Found base64_encode

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.

file_get_contents was found, curl_init was found, curl_exec was found, and shell_exec was found

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.

Possible hard-coded links were found

Explanation: Yes, there are a few places where hard-coded links are purposefully present, including the credits link in the footer to Google Fonts and the demo panel link to the theme features.

Performance & Optimization

We have optimized all of the images used in our live preview using the EWWW Image Optimizer plugin which greatly reduces filesizes of images without sacrificing quality. We also run W3 Total Cache on our demo (only page and browser caching, not database or object caching) to make it as fast as possible, but this is not a requirement as the theme is very fast even without it. 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 (i.e. “Next Level” adjustments), 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 Elto or Envato Studio for great developers.

Our live demo, which is completely loaded with just about as much content and images as you can have on a page, gets an 82/100 performance grade, and that’s without any caching plugins active. The load time is ~4-5 seconds and the page size is ~2.2 MB. These can be even further reduced by displaying less content on the page – it just depends on your individual needs. With caching plugins active these numbers will improve even more.

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:

Combine external JavaScript & Make Fewer HTTP requests

Explanation: The theme only uses 4 javascript files, one for Bootstrap, one for the theme’s jQuery plugins, one for the theme’s custom javascript, and one for the theme’s AJAX requests. 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, plugins, scripts, and AJAX javascript files are not combined is to make it easier to update Bootstrap in the future, and serving 4 js files instead of 1 has such a negligible impact that we are not worried about it. Besides, they are all compressed and minified.

Remove query strings from static resources

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 nuance).

Reduce the number of DOM elements

Explanation: Just add less page builder panels to the page to get less DOM elements. You have complete control over how simple or complex your site is because of how easy it is to use the theme’s page builders.

Combine images using CSS sprites

Explanation: This only applies to images that are available for users to upload one by one in the theme options, such as awards, badges, and minisite icons. We use them as background images for performance reasons, and that in turn trips the flags in some of the performance testing tools even though it’s irrelevant.

Serve resources from a consistent URL

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 third-party vendor-specific nuance).

Specify image dimensions

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 third-party vendor-specific nuance). All image dimensions are specified correctly within the theme code.

Use a Content Delivery Network (CDN)

Explanation: This is a “next level” site enhancement and is irrelevent to the theme. It is completed up to you whether or not you choose to use a CDN, and doing so requires you to set it up on your web server, not within the theme files.

Compress components with gzip

Explanation: This is a “next level” site enhancement and is irrelevent to the theme. It is completely up to you whether or not you choose to use compression for your site, and doing so requires you to set it up on your web server, not within the theme files.

Migrating from previous IndustrialThemes minisite-enabled themes

If you are running a previous IndustrialThemes theme that allows minisite creation and want to upgrade to this theme, the biggest thing you need to take into account is that you will need to convert your existing minisite articles back into standard WordPress posts. You will not lose your articles, but you will need to open each article and re-apply your editor ratings, and you will also lose your existing user ratings, so be very cautious before migrating themes. Details will be retained from the previous theme, as well as likes, views, and comments. If you were not using minisites you can disregard this.

1. Before you activate this theme, install the Convert Post Types plugin
   Tip if you forget this step before installing this theme, you can revert back to the previous theme and still access your minisites
2. Create categories to correspond with each of your minisites, for instance if you have a “Movies” minisite then create a “Movies” category. The names don’t have to match, it’s your own preference on how you organize your content, this is just a recommendation.
3. Go to Tools >> Convert Post Types
4. Select the minisite in the “Convert From…” drop down and select post in the “Convert To…” drop down
5. Select the corresponding category that you created above in the Categories select list
6. Click Convert >> which will convert the post types
7. Rinse and repeat for each minisite
8. Activate this theme
9. Go to Settings >> Permalinks and set your permalink structure to /%category%/%postname%/
   Important make sure if you have a subcategory that you also assign the parent category to the post or else it will put both the parent category and the subcategory in the URL causing it not to match the previous URL for the article
10. Go to Theme Options and create all of your previous Details and Rating Criteria (make sure they are named the same as before)
11. Open each post and re-apply the editor ratings

Credits

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:

View Credits