Documentation

by

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

Flavor documentation by Industrial Themes, LLC v1.0
Created 5/25/2013
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

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

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. Load the settings
  • Activate Flavor and delete the default “Sample Post” blog post that WordPress automatically creates for new installs.
  • Go to Appearance >> Theme Options and click the “Load Demo Settings” at the bottom (click OK on the javascript message)
2. Import the content
  • Go to Tools >> Import >> WordPress >> Choose File and select the flavor.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).
3. Adjust a few settings

Because the demo settings are required to be loaded before importing the XML file, you will need to make a few more selections.

  • Under Theme Options >> Content Carousels
    • Select “sizzlin” for the Sizzlin’ Slider >> Use Tag Instead option
    • Select “featured” for the Featured Slider >> Use Tag Instead option
  • Under Theme Options >> Custom Sidebars, create a new sidebar called Review Directory Long
  • Under Appearance >> Menus, select Top Menu, Main Menu, and Sub Menu for each of the three menus in Theme Locations.
  • finally (and optionally), go to Settings >> Reading and change “Blog pages show at most” to 9 posts

Notes:

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

CSS

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.

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

Superfish
Enables smooth menu drop down animations and provides some style helpers to menus
selectBox
Provides a more compact, select box-type drop down for menus in smaller responsive layouts
List Ticker
Functionality for the Sizzlin’ carousel
waitForImages
A javascript library requirement of the slider revolution jQuery slider
simplyScroll 2
Provides the functionality of the Top Ten carousel
Tweet
Provides the functionality of the Latest Tweets widget
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
Slider Revolution
The responsive jQuery large featured carousel

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.

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

  • archive.php
  • index.php
  • search.php
  • template-directory.php

A similar scenario exists for the page-content.php file within the inc/ folder, called by:

  • 404.php
  • page.php
  • single.php
  • template-authors.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 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:

  • ajax.php called by the scripts-ajax.php 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
  • minisite-meta-boxes.php creates the meta boxes that display on pages to be used for minisite templates
  • minisites.php the class that creates the minisites, and receives minisite theme options and turns them into actual minisite objects
  • options.php utility functions not used by default, only included for debugging/setup/troubleshooting
  • reviews.php all functions that present markup for use in minisite/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
    • hero.php Bootstrap hero unit
    • icons.php shortcode to display the various font icons
    • 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
    • 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-clouds.php tag, category, and minisite taxonomy term clouds
    • widget-latest-articles.php displays latest articles from specified minisites
    • widget-minisite-tabs.php displays latest posts from minisites in a tab format
    • 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-text-unwrapped.php used for literal text in a unwrapped content area (no container or title)
    • 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-articles.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-directory.php creates options that appear in the minisite 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
    • 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
  • singlepage.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 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.

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

View FAQs

Theme Tips

  • Names of rating criteria cannot match names of details or awards/badges (or “video” for featured video)
  • You cannot have more than one Minisite Articles widget in the same widget panel (but you can have one in multiple widget panels)
  • 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.
  • You cannot put shortcodes in signoff content areas in Theme Options >> Signoffs, but you can put them in the custom text of the shortcode within the page/post editor. So if you want to have a signoff containing a shortcode, you’ll need to use the custom signoff text option when adding the shortcode to the article/page content
  • 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 fixes the outage on their end)
  • 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.
  • For HD versions of logos (main site logo and minisite logos) even though they are specified in theme options they must be named exactly like the SD logo and in the same folder, with @2x added right before the file extension.

“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, and curl_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.

Performance & Optimization

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:

Combine external JavaScript

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.

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

Serve Scaled Images

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.

Reduce the number of DOM elements

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 🙂

Combine images using CSS sprites

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.

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

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 Pinterest issue). All image dimensions are specified correctly within the theme code.

Upgrading from Made or SwagMag

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.

Steps for Upgrading

  1. Again, we can’t stress enough, make a full backup of your site
  2. Activate the new theme
  3. Go to Appearance >> Theme Options >> Minisite Setup and enable the Legacy option
    Status: all reviews are hidden, only pages and posts are visible
  4. Create each minisite with the same name/slug as in the previous theme
    Status: reviews are now visible in dashboard
  5. Create each taxonomy within each minisite with the same name/slug as in the previous theme
    Status: taxonomy terms now matched up and assigned to all reviews
  6. Within each minisite, create each meta field that existed in the old theme as a new detail for each minisite
  7. Within each minisite, create each rating criteria that existed in the previous theme as a new rating criteria
  8. Setup the minisite settings to match your previous theme, such as the rating type, star color, logo, color scheme, etc.
  9. Install and activate the Custom Field Bulk Editor plugin
  10. For each minisite in the WordPress admin menu (the main WordPress left-hand admin menu where you go to actually write articles, not the theme options screen):
    1. Click on the Bulk Edit Fields link
    2. Select all review articles using the select all checkbox at the top
    3. Click “Want to change a custom field name?”
    4. Enter “Positives” for the original custom field name and “_positives” for the new custom field name and click Save Custom Fields
    5. Do the same for “Negatives” and “_negatives”
    6. Do the same for each of your rating criteria, replacing spaces with “_”. For example: “Costume Design” would become “_costume_design”
    7. Important Every time you do this, don’t forget to select all articles and click the Save Custom Fields button at the bottom
      Status: meta fields and rating criteria now re-connected to all reviews
  11. Since total scores are now stored in the database instead of being generated on the fly, open each review and click Update for the total score to be calculated and stored in the review’s meta fields.
    Status: total scores now re-connected to all reviews
  12. Copy what was previously the review’s excerpt into the newly available Bottom Line field
    Status: all reviews now have bottom line text visible

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.

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