<?php 
/**
 * The template for displaying the admin "Theme Files" tab.
 *
 * @package WordPress
 * @subpackage Edition
 * @since Edition 1.0
 */
global $themewich_theme_info; ?>

<div class="bootstrap-wrapper">
    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-7 doc-content" role="main">

              <!-- Installation
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="theme-files" class="page-header">
                        Theme Files
                    </h1>

                    <p>
                        This section discloses the sources of various files used within the theme and describes their function.
                        Use this section to gain an understanding on how the theme functions behind the scenes if considering
                        any type of modification.
                    </p>

                    <div class="bs-callout bs-callout-info">
                        <h4>
                            <span class="glyphicon glyphicon-info-sign"></span>                            
                            Child Theme Recommended
                        </h4>
                        <p>
                            It's recommended that you use a child theme for any type of modifications to the theme. A child theme
                            allows you to make modifications to the theme without editing the theme's files. Using a child theme ensures 
                            you can still update the theme without losing your changes. 
                            <a href="http://docs.themewich.com/article/64-how-to-create-a-child-theme" target="_blank">
                                More about child themes on the knowledgebase.
                            </a>
                        </p>
                    </div>
                </div>
                
                <!-- Basic Structure
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="basic-structure" class="page-header">
                        Basic Structure <small>Responsive Theme Structure</small>
                    </h1>
                    <p>
                        This template is a responsive layout built upon “Media Queries”. The CSS uses “media queries” to size
                        specific content areas and other elements depending on browser width. Refer to the media queries
                        section at the end of style.css for more information.
                    </p>
                </div>

                <!-- CSS Files
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="css-files">CSS Files and Structure</h1>
                    <div class="bs-callout bs-callout-info">                            
                        <p>
                            <span class="glyphicon glyphicon-info-sign"></span>
                            <strong>Always put your css changes in your custom css box or a child theme whenever possible.</strong> That
                            way, if you ever update your theme, you won’t lose your changes. However, if you have to edit the
                            theme directly I’ve put all styles in one main stylesheet to allow for easier changes.
                        </p>
                    </div>
                    <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Stylesheet Name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>style.css</strong></td>
                                    <td>
                                        Used for the specific styling of elements, layout and typography throughout the site. In this
                                        file you can find the styles of any of the elements throughout the site, such as buttons, image frames,
                                        sliders, featured tabs, forms, quotes and more.
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>bootstrap.css</strong></td>
                                    <td>A reponsive grid framework for the site.</td>
                                </tr>
                                <tr>
                                    <td><strong>font-awesome.css</strong></td>
                                    <td>Scalable vector icons.</td>
                                </tr>
                                <tr>
                                    <td><strong>ie8.css</strong></td>
                                    <td>Styles to make compatbile with Internet Explorer 8</td>
                                </tr>                                                             
                            </tbody>
                        </table>

                        <h2>Use of SCSS Files</h2>
                    <p>
                        You can also make use of the scss files included in the <code>sass</code> folder of the theme.
                        For more information about scss files, check out the <a href="http://sass-lang.com/" target="_blank">Sass Website</a>.
                    </p>
                </div>

                <!-- Javascript
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="javascript">Javascript</h1>
                    <p class="lead">
                        This theme imports multiple Javascript files. The use of javascript in this site enhances the user
                        experience, but isn’t necessary to view the site if the user have javascript disabled.
                    </p>
                    <p>Here are some scripts worth noting:</p>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Script Name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>jQuery</strong></td>
                                    <td>This framework is the engine for all the javascript effects on the site which comes with WordPress.</td>
                                </tr>
                                <tr>
                                    <td><strong>custom.js</strong></td>
                                    <td>This file initializes all of the javascript plugins upon page-load.</td>
                                </tr>
                                <tr>
                                    <td><strong>Modernizr</strong></td>
                                    <td>Detects HTML5 and CSS3 features in the user’s browser.</td>
                                </tr>
                                <tr>
                                    <td><strong>Isotope</strong></td>
                                    <td>Masonry layout of posts.</td>
                                </tr>
                                <tr>
                                    <td><strong>BxSlider</strong></td>
                                    <td>Image Slideshows and Carousels.</td>
                                </tr>
                                <tr>
                                    <td><strong>FitVids</strong></td>
                                    <td>Allows for responsive video embedding.</td>
                                </tr>
                                <tr>
                                    <td><strong>Superfish</strong></td>
                                    <td>Dropdown navigation.</td>
                                </tr>
                                <tr>
                                    <td><strong>Jquery Easing</strong></td>
                                    <td>For easing effects.</td>
                                </tr>
                                <tr>
                                    <td><strong>Magnific Popup</strong></td>
                                    <td>Photo and video lightbox.</td>
                                </tr>  
                                <tr>
                                    <td><strong>Bootstrap</strong></td>
                                    <td>For admin help file.</td>
                                </tr>                                                                                                                                                                                                                                                                  
                                <tr>
                                    <td><strong>Code Prettify</strong></td>
                                    <td>For admin help file.</td>
                                </tr>    
                                <tr>
                                    <td><strong>Mmenu</strong></td>
                                    <td>Mobile slideout menu.</td>
                                </tr>                                    
                                <tr>
                                    <td><strong>Themewich Tabs</strong></td>
                                    <td>Tabs js effect.</td>
                                </tr>    
                                <tr>
                                    <td><strong>Backstretch</strong></td>
                                    <td>Fullscreen background images.</td>
                                </tr>                                                                    
                            </tbody>
                        </table>
                </div>    

                <!-- Plugins
                ================================================== -->
                 <div class="bs-docs-section">
                    <h1 id="theme-plugins">Theme Plugins</h1>
                    <p class="lead">
                        The theme's functionality is broken up through the use of individual plugins. 
                        This way, when if you ever decide to change themes, your site data, like shortcodes, 
                        contact forms or sections will continue to work on your new site. 
                    </p> 
                    <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Plugin Name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Advanced Custom Fields</strong></td>
                                    <td>Used for additional content fields on pages, sections, posts and categories. </td>
                                </tr>
                                <tr>
                                    <td><strong>Advanced Custom Fields - Widget Relationship Field add-on</strong></td>
                                    <td>Allows you to select widgets at a for individual sections.</td>
                                </tr>
                                <tr>
                                    <td><strong>Advanced Custom Fields: Repeater Field</strong></td>
                                    <td>Allows you to repeat and re-order the review criteria field.</td>
                                </tr>
                                <tr>
                                    <td><strong>Ninja Forms</strong></td>
                                    <td>Allows you to build and customize forms for your website.</td>
                                </tr>
                                <tr>
                                    <td><strong>Redux Framework</strong></td>
                                    <td>Options framework for the theme.</td>
                                </tr>
                                <tr>
                                    <td><strong>SocialFans Counter</strong></td>
                                    <td>
                                        Responsive Wordpress Plugin Displaying Number of Your Social Accounts Fans, Subscribes and Followers.
                                        <a href="http://codecanyon.net/item/socialfans-wp-responsive-social-counter-plugin/6217746&ref=2winfactor" target="_blank">
                                            Available At Codecanyon For Purchase
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Themewich Sections</strong></td>
                                    <td>
                                        Adds section functionality to your site. This is separated into a plugin so if you switch themes, 
                                        you can still see your sections in the admin.
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Themewich Shortcodes</strong></td>
                                    <td>Shortcodes for the theme.</td>
                                </tr> 
                                <tr>
                                    <td><strong>WP Most Popular</strong></td>
                                    <td>Flexible plugin to show most popular posts based on views. Used for breaking news ticker and top news widget.</td>
                                </tr>                                                                                                                                                                                                                                                                                                                                     
                            </tbody>
                    </table>

                    <h2 id="recommended-plugins">Recommended Plugins</h2>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Plugin Name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Better WordPress Minify</strong></td>
                                    <td>Minifies all css and js files, and combines into a single query. Great for pagespeed.</td>
                                </tr>
                                <tr>
                                    <td><strong>QuickCache</strong></td>
                                    <td>Caches page content to reduce your server load. A <strong>MUST</stron> for shared servers.</td>
                                </tr>
                                <tr>
                                    <td><strong>Regenerate Thumbnails</strong></td>
                                    <td>Regenerates your thumbnails to fit into the current theme's sizes</td>
                                </tr>
                                <tr>
                                    <td><strong>WordPress SEO</strong></td>
                                    <td>All-in-one SEO solution for WordPress that allows you to add page titles, meta information and analize SEO.</td>
                                </tr>                                                                                                                                                                                                                                                                                                                                  
                            </tbody>
                        </table>

                        <div class="bs-callout bs-callout-info">                            
                        <h4>
                            <span class="glyphicon glyphicon-info-sign"></span>
                            But wait! Won't all these plugins slow down my site?
                        </h4>
                        <p>   
                            This is a myth about WordPress commonly misspoken about running
                            a lot of non-scalable, intensive plugins on your site. If plugins
                            are quality, scalable plugins - they will not slow down your site.
                            In fact, many of the top WordPress internet blogs run 50 - 100 plugins on 
                            their sites.
                            The plugins included with this theme were integrated with the theme
                            in such a way so they are infinitely scalable, and won't slow down 
                            your site. 
                        </p>
                        <p>
                            Check out these links for more information about using plugins: <br />
                            <a href="http://wpengine.com/2013/08/28/plugins-and-fast-wordpress-sites-its-not-the-number-of-plugins-its-the-quality/" target="_blank">
                                Plugins and Fast WordPress Sites
                            </a>,
                            <a href="http://lorelle.wordpress.com/2012/09/27/how-many-is-too-many-wordpress-plugins/" target="_blank">
                                How Many Is Too Many Plugins?
                            </a>, 
                            <a href="http://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/" target="_blank">
                                How Many Plugins Should You Install On Your Site
                            </a>
                        </p>
                    </div>
                </div>     

                <div class="bs-docs-section">
                    <h1 id="credits">Credits</h1>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th style="min-width:200px;"></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>SocialFans Counter</strong></td>
                                <td>
                                    A special thanks to Theminity for allowing me to include their 
                                    <a href="http://codecanyon.net/item/socialfans-wp-responsive-social-counter-plugin/6217746" target="_blank">
                                        SocialFans Counter Plugin
                                    </a>
                                    with the theme.
                                </td>
                            </tr>                                                                                                                                                                                                                                                                                                                               
                        </tbody>
                    </table>
                </div>      

            </div><!-- .doc-content-->

            <?php get_template_part('functions/help/sidebar-templates/theme-files-sidebar'); // testing commit ?>
        </div>
    </div>
</div>