<?php 
/**
 * The template for displaying the admin "Setup" 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">

              <!-- Getting started
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="getting-started" class="page-header">Getting Started</h1>

                    <p class="lead">
                        Thank you for purchasing my theme. If you have any questions that 
                        are beyond the scope of this help, please feel free to email any questions 
                        to our <a href="https://themewich.com/theme-support/" target="_blank">Support System</a>. Thanks so much!
                    </p>

                    <!-- Three Column Links Section  -->
                    <div class="row bs-links" style="margin-bottom: 20px;">
                        <div class="col-sm-4">
                            <h3 id="support-forum"><span class="glyphicon glyphicon-comment"></span> Support System</h3>
                            <p>
                                Email questions and receive one-on-one help from our support staff.
                            </p>
                            <a href="https://themewich.com/theme-support/" class="btn btn-md btn-outline" role="button" target="_blank">
                                Get Support
                            </a>
                        </div>
                        <div class="col-sm-4">
                            <h3 id="download-source"><span class="glyphicon glyphicon-book"></span> Knowledgebase</h3>
                            <p>
                                Search our knowledge base articles including
                                <a href="http://docs.themewich.com/collection/9-getting-started">Getting Started</a>,
                                <a href="http://docs.themewich.com/collection/90-faq-troubleshooting">Troubleshooting and FAQ</a> and more.
                            </p>
                            <a href="http://docs.themewich.com/" class="btn btn-md btn-outline" role="button" target="_blank">
                                View Knowledgebase
                            </a>
                        </div>
                        <div class="col-sm-4">
                            <h3 id="download-sass"><span class="glyphicon glyphicon-align-right"></span> Changelog</h3>
                            <p>
                                The log of changed files for <?php echo esc_html( $themewich_theme_info->Name ); ?>. 
                                <strong>
                                    Your current version is <?php echo esc_html( $themewich_theme_info->Name ); ?> v<?php echo esc_html( $themewich_theme_info->Version ); ?>
                                </strong>.
                            </p>
                            <a href="http://themewich.com/updates/edition" target="_blank" class="btn btn-md btn-outline" role="button">
                                View Changelog
                            </a>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel"><?php echo esc_html( $themewich_theme_info->Name ); ?> Changelog</h4>
                                        </div>
                                        <div class="modal-body">
                                            Changelog here.
                                        </div>
                                        <div class="modal-footer">
                                            <p class="muted">You are currently running <?php echo esc_html( $themewich_theme_info->Name ); ?> v<?php echo esc_html( $themewich_theme_info->Version ); ?>.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div><!-- .col-sm-4 -->
                    </div><!-- .bs-links -->
                </div><!-- .bs-docs-section -->

              <!-- Installation
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="installation" class="page-header">
                        Installation <small>Installing <?php echo esc_html( $themewich_theme_info->Name ); ?></small>
                    </h1>

                    <div class="bs-callout bs-callout-info">
                        <h4>WordPress is required</h4>
                        <p>
                            To install this theme you must have a working version of WordPress already installed. For information
                            regarding the installation of the WordPress platform, please see the <a href="http://codex.wordpress.org/Installing_WordPress" target=_blank>WordPress Codex</a>
                        </p>
                    </div>

                    <p>
                        Once wordpress is installed, you can upload the theme files and activate the theme. The theme files can be
                        uploaded in two ways:
                    </p>

                    <dl class="dl-horizontal">
                        <dt>FTP Upload</dt>
                        <dd>
                            Using your FTP program, upload the non-zipped theme folder into the <strong>/wp-content/
                            themes/</strong> folder on your server.
                        </dd>
                        <dt>WordPress Upload</dt>
                        <dd>
                            First, unzip the downloaded zip file. Navigate to <strong>Appearance > Add New
                            Themes > Upload</strong>. Go to browse, and select the zipped theme folder, called 
                            <code><?php echo strtolower( esc_html( $themewich_theme_info->Name ) ); ?>.zip</code>. Click <kbd>Install
                            Now</kbd> and the theme will be uploaded and installed.
                        </dd>
                        <p class="bs-example">
                          <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/edition-zip-install.png" class="img-responsive" />
                       </p>
                          <dd>
                            
                        </dd>
                    </dl>
                    <p>
                        Once the theme is uploaded, you need to activate it. Go to <strong>Appearance > Themes</strong> 
                        and activate your chosen theme.
                    </p>
                </div>
                
                <!-- Plugin Installation
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="plugin-setup" class="page-header">
                        Plugin Install <small>Installing Required Plugins</small>
                    </h1>
                        
                    <h2 id="shortcode-setup">Required Plugin Installation</h2>
                    <p>
                        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 or contact forms will continue to work on your new site. 
                    </p>
                        
                    <ol>      
                        <li>
                            <p>
                                Once you have activated the theme a plugin notification should appear, prompting you to install the required and recommended plugins. Follow the prompt and Click <code>Begin installing plugins</code>.
                            </p>
                            <p class="bs-example">
                                <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/plugin-prompt.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                            <p>
                                On the following page click the checkbox next to <strong>Plugin</strong> in the header. This will select all plugins. Only the plugins marked "required" are required for theme functionality. The rest are completely optional. 
                            </p>
                            <p class="bs-example">
                        	   <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/activate-plugin.png" class="img-responsive" />
                        	</p>
                        </li>   
                        <li>
                        	<p>
                            	Then click <code>Install</code> under the <code>Bulk Actions</code> dropdown and click <code>Apply</code> to finish the process. The plugins will automatically be activated.
                            </p>
                        </li>   
                    </ol>
                </div>

                <div class="bs-docs-section">
                    <h2 id="manualshortcode-setup">Manual Plugin Install</h2>
                    <p>
                        If you've already installed the required plugins using the above directions, then you don't need to manually install the required plugins. However, if you've run into problems installing the theme's plugins, you can manually install them.
                    </p>
                    
                    <ol> 
                        <li>
                            <p>
                                Navigate to <strong>Plugins > Add New</strong>. At the top of the page, below <strong>Install Plugins</strong> click the <code>Upload</code>link 
                                and then select <code>Choose file</code>.  You can find all the plugins in your theme download in the <code>Plugins</code> folder. Choose a file to install the plugin.
                            </p>
                            <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/install-plugin.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                            <p>
                                Once you selected the correct file, click <code>Install Now</code>. The plugin will unpack, install, and then require activation. 
                                Select <code>Activate Plugin</code>. Your plugin is now activated.
                            </p>
                            <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/plugin-activate.png" class="img-responsive" />
                            </p>
                        </li> 
                    </ol>
           		</div>

                
                <!-- Page Setup
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="page-setup" class="page-header">
                        Page Setup <small>Setting The Theme Pages</small>
                    </h1>
                    <p class="lead">
                        After you install your theme, you'll need to set up page templates and a few options
                        to get it running properly.
                    </p>

                  <!-- Homepage Subitem
                    ================================================== -->
                    <h2 id="homepage-setup">Setting Up The Homepage</h2>
                    <ol>
                        <li>
                            <p>
                            To set up the homepage you must create a new page. Navigate to <strong>Pages > Add New</strong>. You can give this page any
                            title and you do not have to include any content.
                            </p>
                        </li>
                        <li>
                            <p>
                            Select the <code>Homepage</code> template from the Page Attributes section. 
                            </p>
                        </li>
                        <li>
                            <p>
                            Complete the <strong>Homepage Layout Options</strong> below the page content area. Be sure to fill out the information on each tab. Once
                            you've filled out all the information for the default homepage, click <kbd>Publish</kbd>.
                            </p>
                            <p class="bs-example">
                                <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/default-homepage.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                            <p>
                            Now that you have created your new page which uses a homepage template, navigate to <strong>Settings > Reading</strong> to
                            configure the Front Page Displays setting. 
                            </p>
                       </li>
                        <li>
                            <p>
                            Select the <code>A static page</code> radio button and choose the page you just
                            created as your <code>Front page</code> and click <kbd>Save</kbd> to save the changes.
                            </p> 
                            <p class="bs-example">
                                <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/front-page-displays.png" class="img-responsive" />
                            </p>
                        </li>
                    </ol>

                    <div class="bs-callout bs-callout-info">
                        <p>
                            <span class="glyphicon glyphicon-info-sign"></span>
                            Your homepage is now created and can be viewed by visiting
                            your root URL.
                        </p>
                    </div>
                </div>

                <!-- Blog Subitem
                ================================================== -->
                <div class="bs-docs-section">
                    <h2 id="blog-setup">Setting Up The Blog</h2>
                    <ol>
                        <li>
                            <p>
                            To set up the blog page you must create a new page. Navigate to <strong>Pages > Add New</strong>. You can give this page any
                            title and you do not have to include any content. 
                            </p>
                        </li>
                        
                      	<li>
                            <p>
                            Now that you have created your new page, navigate to <strong>Settings > Reading</strong> to
                            configure the Front Page Displays setting. 
                            </p>
                        </li>
                        <li>
                            <p>
                            Select the <code>A static page</code> radio button and choose the page you just
                            created as your <code>Posts page</code> and click <kbd>Save</kbd> to save the changes.
                            </p> 
                            <p class="bs-example">
                                <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/front-page-displays.png" class="img-responsive" />
                            </p>
                        </li>
                    </ol>

                    <div class="bs-callout bs-callout-info">
                        <p>
                            <span class="glyphicon glyphicon-info-sign"></span>
                            Your blog page is now created and can be viewed by visiting
                            the page you just published.
                        </p>
                    </div>
                </div>

                <!-- Contact Subitem
                ================================================== -->
                <div class="bs-docs-section">
                    <h2 id="contact-setup">Setting Up The Contact Page</h2>
                    <ol>
                        <li>
                            <p>
                            To set up the contact page you must first be sure the "Ninja Forms" plugin is activated. Navigate to <strong>Forms > Import/Export</strong>.
                            </p>
                        </li>
                        <li>
                            <p>
                            Click <kbd>Choose a File</kbd> and locate the <code>Content Import</code> folder in your theme download. Select <code>Edition-Contact.nff</code> and click <kbd>Import Form</kbd>.
                            </p>
                        </li>
                        <li>
                            <p>
                            To set up the contact page you must create a new page. Navigate to <strong>Pages > Add New</strong>. You can give this page any
                            title and you do not have to include any content.
                            </p>
                        </li>
                        <li>
                            <p>
                            Select the <code>Contact Page</code> template from the Page Attributes section. This ensures your page will have the Contact Page sidebar.
                            </p>
                        </li>
                        <li>
                            <p>
                            On the right side bar under <code>Append A Ninja Form</code> select <code>Contact</code> from the dropdown. Once
                            you’ve selected the form, click <kbd>Publish</kbd> or <kbd>Update</kbd> to save.
                            </p>
                            <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/ninja-contact.png" class="img-responsive" />
                            </p>

                        </li>
                        <li>
                            <p>
                            Now that you have created your new page which uses a contact form, make sure you have the correct information
				    entered for your form by visiting <strong>Forms > All Forms > Contact Form</strong>.
                            </p>
                        </li>         
                    </ol>

                    <div class="bs-callout bs-callout-info">
                        <p>
                            <span class="glyphicon glyphicon-info-sign"></span>
                            Your contact page is now created and can be viewed by visiting
                            the page you just published.
                        </p>
                    </div>
                </div>

                <!-- Menu 
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="menu-setup" class="page-header">
                        Menu Setup <small>Setting up the Navigation Menu</small>
                    </h1>
                    <p>
                        Once you've added your pages you'll need to setup your main navigation menu which appears at the top of each page. 
                    </p>
                    <ol>
                        <li>
                        	<p>
                            	To set up the navigaton menu mavigate to <strong>Appearance > Menus </strong> and enter the name of 
                              your menu in the text box provided. Click <kbd>Create Menu</kbd> to begin. 
                        	</p>
                               <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/create-menu.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                            <p>
                            	Add items to the menu by selecting from left column options panel. Add pages, link or categories by 
                            	selecting the checkbox of the item and then clicking, <kbd>Add to Menu</kbd>.
                            </p>
                            <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/adding-menu-items.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                          <p>Once items have been added to a menu, drag and drop to put them in the desired order. Drag a menu item to the 
                          right a little to make it a submenu and create a hierarchy.</p>
                          <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/menu-structure.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                         <p>After your menu has been created be sure to set the location. Under <strong>Menu Settings</strong>, select the checkbox 
                         <code>Main Navigation Menu</code> for Theme Locations. Click <kbd>Save Menu</kbd> to save all recent changes made to your menu.</p>
                          <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/menu-location.png" class="img-responsive" />
                            </p>
                        </li>
                    </ol>

                    <div class="bs-callout bs-callout-info">
                        <p>
                            <span class="glyphicon glyphicon-info-sign"></span>
                            Your main navigation menu now created and can be viewed by visiting
                            any page.
                        </p> 
                  </div>
                  
                  
                    </div>
                
                <!-- Mega Menu 
                ================================================== -->
                <div class="bs-docs-section">
                    <h2 id="megamenu" class="page-header">
                        Creating a Mega Menu
                    </h2>
                    <p>
                        For a different style menu, you can create a "Mega Menu" which displays links in vertical columns instead of individual dropdowns.
                    </p>
                    <ol>
                        <li>
                        	<p>
                            	First, be sure you've <a href="#menu-setup">set up your menu</a>. Navigate to <strong>Appearance > Menus</strong> to create a mega menu dropdown.
                        	</p>
                        </li>
                        <li>
                            <p>
                            	Click arrow on the right hand side of the top-level menu item that you want to hold the dropdown menu. This will be the item that will display the dropdown menu when hovered. This menu item needs to be on the top level.
                            </p>
                            <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/megamenu1.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                            <p>
                            	Click <kbd>Make This Dropdown a Mega Menu</kbd> on the item. If you don't see this option, then your menu item isn't at the top level.
                            </p>
                            <p class="bs-example">
                            	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/megamenu2.png" class="img-responsive" />
                            </p>
                        </li>
                        <li>
                          <p>Once you've made this selection, you need to add column headers to your menu. Begin by clicking <kbd>Links</kbd> on the left hand side of the screen. Enter <code>#</code> in the URL box and enter your column title in the Link Text box and click <kbd>Add To Menu</kbd>.</p>
                          <p class="bs-example">
                          	<img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/megamenu3.png" class="img-responsive" />
                          </p>
                        </li>
                        <li>
                         <p>Add menu items to your custom header. These items will show up in a column.</p>
                        </li>
                        <li>
                         <p>Add additional <kbd>#</kbd> link items to add another column, and additional menu items in each column to create the menu.</p>
                        </li>
                    </ol>

                    <div class="bs-callout bs-callout-info">
                        <p>
                            <span class="glyphicon glyphicon-info-sign"></span>
                            It's important to note that you can't have custom links in your megamenu dropdown.
                        </p> 
                    </div>
                </div>
 

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

            <?php get_template_part('functions/help/sidebar-templates/setup-sidebar'); // Get Sidebar ?>
        </div>
    </div>
</div>