Documentation

Overview

Thanks for choosing Industrial Themes!

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.

Support Portal

Explicit documentation by Industrial Themes, LLC v1.0
Created 2/4/2014
support@industrialthemes.com

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 explicit folder directly inside of the themes/ folder so that it exists in this location: /wp-content/themes/explicit
  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 “explicit” 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 “Explicit-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 explicit.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)

Notes:

  • It is recommended to delete the default “Sample Post” blog post that WordPress automatically creates for new installs (you can likewise delete the “Sample Page”)
  • For your reference, the demo install has 5 posts per page in Settings >> Reading >> “Blog pages show at most” so feel free to set yours to the same number (optional)
  • Your sample users will not have bios or profile fields filled out because WordPress doesn’t include that info when it imports the authors, so you’ll have to add that data. You’ll likely be deleting them and replacing them with your own users anyway (or assigning all posts to yourself as admin) so it doesn’t matter much.
  • The images used in the live preview were purchased for demonstration purposes and are licensed correctly. The demo XML contains placeholder images that you can replace with your own images. Demo images licensing info is located here (click the images tab)

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 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 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.8. The general layout of the HTML code is as follows:

    
<div id="section-menu-mobile">

	...jquery-generated section slide out mobile menu...

</div>

<nav id="sticky-menu">

	...jquery-generated sticky slide out mobile menu...

</div>

<div class="mmpage">

    <div class="container">
    
        <div id="header">
        
            <div class="row">
            
                ...theme header with logo, ad, and social badges...
            
            </div>
        
        </div>
    
    </div>
    
    <div class="container">
    
        <div id="sticky-bar">
        
            <div class="row">
            
                ...fixed sticky bar containing menus and search...
            
            </div>
        
        </div>
    
    </div>
    
    <div class="after-header">
    
        <div class="container">
        
            <div class="row" id="[page-builder-specific-id]">
            
                ...page builder specific code...
            
            </div>
        
        </div>  
    
        <div class="container">
        
            <div class="row" id="[page-builder-specific-id]">
            
                ...page builder specific code...
            
            </div>
        
        </div> 
    
    	[...user-specified page builder panels...]          
    
    </div>    
    
    <div id="footer-wrapper">
    
        <div class="container">
        
            <div id="footer">
            
                <div class="row">
                
                    ...footer widgets...
                
                </div>
            
            </div>
        
        </div>
    
    </div> 
    
    <div id="subfooter-wrapper">
    
        <div class="container">
        
            <div id="subfooter">
            
                <div class="row">
                
                    ...subfooter content...
                
                </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 split out into the css/responsive.css file because responsiveness is able to be disabled via the theme options which requires the declarations to be in a separate file (which is selectively included based on the theme options. The css/bootstrap.css file contains the unminified version of the Bootstrap code if you need it. You’ll notice another file called css/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:

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

font declarations

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

some css resets and utility classes

/*************************************************
logo bar
*************************************************/	

the logo area including header ad

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

general ad styles

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

the fixed style bar containing menus and search

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

common styles for all bar and widget headers

/*************************************************
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

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

the utility menu page builder

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

the circular rating meters used throughout the theme

/*************************************************
portholes
*************************************************/	

the box overlay posts area

/*************************************************
general article listings
*************************************************/	

common styles for all article loops

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

the headliner page builder panel

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

the connect page builder panel

/*************************************************
explicit
*************************************************/

the explicit page builder panel

/*************************************************
trending
*************************************************/

the trending page builder panel

/*************************************************
top ten
*************************************************/

the top ten page builder panel

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

all sidebar widget panels

/*************************************************
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

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

all styles relating to both footer and subfooter

/*************************************************
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

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

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

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

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

this is used by the top ten and explicit scrollers

/*************************************************
jQuery master slider
*************************************************/

this is used by the hero slider

/*************************************************
jQuery mmenu
*************************************************/

the mobile slide-out menu style

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

the icon font set declarations

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

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

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

swaps out template images with 2x size for HiDPI displays

    
    

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.

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);	
		
    #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('it-plugins');			
     
    #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' )));	
    

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. 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 explicit 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
mmenu
The mobile slide-out javascript menus
Master Slider
The responsive jQuery large hero carousel
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

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 the inc/scripts.php file. 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. This file is loaded in the footer so it does not have any negative performance impact. 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:

  • ajax.php called by the js/ajax.js file, contains query setup for the various post loops that are AJAX-enabled
  • core.php all core functions used throughout the theme, such as enqueueing scripts, utility functions like getting a page ID from a page slug, and encoding/decoding functions for the theme settings import/export feature in the advanced theme options panel
  • loop.php takes a location variable and returns markup for post display within any loop in the theme, including widgets
  • options.php utility functions not used by default, only included for debugging/setup/troubleshooting
  • reviews.php all functions that present markup for use in review functionality
  • theme.php all functions the present markup for use in general theme layouts
  • shortcodes the folder containing all of the shortcode classes
    • _hidden.php contains helper functions for the column shortcodes
    • alerts.php Bootstrap alert boxes
    • buttons.php Bootstrap buttons
    • carousel.php Bootstrap carousel
    • icons.php shortcode to display the various font icons
    • jumbotron.php Bootstrap jumbotron
    • labels.php Bootstrap labels
    • layouts.php shortcode to display the various column layouts
    • lists.php shortcode to display the fancy image lists
    • miscellaneous.php various minor utility shortcodes such as dividers and spans
    • modal.php Bootstrap modal dialog box
    • popovers.php Bootstrap popovers
    • progress.php Bootstrap progress bars
    • quotes.php Bootstrap blockquotes
    • section.php Creates contents menu break points
    • signoffs.php shortcode to display either custom or pre-defined signoff boxes
    • table.php Bootstrap tables
    • tabs.php Bootstrap tabs
    • toggles.php Bootstrap toggles and accordions
    • tooltips.php Bootstrap tooltips
    • video.php shortcode to easily embed Youtube and Vimeo videos
  • widgets the folder containing all of the widget classes
    • widget-latest-articles.php displays latest articles from specified categories
    • widget-list-paged.php displays a list of articles with sorting and pagination
    • widget-reviews.php displays list of latest reviews
    • widget-sections.php displays tabs of specified category sections
    • widget-social-counts.php displays number of Twitter followers, Facebook fans, and Google+ connections
    • widget-social-tabs.php displays various social network profiles in a tab format
    • widget-top-reviewed.php displays top reviewed from various minisites for a certain timeframe
    • widget-top-ten.php widget version of the top ten carousel
    • widget-trending.php widget version of the trending carousel
  • admin
    • admin.php the framework of the admin panel, creates the itAdmin class containing file includes, actions, filters, theme supports, and localization
    • core.php all core functions used throughout the admin panel including AJAX messages, importing and exporting functions, demo settings encoded code strings, and arrays of available fonts and icons
    • it-options.php creates arrays of all options in the theme options admin panel
    • meta-awards.php creates options that appear in the awards meta box on post edit screens
    • meta-badges.php creates options that appear in the badges meta box on post edit screens
    • meta-details.php creates options that appear in the details meta box on post edit screens
    • meta-directory.php creates options that appear in the directory meta box on page edit screens
    • meta-page.php creates options that appear for all page edit screens
    • meta-post.php creates options that appear for all post edit screens
    • meta-reactions.php creates options that appear in the reactions meta box on post edit screens
    • meta-reset.php creates options that appear in the reset meta box on post edit screens
    • meta-review.php creates options that appear in the review meta box on post edit screens
    • metaboxes-generator.php the class that creates the metaboxes
    • option-generator.php the class that all options use to create theme options
    • scripts.php style and script enqueueing for the admin area
    • shortcode-generator.php class that takes the shortcode files and turns them into usable objects

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

  • archive.png/.psd design for a standard archive listing page
  • homepage.png/.psd design for the main front page of the theme
  • single.png/.psd design for a single review page

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.
  • If you see the following notice in your javascript console, you can ignore it (comes from the jQuery mmenu plugin, not the theme itself): Console error msg: "body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode..."
  • 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.
  • If any of the social counts ever don’t display and you’ve double-checked that your settings are right, it’s because of an outage by the vendor (happens from time to time and will fix itself automatically as soon as the vendor addresses the outage.)
  • 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.

“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 WP Smush.it plugin which greatly reduces filesizes of images without sacrificing quality. Other than that, we are running the stock theme without any other modifications, because the theme was built with speed in mind. 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 Microlancer.com 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 86/100 performance grade, and that’s without any caching plugins active. The load time is ~4 seconds and the page size is ~2.7 MB. These can be even further reduced by displaying less content on the page – it just depends on your individual needs.

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

Combine external CSS

Explanation: The reason the CSS is split into 2 files is because the theme gives the ability to disable responsiveness, in which cases the responsive CSS declarations are omitted (which couldn’t be done if all the CSS was in one file). This has negligible impact on site performance. If you wanted to use just one stylesheet then you could copy the code from the css/responsive.css file directly into the style.css (paste it at the very bottom of the file) and then remove all instances of “../” since you are technically moving the file one level higher in the directory structure.

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

Serve Scaled Images

Explanation: This depends on which testing tool you’re using. For instance, GTMetrix will say there are some scaled images, but that’s only because it’s testing with the medium responsive layout instead of the full desktop layout view, which causes some of the image thumbnails to get slightly scaled down for responsive reasons. You should disregard this notices as it is irrelevant to the theme.

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 not theme-related in any way. 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 not theme-related in any way. 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. Make sure these match up in order to retain your existing permalinks (URLs).
  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

Fonts by Google Fonts. Icons by Fontello. Full Credits here »