“Upside Lite - Responsive Wordpress Theme documentation”

Created:Feb 24/ 2015
Version: 1.0.+
Wordpress Theme Developed by : Kopatheme
Email: kopatheme@gmail.com
Support: http://kopatheme.com/forum

After activating the theme please ensure that all required settings mentioned here in are also configured properly. Preview the theme on a browser to confirm that the changes to the settings have taken effect. The look and feel of the theme will not appear perfect unless the required settings have been configured properly, as per the details mentioned on this documentation.

Table of Contents

  1. Theme Installation
  2. Using Plugin in Upside theme
    1. Kopa Framework plugin
    2. Kopa Page Builderplugin
    3. Contact Form 7 plugin
    4. Upside Toolkit Lite
    5. Bbpress
    6. Woocommerce plugin
  3. Demo Content
  4. Theme Options Customization
    1. Theme Options
    2. Sidebar Manager
    3. Layout Manager
      1. Setup Home Page
      2. Setup Front Page
      3. Setup Page
      4. Setup Post
      5. Setup Search Page
      6. Set up Eror 404 Pages
      7. Set up Product Archive Pages
      8. Set up Single Product
      9. Set up Forums Archive Pages
      10. Set up Single Forum
      11. Set up Topic Archive Pages
      12. Set up Single Topic
    4. Backup
  5. Customize Theme
  6. Custom Widgets - Elements
    1. (Upside) Lite Advertisement
    2. (Upside) Lite Newsletter Feedburner
    3. (Upside) Lite Recent Comment
    4. (Upside) Lite Recent Posts
    5. (Upside) Lite Social Links
    6. (Upside) Lite Tagline
  7. Custom Shortcode Generator
  8. Create Categories - Posts - Post Type- Custom Menu
    1. Create Category
    2. Create Posts
    3. Brands Post-Type
    4. Services Post-Type
    5. Testimonials Post-Type
    6. Members Post-Type
    7. Events Post-Type
    8. Document Post-Type
    9. Landing Post-Type
    10. Course Post-Type
    11. portfolios Post-Type
    12. Slide Post-Type
    13. Forum Post-Type
    14. Topic Post-Type
    15. Reply Post-Type
    16. FAQs Post-Type
    17. Create Custom Menu
  9. How to setup the demo site
  10. Translation
  11. Updating The Theme
  12. Sources and Credits

A. Theme Installation - top

Note: As a pre-requisite you will need a copy of WordPress version 4.0+ installed and running on your server.

After you have successfully installed WordPress on your server, you are now ready to install Upside theme. The process of installation is very easy. Here are the simple steps to upload and install Upside theme:

After activating, preview this theme you will see the theme looks quite empty, you will see your website appear a message "Missing core plugin for theme Upside. Please install plugin WPBakery Visual Composer, Kopa Framework, Upside Toolkit Lite, Contact form 7, Envato wordpress toolkit plugin and Woocommerce to run theme" that request to install and active plugin to use this theme.

Upside theme also require to install some plugin as follows:

Kopa Framework plugin: is an easy way to get theme options, sidebar manager, layout manager and custom layouts feature to your WordPress site.

WPBakery Visual Composer plugin : You’ll be able to create complex layouts within minutes! It’s build on top of the modern technologies – get the best for your lovely website! Add columns/elements with single click, then use your mouse to drag elements around to re-arrange them.

Contact Form 7 plugin : Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Envato Wordpress Toolkit plugin- WordPress toolkit for Envato Marketplace hosted items.

Woocommerce plugin if you want to create online shop on your website.

B. Using Plugin in Upside theme- top

With our Upside theme, you must install and activate Kopa Framework plugin, Kopa Page Builder plugin, Upside Toolkit Lite plugin to use theme. Besides, you have to install Contact form 7 to create multi contact form, Bbpress to create forums and customize theme. Moreover, Upside theme also support WooCommerce plugin to create ecommerce website.

From your Dashboard appear warning about  Kopa Framework, Kopa Page Builder, Envato WordPress Toolkit  and WooCommerce.

  1. Step 1. Click "Begin installing plugin"
  2. image
  3. Step 2. Click “Install” image

Let install and active them:

1. Kopa Framework plugin- top

The Kopa Framework plugin is an easy way to get theme options, sidebar manager, layout manager and custom layouts feature to your WordPress site.

To install, click Appearance >> Install Plugin: hover in text Kopa Framework plugin to see install button, Click to install

After installing, you can come back this folder to active or go to Plugins folder on dashboard to active plugin

Note: you need to install and activate Kopa Framework plugin

 

2. Kopa Page Builder plugin - top

After installing and activate theme, you cannot use the theme yet, you will see a message displayed at the top of the page that requests WPBakery Visual Composer installation. This plugin has been integrated when you buy our theme.

Using WPBakery Visual Composer plugin, allows you to forget about shortcodes and create most complex layouts within minutes without writing a single line of code! Add columns/elements with single click, then use your mouse to drag elements around to re-arrange them. You’ll be able to create complex layouts within minutes! It’s build on top of the modern technologies – get the best for your lovely website!. Especially, when you purchase our Upside theme, If you want to build a demo version which are the same as our demo, WPBakery Visual Composer will help you carry out this task. You only need install theme, install required plugin and import our demo data.

3. Contact Form 7 plugin - top

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Step 1: Go to Dashboard >> Contact >> Contact Form to copy shortcode default

Step 2: Go to your page (Contact page), After adding Text widget in your page, then you paste shortcode contact form in to content of text widget

It will be displayed in your contact page following:

Beside, you can add new contact form with many languages, fields (Generate tag) at Dashboard >> Contact >> Add New

4. Upside Toolkit Lite - top

A specific plugin use in Upside Theme, included some custom post types, and shortcodes.

 

5. Bbpress - top

BbPress is forum software with a twist from the creators of WordPress. It can be installed like any other plugin of WordPress and it will add a fully functional forum, integrated with both frontend and backend of WordPress. bbPress is focused on ease of integration, ease of use, web standards, and speed.bbPress is lean, mean, and ready to take on any job you throw at it.

To install Bbpress plugin, do the following steps:

Step 1: Go to Dashboard >> Plugins: Install Plugin then click Add New

Step 2: Search with bbpress key, the result will display list of related plugin, you choose Bbpress then click Install Now.

Step 3: Waiting about 5s to wordpress auto download and Install Plugin.

Step 4: Click to  Active Plugin. Activate bbPress from your Plugins page. (You'll be greeted with a Welcome page.)

Follow the below steps for a quick and free setup and you can create forums, topics, replies easily.

 

6. Envato Wordpress Toolkit plugin - top

You can follow this guide to installing and using the plugin envato-wordpress-toolkit

7. Woocommerce plugin - top

Setting Woocommerce

To create Woocommerce plugin, do the following steps:

Step 1: Go to Dashboard > Plugins: Install Plugin

Step 2: Search with WooCommerce key, the result will display list of related plugin, you choose WooCommerce - excelling eCommerce then click Install Now.

Step 3: Waiting about 5s to wordpress auto download and Install Plugin WooCommerce.

Step 4: Click to  Active Plugin.

Woocommerce is a WordPress eCommerce plugin. It offers the features that are necessary for the purpose of setting up an eCommerce web store. Once you have successfully installed Upside theme, you will be notified to activate Woocommerce plugin, which is included as a part of the theme. You need to activate the plugin and complete the setting up process. Follow the below steps for a quick and free setup. Click Woocommerce >> Settings.

  1. General Settings: Enter your company details here
  2. Product: Allows you to select a weight unit, i.e., kilograms or pounds and change inventory options if you want..
  3. Tax: Enter the tax rate, country and the tax percentage to setup.
  4. Checkout: This option lets you choose the coupon values. For bank transfer, fill out bank info. For PayPal, fill out your PayPal info..
  5. Shipping: Enter the various shipping charges applicable for your products.
  6. Accounts: Enable registration on the "Checkout" page, "my account" page...
  7. Emails: Enter your company details here.

For further details please click here

Using shop page in Upside

  1. Creating new categories: Product > Categories
  2. Adding some new Products: On the WordPress dashboard Click on Products > Add New. Enter the title of the product, content, select product categories, excerpt and click Save.
  3. In Product Data, select Product type
  4. In General Tab, you can select pages where this product will be displayed. Checking on the Featured box to Enable this option to feature this product will make this a featured product.
  5. Enter the Regular Price and Sale Price.
  6. To disable default Woocommerce stylesheets, go to Woocommerce >> Settings >> General >> Check Disable frontend styles box
  7. In Inventory Tab, you can manage stock details. If you check ‘Manage Stock’ box, it will display the stock quantity box. Enter the stock quantity. You can also choose the backorders attribute..
  8. In Shipping: You can add weight, demension, shipping class as you want.
  9. In Linked Product: You can search for a product up-sells, cross-sells.
  10. In Attributes: You can add extra attributes as you choose.
  11. In Advanced Tab, you can add information about purchase note, menu order in the boxes. The Advanced tab allows you to personalize the information. Check "Enable review" to view your personal information as you want it to appear on the product in the frontend..

C. Demo Content - top

Demo content includes demo posts, pages, comments, categories, tags and so on. It is necessary to help you learn how the theme works; you can use them to setup a demo page.

Especially, when you import our file demo content, you will have pages such as index, about which we installed on demo site .

To import demo content, you can follow these steps:

D. Theme Options Customization - top

1. Theme Option- top

Go to Appearance >> Theme Options. You will choose to use or not use the Page Builder to customize your page and click on Save Options button after that.

Sidebar manager is an advanced feature of the Kopatheme framework which allows you to create sidebars for each page you want, rename Sidebars as wanted, so it is easy for you to remember and control position of Widgets in Appearance >> Widgets

To create a new sidebar, follow the steps:

To rename default/ existing sidebar, follow the steps:

To delete default/ existing sidebar, follow the steps:

Finally, Click Save Options button to Save Notice: Advanced Setting described on this page include advanced options are used for professional developers.

3. Layout Manager - Top

We can customize layout of all pages in the website with Layout Manager. In Layout Manager, we can see the illustration for layouts which that page can apply. The illustration shows you the widget areas of th layout. Basing on the illustration, you can feel easy to select the sidebar for widget areas.

Sidebars of Kopatheme framework are dynamic, so you can create a sidebar, delete or edit the flexibly in Sidebar Manager

The way to set up the pages layout is summarized as 3 following steps:

  1. Setup Blog page

    Click Appearance >> Layout Manager >> Blog. By default, the WordPress template hierarchy reserves the home.php page for the homepage, but if you set a front page post, it will be displayed instead of home.php. You can change layout of home page by SELECT THE LAYOUT : Blog Page. Next select the sidebars into the appropriate Widget Areas (as shown in the image) to be displayed.

  2. Setup Front Page

    The first, Click Settings >> Reading. Select the page which you intend to show as your front page from Home page display.image

    Click Appearance >> Layout Manager >> Front Page If you want to change layout of front page, Click SELECT THE LAYOUT: Static Page. Next select the sidebars into the appropriate Widget Areas (as shown in the image) to be displayed.

  3. Setup Pages
  4. Click Appearance >> Layout Manager >> Static Page. Setup Static page controls the layout for the static pages on the site. You can change layout of the pages by SELECT THE LAYOUT. Next, select sidebars into the Widget Areas to display.

  5. Setup Post

    Click Appearance >> Layout Manager >> Single Post. A Single post displays a detail post from categories. You can change layout of the single pages by SELECT THE LAYOUT. Next, you need to select sidebars into the Widget Areas to display.

  6. Set up Search
  7. Click Appearance >> Layout Manager >> Search. Search page shows search results. Setup Blog page layout for Search page on the site.

  8. Set up Eror 404 Page
  9. Click Appearance >> Layout Manager >> Eror 404. 404 page is displayed when a requested URL is not found on the site. Setup Error 404 page layout for Error 404 page on the site.

  10. Set up Product Archive
  11. Click Appearance >> Layout Manager >> Product Archive. Setup Product archive page layout for Product archive page on the site.

  12. Set up Product Single
  13. Click Appearance >> Layout Manager >> Product Single. Setup Single Product page layout for Single Product page on the site

  14. Set up Forum Archive
  15. Click Appearance >> Layout Manager >> Forum Archive. Setup Forum archive page layout for Forum archive page on the site.

  16. Set up Forum Single
  17. Click Appearance >> Layout Manager >> Forum Single. Setup Single Forum page layout for Single Forum page on the site

  18. Set up Topic Archive
  19. Click Appearance >> Layout Manager >> Topic Archive. Setup Topic archive page layout for Topic archive page on the site.

  20. Set up Topic Single
  21. Click Appearance >> Layout Manager >> Topic Single. Setup Single Topic page layout for Single Topic page on the site

4. Backup - top

When you want to remove completely the customizing and configuration to start over without customizing each option, Backup allows you to return to the initial state of the theme. Note: this feature only allows the theme to return the default in theme options, layout manager, sidebar manager.

To implement the backup Appearance >> Theme Options >> Backup tab

Restore Default Settings

Select one of the following options:

Click Restore Defaults to finish the backup

Import/Export Setting

Besides Restore function, you also can import/export the settings; you can export and import the settings if your host has problem forcing to reinstall the website.

Go to  Appearance >> Theme Options >> Backup Tab >> Import/Export  tab to perform the backup, you can select one of following options:

Click Download Export File  button to export .json file

E. Customize - Top

The Theme Customizer allows a Theme author to give users the chance to change certain Theme features such as color and layout in a live preview format. In addition, this screen will likely be different for each Theme that enables and builds it. Using it is simple:

F. Custom Widget - top

WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come preloaded with a clean installation of WordPress, such as post categories, tag clouds, navigation, search, etc. Beside these default widgets, a lot of other widgets are created by our developers to display content on the website. Available Widgets lists all the current widgets that are installed with your copy of theme. To use a widget, simply Dragging and dropping it onto the sidebar or the area and refresh the appropriate page to display its content.

image

    Enter title or not, select menu is created at Appearance >> Menu, then Click Save button to save change. it displays bellow:

  1. (Upside) Lite Newsletter Feedburner: Display a newsletter form with feedburner service. Dragging and dropping Upside Newsletter Feedburner widget to the sidebar or the area you want to display.
  2. image

    Enter Title widget, description text, Feedburner URI then Save. It will display as Footer below:

    image

  3. (Upside) Lite Tagline: Display some text and button. Dragging and dropping the widget to the sidebar or the area you want to display. Enter text 1, text 2, Button text, Button link, upload banner if you want then click Save to save change.

    It shows as Blog page below:

  4. (Upside) Lite Recent Comment: Display recent comments. Dragging and dropping (Upside) Lite Recent Comment widget to the sidebar or the area you want to display.
  5. image

    Enter Title widget, enter number of comments to show, and if checked, it will be shown post title, then Save. It will display as Right sidebar below:

    image

  6. (Upside) Lite Recent Posts: Display recent posts. Drag and drop this widget to the sidebar or the area you want to display.
  7. image

    Enter Title widget, Select categories Or/ And tags, select Order, orderby, and enter number of post to show then Save. It will display as Right sidebar below:

    image

    image

    It will display as Footer sidebar below::

    image

G. Custom Shortcode Generator - top

It would be imposible to remember the syntax of every shortcodes available options associated with it. Our shorcodes generator is an easy way for you to place a shortcode in theme to display the content. Within the "Page" or "Post", you can see the Visual Shortcode. Just click on the shortcode you need then it will be added to the content.

Shortcodes avaiable with this theme

This theme comes with following shortcodes to display the content:

  1. Column shortcode (Grid icon): 1/1, 1/2-1/2, 1/3-1/3-1/3, 1/3-2/3, 1/4-1/2-1/4, 1/4-1/4-1/4-1/4, 1/4-3/4, 1/6-4/6-1/6, 1/6-1/6-1/6-1/2, 1/6-1/6-1/6-1/6-1/6-1/6, 2/3-1/3, 5/6-1/6.
  2. Example: column 1/2-1/2

    [row]
    [col col=6]
    1/2 columns
    Duis nec purus tellus, quis pulvinar tortor, consectetur adipiscing elit.[/col]
    [col col=6]
    1/2 columns
    Duis nec purus tellus, quis pulvinar tortor, consectetur adipiscing elit.[/col]
    [/row]

  3. Container: Include options: Unorder List, Tabs, Accordion, Toggle, Price Table.
  4. +> Unorder List ( Unorder List include: Round icon, Square icon, Plus icon, Custom icon)

    [upside_ulists]
    [upside_ulist]List item[/upside_ulist]
    [upside_ulist]List item[/upside_ulist]
    [/upside_ulists]

    Example:

    [upside_ulists]
    [upside_ulist]Amazing bonus parallax sections[/upside_ulist]
    [upside_ulist]Ultra responsive & Retina ready[/upside_ulist]
    [upside_ulist]Computers & Accessories[/upside_ulist]
    [upside_ulist]Rocknrolla helpdesk system of help[/upside_ulist]
    [upside_ulist]Endless possibilities in custom backend[/upside_ulist]
    [/upside_ulists]

    The same with other style( Plus icon, Custom icon), the image will illustrate for above shortcode:

    image

    +>Tabs

    [upside_tabs]
    [upside_tabs title="Tab title 1"]Tab content 1[/upside_tabs]
    [upside_tabs title="Tab title 2"]Tab content 2[/upside_tabs]
    [upside_tabs title="Tab title 3"]Tab content 3[/upside_tabs]
    [/upside_tabs]

    Example:

    [upside_tabs]
    [upside_tab title="Tab 1"]Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs condmentum leo massa mollis estiegittis miristum nulla sed fringilla Donec vitae orci dignissim, faucibus tellus volutpat, rhoncus leo.[/upside_tab]
    [upside_tab title="Tab 2"]Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs condmentum leo massa mollis estiegittis miristum nulla sed fringilla Donec vitae orci dignissim, faucibus tellus volutpat, rhoncus leo.[/upside_tab]
    [upside_tab title="Tab 3"]Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs condmentum leo massa mollis estiegittis miristum nulla sed fringilla Donec vitae orci dignissim, faucibus tellus volutpat, rhoncus leo.[/upside_tab]
    [/upside_tabs]

    Enter Tab title and Tab content for tab, the image will illustrate for above shortcode:

    image

    +>Accordions: Click Container, select Accordion, add title and content for Accordion:

    [upside_accordions icon_pos="right or left"]

    [upside_accordion title="Accordion title 1"]Accordion content 1[/upside_accordion]

    [upside_accordion title="Accordion title 2"]Accordion content 2[/upside_accordion]

    [upside_accordion title="Accordion title 3"]Accordion content 3[/upside_accordion]

    [/upside_accordions]

    Example:

    [upside_accordions icon_pos="right"]
    [upside_accordion title="The quality of our services"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula non,Pellentesque feugiat in urna id varius. Curabitur lobortis eleifend viverra. Nulla aliquam magna quis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula non[/upside_accordion]
    [upside_accordion title="Our promise to our clients"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula non,Pellentesque feugiat in urna id varius. Curabitur lobortis eleifend viverra. Nulla aliquam magna quis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula non[/upside_accordion]
    [upside_accordion title="Standards, awards and goals"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula non,Pellentesque feugiat in urna id varius. Curabitur lobortis eleifend viverra. Nulla aliquam magna quis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ligula mollis, aliquam ligula non[/upside_accordion]

    [/upside_accordions]

    The same with other style of Accordion, It is illustrated with image below:

    image

    +>Toggles: Click Container, select Toggles, add title and content for Toggles:

    [upside_toggles]

    [upside_toggle title="Toggle title 1"]Toggle content 1[/upside_toggle]

    [upside_toggle title="Toggle title 2"]Toggle content 2[/upside_toggle]

    [upside_toggle title="Toggle title 3"]Toggle content 3[/upside_toggle]

    [/upside_toggles]

    Example:

    [upside_toggles]
    [upside_toggle title="MAT 125 – Introductory Calculus for Business"]Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs condmen tum leo massa mollis estiegittis miristum nulla.[/upside_toggle]
    [upside_toggle title="hary 301 – Operations Management"]Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs condmen tum leo massa mollis estiegittis miristum nulla.[/upside_toggle]
    [upside_toggle title="rkt 301 – Principles of Management"]Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs condmen tum leo massa mollis estiegittis miristum nulla.[/upside_toggle]

    [/upside_toggles]

    Enter title and content for toggles, It is illustrated with image below:

    image

    +>Table: include Pricing table and Check table

    Pricing table:

    [upside_price_tables column_per_row="4"]
    [upside_price_table title="Price title" price_value="09" price_currency="$" price_per="Month" special_text="" features="Feature 1|Feature 2|Feature 3|Feature 4" btn_title="Sign-up" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [upside_price_table title="Price title" price_value="09" price_currency="$" price_per="Month" special_text="" features="Feature 1|Feature 2|Feature 3|Feature 4" btn_title="Sign-up" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [upside_price_table title="Price title" price_value="09" price_currency="$" price_per="Month" special_text="" features="Feature 1|Feature 2|Feature 3|Feature 4" btn_title="Sign-up" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [upside_price_table title="Price title" price_value="09" price_currency="$" price_per="Month" special_text="" features="Feature 1|Feature 2|Feature 3|Feature 4" btn_title="Sign-up" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [/upside_price_tables]

    Example:

    [upside_price_tables column_per_row="4"]
    [upside_price_table title="Starter" price_value="09" price_currency="$" price_per="Months" special_text="" features="Lorem ipsum dolor sit amet, consect etur adipiscing.|10GB Space amount|30GB Bandwidth|Unlimited data transfer" btn_title="Sign-up-" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [upside_price_table title="Basic" price_value="29" price_currency="$" price_per="Month" special_text="Best theme" features="Lorem ipsum dolor sit amet, consect etur adipiscing|10GB Space amount|30GB Bandwidth|Unlimited data transfer" btn_title="Sign-up" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [upside_price_table title="Classic" price_value="49" price_currency="$" price_per="Month" special_text="" features="Lorem ipsum dolor sit amet, consect etur adipiscing|10GB Space amount|30GB Bandwidth|Unlimited data transfer" btn_title="Sign-up" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [upside_price_table title="Premium" price_value="99" price_currency="$" price_per="Month" special_text="" features="Lorem ipsum dolor sit amet, consect etur adipiscing|10GB Space amount|30GB Bandwidth|Unlimited data transfer" btn_title="Sign-up" btn_link_to="#" btn_link_target="_blank"][/upside_price_table]
    [/upside_price_tables]

    It is illustrated with image below:

    image

    Check table:

    [upside_check_tables]
    [upside_check_table title="Column title" features="Feature 1|Feature 2|Feature 3|Feature 4|Feature 5" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="0"][/upside_check_table]
    [upside_check_table title="Column title" features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [upside_check_table title="Column title" features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [upside_check_table title="Column title" features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [upside_check_table title="Column title" features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [/upside_check_tables]

    Example:

    [upside_check_tables]
    [upside_check_table title="List" features="Category 1|Category 2|Category 3|Category 4|All Category" btn_title="Buy" btn_link_to="#" btn_link_target="_blank" btn_show="0"][/upside_check_table]
    [upside_check_table title="title" features="check|check|check|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [upside_check_table title="title" features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [upside_check_table title="title" features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [upside_check_table title="title" features="check|check|uncheck|uncheck|Description" btn_title="Buy now" btn_link_to="#" btn_link_target="_blank" btn_show="1"][/upside_check_table]
    [/upside_check_tables]

    It is illustrated with image below:

    image

  5. Dropcap Includes styles: Transparent and Circle
  6. select style and add content to your dropcap in code below:

    +>Style: Transparent [upside_dropcap class="kp-dropcap-1" f_char=""][/upside_dropcap]

    +>Style: Circle [upside_dropcap class="kp-dropcap-2" f_char=""][/upside_dropcap]

    Example:

    [upside_dropcap class="kp-dropcap-1" f_char="S"]orem ipsum dolor sit amet, scelerata nunc intuens munus oblitus ait regem orem ipsum dolor sit amet, scelerata nunc intuens munus oblitus ait regem orem ipsum dolor sit amet, nihil docta mare non coepit. Scitote si Ave de memor cresceret nomina petitus. Lavabat quo sanctis oravit ecce sit in rei finibus veteres hoc. Suam ut diem finito servis nomine adventu nihil docta mare non coepit. Scitote si Ave de memor cresceret nomina petitus.[/upside_dropcap]

    The following image will illustrate for above shortcode with 2 styles:

    image

  7. Alert box shortcode: Click on Alert symbol, select options (Blue, Yellow, Green, Pink, Sky), it displays code blow:
  8. +>Blue: [upside_alert class="alert alert-dark-blue alert-dismissable" font_awesome_icon="fa fa-check"][/upside_alert]

    +>Yellow: [upside_alert class="alert alert-yellow alert-dismissable" font_awesome_icon="fa fa-gavel"][/upside_alert]

    +>Green: [upside_alert class="alert alert-green alert-dismissable" font_awesome_icon="fa fa-pencil"][/upside_alert]

    +>Pink: [upside_alert class="alert alert-pink alert-dismissable" font_awesome_icon="fa fa-bolt"][/upside_alert]

    +>Sky: [upside_alert class="alert alert-sky alert-dismissable" font_awesome_icon="fa fa-umbrella"][/upside_alert]

    Example:

    [upside_alert class="alert alert-dark-blue alert-dismissable" font_awesome_icon="fa fa-check"][/upside_alert]

    Enter content for style of alert, It is illustrated by the image below:

    image

  9. Button shortcodes: Click on Button symbol, displaying 5 styles: Pink (Small, Medium, Large, Small with border, Medium with border, Large with border), Blue (Small, Medium, Large, Small with border, Medium with border, Large with border), Navy (Small, Medium, Large, Small with border, Medium with border, Large with border), Green(Small, Medium, Large, Small with border, Medium with border, Large with border), and Red( Small, Medium, Large, Small with border, Medium with border, Large with border), it displays code like below:
  10. +>Pink:

    Small: [upside_button class="kopa-button pink-button small-button kopa-button-icon" link="#" target=""][/upside_button]

    Medium: [upside_button class="kopa-button pink-button medium-button kopa-button-icon" link="#" target=""][/upside_button]

    Large: [upside_button class="kopa-button pink-button large-button kopa-button-icon" link="#" target=""][/upside_button]

    Small with border: [upside_button class="kopa-button kopa-line-button pink-button small-button kopa-button-icon" link="#" target=""][/upside_button]

    Medium with border: [upside_button class="kopa-button kopa-line-button pink-button medium-button kopa-button-icon" link="#" target=""][/upside_button]

    Large with border: [upside_button class="kopa-button kopa-line-button pink-button large-button kopa-button-icon" link="#" target=""][/upside_button]

    Example:

    upside_button class=kopa-button pink-button small-button kopa-button-icon" link="http://kopatheme.net/demo/upside" target="_blank"]Small Button[/upside_button]

    Enter link, target, content for button, the following image will illustrate for above shortcode with styles:

    image

  11. Caption Click on Caption symbol, it display code blow:
  12. [upside_caption title='Title']Description[/upside_caption]

    Example: [upside_caption title='Button']See our features courses or see all courses to see all.[/upside_caption]

    Enter title and description, the following image will illustrate for above shortcode

    image

  13. Blockquote Click on Blockquote symbol, it display code blow:
  14. [upside_blockquote][/upside_blockquote]

    Example: [upside_blockquote]Originally a web designer, Kai launched the first Offscreen magazine in early 2012 after wanting to create something more physical and lasting. Offscreen explores the lives of people in our industry outside of work, and is still a one-man operation, now on it’s tenth issue. Kai also publishes a weekly newsletter The Modern Desk.[/upside_blockquote]

    The following image will illustrate for above shortcode

    image

  15. Progress Click on Progress symbol, displaying 2 styles: Small and Medium, it displays code like below:
  16. [upside_progress class="pro-bar-wrapper pro-blue" icon_text="" font_awesome_icon="fa fa-code" bar_percent="85" bar_delay="400"][/upside_progress]

    Example: [upside_progress class="pro-bar-wrapper pro-blue" icon_text="Ps" font_awesome_icon="fa fa-code" bar_percent="85" bar_delay="400"]Photoshop[/upside_progress][upside_progress class="pro-bar-wrapper pro-blue" icon_text="Ai" font_awesome_icon="fa fa-code" bar_percent="75" bar_delay="400"]Illutrator[/upside_progress][upside_progress class="pro-bar-wrapper pro-blue" icon_text="" font_awesome_icon="fa fa-code" bar_percent="65" bar_delay="400"]Html/css[/upside_progress][upside_progress class="pro-bar-wrapper pro-blue" icon_text="" font_awesome_icon="fa fa-comment" bar_percent="55" bar_delay="400"]Communication[/upside_progress]

    The same with Medium style and pink color, the following image will illustrate for above shortcode

    image

H. Create Categories - Posts - Toolkit plugin - Custom Menu- top

As you can imagine, most of the site content will be posts and images associated with such posts. Categories allow for a broad grouping of such post topics. Now we will start creating categories and publish a few posts.

1. Create Category

  1. Go to Posts > Categories
  2. Enter new Category name.
  3. Scroll down and click on "Add Category". A newly created category will appear. You can then repeat the steps to create more categories.

With our Kopatheme Framework, you can customize the layout for each category. Follow the procedures listed below:

  1. Click in Category name or Edit hyperlink to edit category

  2. Scroll down to the bottom of the page, like shown in the image. Check the check box to enable customization for this category. If this is unchecked, this category will use the default settings for all categories that has been set in the Layout Manager

    image

  3. Now, you can select layout and sidebar for this category

2. Create posts

Posts are usually stored under Categories and/or Tags so you can keep related topics together. Now, we will create some posts for our category.

Go to Posts > Add New then carry out following steps

  1. Check to the Screen Option to showing the components used to configure
  2. Enter title post
  3. Enter post content, you can use shortcode to create post content
  4. Check 1 format for post such as: standard, video, gallery, audio in meta box
  5. You can chose single category or multi categories which have been created before or create a new category for post by clicking on hyperlink Add new category
  6. You can assign single tag or multi tags existed before or create new tags by entering a tag and click Add button to create
  7. Scroll down and click on the "Set featured image" link on right-bottom side of your page. A small box will appear. Click on "Upload File". Browse and select the file from your computer and upload. Finally, set it like "Featured Image" to complete the process.
  8. You can create rating option for your post, it will be displayed on the front-end by progress bar at the overview position of single post
  9. This part help you custom featured image using shortcode, url link on the single post with formats of video (vimeo, youtube), gallery, audio (soundcloud), quote insteal of displaying featured image upload in part 7, it will use featured image using shortdode which are installed in this part How to make your gallery, video, audio, and other post types pop by using post formats. 
  10. Custom featured image size: in this part, you can upload featured image by sizes for each meta box ( example: upload featured image size for Blog featured, Blog featured full). When you use to custom featured image size, the more priority use to upload featured image
  11. Discussion: check in checkbox, if you want to be enable function comment in single post
  12. Custom layout: you can custom layout for each post by click on checkbox to configure the layout for the post. If you do not custom in this step, single post will take the default configuration layout which are installed in Layout Manager general
  13. Finally, likesign the post to an appropriate category and click "Publish" button to make the post live.

With our very flexible Kopatheme Framework, you can customize the layout for each individual post. The procedure is like same as to customize layout for category above

How to make your gallery, video, audio, and other post types pop by using post formats. 

That’s the same blog with the same content as default post format— the only difference is post formats!

To use post formats:

  1. Click the New Post button.
  2. Choose Gallery, AudioVideo, or Quote.
  3. Add some content and publish! Depending on your theme, you’ll see some stylistic differences between this post and your posts with the default Post format.
  4. At Featured content , you can add gallery ID ( same as [gallery ids="226,225,224"]) or Vimeo url (https://vimeo.com/ondemand/shortterm12) to create posts with post format into text area.

If you do not see the Featured content module, check that you have it enabled in your Screen Options

 

3. Brands Post -Type

To create a New Brand, follow the steps:

Go to Dashboard >> Brands >> Add New

  1. Enter Brand's name
  2. Enter Brand's content
  3. Add new tags or assign exited tags
  4. Add featured image for your brands
  5. Enter your website/Blog for brand
  6. Click Update button to finish

You can see the following illustration

image

You also see events created in "All Brands"

 

4. Services Post -Type

To create Service Post -Type, follow steps:

Go to Dashboard >> Services >> Add New

  1. Enter Service's name
  2. Enter Service's exerpt( Excerpts are optional hand-crafted summaries of your content that can be used in your theme)
  3. Select a icon awesome or upload your icon, enter link for icon
  4. Add new service tag or assign existed service tags
  5. Upload your featured image for your services
  6. Click Update button to finish

You can see the following illustration

image

After clicking to "select icon for service",the list of icon picker will be displayed on the screen, select the icon you want.

image

You can see all services in All Services

 

5. Members Post -Type

To create Members Post -Type, do the following steps:

Go to Dashboard >> Members >> Add New

  1. Enter member's name
  2. Enter member's content
  3. Enter member detail( Position, Facebook, Twitter, Google plus, Instagram)
  4. Add new member department or assign existed member department
  5. Upload featured image of member
  6. Click Update button to finish

You can see the following illustration.

image

All Members are created in All Members

 

6. Document Post -Type

To create Documents Post -Type, do the following steps:

Go to Dashboard >> Documents >> Add New

  1. Enter document's name
  2. Enter document's content
  3. Select icon for document
  4. Add new document tag or assign existed document tags
  5. Upload featured image of document
  6. Click Update button to finish

You can see the following illustration.

image

All Documents created are in All Documents

 

7. Course Post -Type

To create Course Post -Type, do the following steps:

Go to Dashboard >> Course >> Add New

  1. Enter course's name
  2. Enter course's content
  3. Enter course details ( course ID, start date, end date, duration, regular price, sale price, Text before price, select Yes to is hot course, address, Contact Phone, Contact email, Speakers, Download Button Text, Download Button Link, Link to woocomerce product( Enter ID of product), Join Button Text, Join Button Link( Link of Join button incase not link to any product))
  4. Add new course category or assign existed course categories
  5. Upload featured image of course
  6. Click Update button to finish

Note: In case you enter ID of product, your single course will display price of woocomerce product is created in Product, if not, it will display string of regular price and sale price

You can see the following illustration.

image

All Course are created in All Courses

 

8. Forum Post -Type

To create Forum Post -Type, do the following steps:

Go to Dashboard >> Forum >> Add New

  1. Enter forum's name
  2. Enter forum's content
  3. Forum Attributes ( select options: Type( Forum or Category), Status ( Open or Close), Visibility, Parent, Oder)
  4. Click Update button to finish

You can see the following illustration.

image

All Forum are created in All Forums

 

9. Topic Post -Type

To create Topic Post -Type, do the following steps:

Go to Dashboard >> Topic >> Add New

  1. Enter topic's name
  2. Enter topic's content
  3. Topic Attributes ( select options: Type( Normal, Sticky or Supper Sticky), Status ( Open, Close, Spam, Trash, or Pending), Forum( select one forum or no parent))
  4. Add new topic tag or assign existed topic tags
  5. Click Update button to finish

You can see the following illustration.

image

All Topic are created in All Topic

 

10. Reply Post -Type

To create Reply Post -Type, do the following steps:

Go to Dashboard >> Reply >> Add New

  1. Enter reply tite
  2. Enter content for reply
  3. Reply Attributes ( select options: Forum( select one forum or no parent), topic, reply to)
  4. Click Update button to finish

You can see the following illustration.

image

All Reply are created in All Reply

 

11. Create Custom Menu - top

To create a custom menu, go to Appearance > Menus in your dashboard.

Creating a Menu
  1. To create a custom navigation menu, in "Edit Menus" tab, click Create a New Menu. Then enter menu name, click "Create Menu" button.
  2. Adding Pages and Categories to Your Menu: Adding pages or Categories to your menu is as simple as checking the proper boxes for the pages you want and then clicking Add to Menu.

  3. Creating a custom menu allows you to do the following things:
    • Change the order of pages in your menu, or delete them.
    • Create nested sub-menus of links, also referred to like "drop-down" menus
    • Create links to category pages allowing you to collect together posts blikeed on that category
    • Add custom links to other sites
  4. Note: When we click on any menu, we can customize this menu
    • Enter the Navigation Label to display in the menu.
    • Enter the title attribute which display when you hover on the Label

Manage Menus Location

This theme supports 3 menus location (Icon Menu, Main Menu and Mobile Menu). In "Manage Locations" tab, you have to select menus to display for each location

Be sure to click Save Menu each time you make changes to your custom menu.

 

Create Mega Menu

Step 1: Go to Appearance >> Theme Options >> Sidebar Manager tab: create three sidebars for Mega Menu ( ex: Mega menu 1, Mega menu 2, Mega menu 3)

Step 2: Go to Appearance >> Widgets:

+> Drag and drop (Upside) Lite Custom Menu widget into the Mega menu 1 sidebar and configure it (See Custom Widget - (Upside) Lite Custom Menu)

+> Drag and drop Custom Menu widget into the Mega menu 2 sidebar and configure it

+> Drag and drop (Upside) Lite Grid Events widget into the Mega menu 3 sidebar and configure it (See Custom Widget - (Upside) Lite Grid Events)

Step 3: At Setting part of Edit Mega menu: Select each sidebar name for sidebar 1 ( 25%), sidebar 2 ( 25%), sidebar 3 ( 50%) as follow image:

a

Step 4: Go to Appearance >> Mega Menus>> All Mega Menus: Copy shortcode of mega menu

Step 5: Go to Appearance >> Menus: Click Select Main menu, then check on checkbox ' Description' at Screen Option, at mega menu part paste shortcode of mega menu created then click Save Menu to save.

a

End Review mega menu in front-end

J. How to setup the demo site - top

In order to set up the site like our demo, you can follow steps below:

We offer you a demo backup all setting file with name kopatheme.net -demo-upside-backup-all-settings.json. When you import this file, it will automatically import all setting includes Layout manager, Sidebar manager, General settings like we set up in demo site. You can following instraction below

Step 6.1: Go to Apperance >> Theme Options >> Backup Tab >> Import/Export

Step 6.2: Click the Browse button and locate the kopatheme.net-demo-upside-backup-all-settings.json file that is inside the the folder and double click the file to select it and then click the Import button.

Step 7: Import demo widgets file

We offer you a demo widget file with name kopatheme.net-demo-upside-widgets.wie. When you import this file, it will automatically Dragging and dropping all widgets to default sidebar like we use in demo site.

To import this file .wie you'd like install Widget Importer & Exporter plugin. You have to do following

Step 7.1: Install and active Widget Importer & Exporter plugin

Step 6.2: Go to Tools >> Widget Importer & Exporter: browse demo widget file to import

Import success, all widgets be dragged to default sidebar and your task is to config parameters such as title, category, tag, title, excerpt length, number of post, etc in the widgets because your element can unlike ours.

Note: it is possible that when importing the demo widgets will be encountered some errors as the site does not display data in some areas, you can go to Appearance >> Widgets to choose the categories / tags for the widgets, then click the Save button to save.

L. Translation - top

If you are familiar with WordPress and the many plugins and Themes available for it, you've probably come across some strangely named files like .mo, .po, and .pot. This discussion is aimed at explaining how to take a .po file that is included with this Theme and translate it to your native language.

SUMMARIZED INSTRUCTIONS:
  1. Download and install the translation Poedit program.
  2. Open the Upside/languages/en_US.po file with Poedit. Translate the file to your languages with Poedit. For more information, click here.
  3. Define your language inside wordpress/wp-config.php file. Open wp-config.php file in any text editor and look for the following code:

    define ('WPLANG', '');

    Enter a parameter for WPLANG. This is generally in a format like language_country. For example, en_US, or de_DE. So, this line will change to:

    define ('WPLANG', 'de_DE');

    For more information.Click here

M. Updating The Theme - top

Once a new update becomes available for the theme, you will notice an update notification in the admin panel. To apply the update the theme needs to be downloaded once again and then reinstalled following the steps 1 - 8 mentioned in section above.

N. Sources and Credits - top

I've used the following images, icons or other files like listed.

Thank you so much for purchasing this Theme. If you have any question relating to themes please don't hesitate to ask your question at: kopatheme.com/forum

KOPATHEME
Email: kopatheme@gmail.com
Support: kopatheme.com/forum

Designed and Developed by: kopatheme.com

 

Go To Table of Contents