“ADMAG – RESPONSIVE WORDPRESS THEME …Woocommerce plugin Setting WooCommerce To create...

1

“ADMAG – RESPONSIVE WORDPRESS THEME

DOCUMENTATION”

Created: February 8, 2015

Version: 1.0.+

WordPress Theme Developed by: Kopatheme.com

Email: [email protected]

After activating the theme please ensure that all required settings mentioned herein 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 perfectly

unless the required settings have been configured properly, as per the details mentioned on

this documentation.

http://kopatheme.com/

2

Table of Contents

A. Theme Installation……..……………………………………………………………………………..……….......5

B. Using Plugins in Admag theme……..………………………………………………………………………..8

1. Page Builder plugin………………………………………………………………………..………................9

2. Admag Toolkit plugin………………………………………………………………………..…………….....10

3. Woocommerce plugin………………………………………………………………………..…………........10

C. Demo Content………………………………………………………………………..………............................14

D. Theme Options Customization ……..……………………………………………………………………...16

1. Theme Options……..……………………………………………………………………………….……….….16

2. Sidebar Manager……..……………………………………………………….………………….……….…….18

3. Layout Manager………………………………………………………………………..………....................20

1. Setup Home Page………………………………………………………………………..…………......21

2. Setup Front Page………………………………………………………………………..………..........21

3. Setup Page………………………………………………………………………..…………………….....22

4. Setup Post………………………………………………………………………..……….....................22

5. Setup Search Page………………………………………………………………………..……….........22

6. Set up Error 404 Pages…………………………………………………………………….………......23

7. Set up Shop Pages………………………………………………………………………..………..........23

8. Set up Single Product Pages………………………………………………………………………..….23

4. Backup………………………………………………………………………..……………………………….…......23

E. Custom Widgets………………………………………………………………………..………...........................26

1. Kopa Accordion Slider………………………………………………………………………..……….............26

2. Kopa Article Category………………………………………………………………………..………..............28

3. Kopa Articles List………………………………………………………………………..……….....................30

4. Kopa Masonry………………………………………………………………………..………………………….....52

5. Kopa Mega Menu Article List………………………………………………………………………..……......59

6. Kopa Newsletter………………………………………………………………………..……….......................62

3

7. Kopa Page………………………………………………………………………..………………………….…......64

8. Kopa Product Categories………………………………………………………………………..………........65

9. Kopa Product………………………………………………………………………..………..........................66

10. Kopa Recent Comment………………………………………………………………………..………...........67

11. Kopa Submenu Megamenu………………………………………………………………………..……….....69

12. Kopa User………………………………………………………………………..……………………………........70

13. Kopa Widget Ads………………………………………………………………………..……….....................71

14. Kopa Widget FB Fan………………………………………………………………………..………...............72

15. Kopa Widget Page Contact………………………………………………………………………..………......74

16. Kopa Widget Quote………………………………………………………………………..………..................77

17. Kopa Widget Social………………………………………………………………………..………..................78

18. Kopa Widget Social Counter………………………………………………………………………..……….....79

F. Custom Shortcode Generator………………………………………………………………………..………....81

G. Create Categories - Posts - Toolkit plugin - Custom Menu……………………………………..88

1. Create Category………………………………………………………………………..………........................88

2. Create Posts………………………………………………………………………..………..............................92

3. Create Custom Menu………………………………………………………………………..…………………....93

4. Create Mega Menu………………………………………………………………………..…………………........94

H. Create pages………………………………………………………………………..………...................................99

1. Create Home page 1………………………………………………………………………..………..................99

2. Create Home page 2………………………………………………………………………..……….................102

3. Create Home page 3………………………………………………………………………..……….................107

4. Create Home page 4………………………………………………………………………..……….................111

5. Create Contact Page………………………………………………………………………..……….................115

6. Create Blog Right Sidebar………………………………………………………………………..………........117

I. How to setup the demo site………………………………………………………………………..………........119

J. Translation………………………………………………………………………..……………………………………....124

4

K. Updating the Theme………………………………………………………………………..………………….......125

L. Sources and Credits………………………………………………………………………..………....................125

5

A. Theme Installation

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 Admag

theme. The process of installation is very easy. Here are the simple steps to upload and

install Admag theme:

- Step 1: Download the Admag theme files from your download page with name file

"Admag-downloaded-package.zip ". The downloaded file consists of not only theme

file but also demo data, document, etc.

- Step 2: Unzip the file "Admag-downloaded-package.zip ". Once the file has been

unzipped you will notice a file named Admag. This is the theme file.

- Step 3: Login to the WordPress control panel of your website.

- Step 4: From your Dashboard, go to Appearance Themes.

Click "Add New" in either way.

6

Click “Upload Theme”

7

- Step 5: Click Choose File to find the file Admag.zip on your computer and click Install

Now.

- Step 6: Finally, click Activate to activate it.

After activation, preview this theme you will see the theme looks quite empty, you will see your

website appear a message "Missing core plugin for theme Admag. Please install plugin Kopa Page

Builder to run the theme" that requests to install and activate plugins to use this theme.

Besides, Admag theme also require to install some plugins as follows:

Admag Toolkit plugin - A specific plugin use in Admag Theme to help you register post types and

widgets.

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

8

B. Using Plugins in Admag theme

With our Admag theme, you must install and activate Page Builder plugin to use the theme.

Besides, you must install plugin Admag toolkit to activate shortcodes, event plugin, portfolios

plugin, staff plugin, services plugin, slides plugin, testimonials plugin. Moreover, Admag theme also

supports Woocommerce plugin to create ecommerce website.

From your Dashboard, there’s a notice about installing Admag Toolkit, Kopa Page

Builder, and WooCommerce.

- Step 1. Click "Begin installing plugins"

- Step 2. Click “Install”

9

After the plugins installed successfully, preview the theme it will show here:

1. Page Builder plugin

After installing and activating the theme, you cannot use the theme yet, you will see a message

displayed at the top of the page that request Page Builder installation. This plugin has been

integrated when you buy our theme.

Using Page Builder plugin makes you easy to create and custom pages without depending on

creating sidebars. Especially, when you purchase our Admag theme, if you want to build a demo

version which is the same as our demo, Page Builder will help you carry out this task. You only

need to install the theme, install required plugins and import our demo data.

Create page used Page Builder

- Step 1: At a new page, scroll down to Page Builder where you can customize the page

including choosing rows, adding widgets, etc. as shown in the image. If you do not see the Page

Builder module, check that to make it enable in your Screen Options.

10

- Step 2: To create each page to be properly structured, you should consider our guide in the

part Create pages

Click on the customize icon to customize the row according to the above structure

Custom CSS: click Yes to activate if the row has this class, if not, choose No

When you choose Yes button, you can custom CSS to create style for this page or for each row.

Click Save button to save changes.

- Step 3: To add widgets, you can follow Custom widgets items to properly configure the

widgets

2. Admag Toolkit plugin

Install and activate the plugin to use shortcodes, mega menus

3. Woocommerce plugin

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

11

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 Admag 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 in detail 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.

Using shop page in Admag

1. Creating new categories: Product Categories

12

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

13

- In General Tab, you can select pages where this product will be displayed. Check on the

Featured box to enable this option to feature this product.

- Enter the Regular Price and Sale Price.

- To disable default WooCommerce stylesheets, go to WooCommerce Settings General

Check Disable front-end styles box

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

- In Shipping: You can add weight, dimension, shipping class as you want.

- In Linked Product: You can search for a product up-sells, cross-sells.

- In Attributes: You can add extra attributes as you choose.

- 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 on the frontend.

4. Enter the SKU code for product

5. Enter Regular Price

6. Enter Sale Price

7. Enter short description for product

8. Add new categories product or assign existed categories

9. Add new tags product or assign existed tags

10. Add Product gallery images to create list of product images

11. Add featured image for your product

12. Click Save button to save changes.

14

C. Demo Content

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 demo content file, you will have pages such as index, about which

we installed on demo site .

To import demo content, you can follow these steps:

- Go to Tools Import and select the WordPress option. If you are prompted to install the

WordPress Importer plugin you should do this.

http://kopatheme.net/demo/admag

15

- Click the Choose file button and locate the demo-data.xml file that is inside the folder and

double click the file to select it and then click the Upload file and import button

- A new screen will appear like that, check the Download and import file

attachments option and click Submit.

16

D. Theme Options Customization

1. Theme Options

Go to Appearance Theme Options. You will find all the options that the Admag theme offers

right here. Here they are:

1. General settings:

- Favicon: You can upload your site's favicon that display in tab bar of browsers

- Apple icon: You can upload your Apple icons for iPhone device (75px - 75px), iPad (72px -

72px), iPhone Retina (114px - 114px), iPad Retina (144px - 144px)

- Default Thumbnail: you can choose enable or disable default thumbnail. If you check on

option "Enable", you can upload your thumbnail URL.

- Excerpt Length: Allows you to customize the length of excerpt in front page and blog.

- Breadcrumb: Allows you to show / hide breadcrumb in single posts, pages.

- Readmore: Allows you to show / hide readmore in single posts, blog, etc.

17

- Custom Footer Description: Enter the content you want to display in your footer (e.g.

copyright text).

- Google Analytic: Enter Google Analytic code.

2. Headline

In setting part, select categories, number you want to display, enter title for headline

3. Logo

You can upload main logo in header and adjust padding (padding top (px), padding right (px),

padding bottom (px), padding left (px)).

You can upload Logo Bottom and enter description logo bottom for footer part.

4. Social Links

- Social links Target: Open the linked document in the same frame or in a new tab.

- Social Links: Enter your various social links here such as Facebook link, Twitter link,

Google Plus link, LinkedIn, Pinterest and Tumblr URL.

5. Single post

- Meta data on post: Show or hide date on post

- Author Post: Show or hide Author in single post

- Post Navigation: Show or hide navigation on post

- About Author: Show or hide About Author in single post

- Related Posts: You can enter title, subtitle for related post, choose related posts get by tag

or category. You also can choose to limit the number of post.

6. Rating

You can enter result text for levels (level 1, level 2, level 3, level 4, level 5)

7. Custom Color

When you check on Enable custom color, you can customize Main color

18

8. Custom Font

Custom font manager: You can upload your font from your computer then click Save Options,

font uploaded shown in select box Body font, Top Menu font, Sub Main Menu Font, Heading

font, Post Content font and Widget title font

You can change Body, Top menu, Main menu, sub-main menu, Widget title, Post content and

Heading (H1, H2, H3, H4, H5, H6) and custom font weight, font size, font color for them

9. Custom CSS

You can add additional CSS to your code. This CSS code is saved in Database and it isn't lost

when we update new theme

10. Page builder

You can checkbox to use sticky toolbar

2. Sidebar Manager

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 Widget

To create a new sidebar, follow these steps:

- Step 1: Click Appearance Theme option Sidebar Manager

- Step 2: Enter sidebar name, click Add sidebar button.

- Step 3: You can enter description for created sidebars.

To rename default/ existing sidebar, follow the steps:


- Step 2: Click on sidebar name you want to rename

- Step 3: Click on sidebar name, description you want to rename.

To delete default/ existing sidebar, follow the steps:

19


- Step 1: Click on sidebar name you want to delete

- Step 2: Click Delete on the below of the sidebar name you want to delete.

Finally, Click Save Options button to save.

1. Enter new sidebar name 3. Rename sidebar name 5. Click if you want to delete

sidebar

2. Click to add new sidebar 4. Enter or edit description for sidebar

20

Note: Advanced Setting described on this page includes advanced options are used for

professional developers.

3. Layout Manager

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

- Step 1: Select layout you like for the page.

- Step 2: Choose sidebar for each widget area.

- Step 3: Come to Appearance Widgets page to drag-drop widgets to each sidebar.

21

1. Setup Home Page

Click Appearance Layout Manager Home. 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

Firstly, Click Settings Reading. Select the page which you intend to show as your front

page from Home page display.

22

Click Appearance Layout Manager Front Page If you want to change layout of front

page, Click SELECT THE LAYOUT: Page Right Sidebar. Next select the sidebars into the

appropriate Widget Areas (as shown in the image) to be displayed. You can use Page Builder to

setup for front page

3. Setup Pages

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.

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

5. Set up Search Result

23

Click Appearance Layout Manager Search Result. Search page shows search results.

Setup Blog page layout for Search page on the site.

6. Set up Error 404 Page

Click Appearance Layout Manager Error 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.

7. Set up Shop Pages

Click Appearance Layout Manager Shop. Setup Shop right sidebar layout for Shop on

the site.

8. Set up Single Product Pages

Click Appearance Layout Manager Single Product. Setup Single product layout for

Single page on the site

4. Backup

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, and sidebar

manager.

To implement the backup Appearance Theme Options Backup tab

Restore Default Settings

Select one of the following options:

24

- All Setting: Come back the default for 2 tabs: Sidebar Manager, Layout Manager

- Sidebars & Layouts: Come back the default for 2 tabs: Sidebar Manager and Layout manager

Click Restore Defaults to finish the backup

Import/Export Setting

Besides Restore function, you also can import/export setting; you can export and import settings if

your host has problem forcing to reinstall the website.

- Export Setting: Kopa Framework will create a file with .json format to backup all

configurations of theme options includes Layout manager, Sidebar manager, General settings.

This file can be used to restore your settings if someday your web has problem forcing to

reinstall, or you can easily setup another website with the same settings.

Go to Appearance Theme Options Backup Tab Import/ Export tab to perform

the backup, you can select one of following options:

All Setting (This will contain all of the option listed below): It will make the backup for all

setting (contain Theme Option, Sidebars & Layout).

Sidebars & Layouts: It will make the backup for 2 tabs: Sidebar Manager & Layout manager

Click Download Export File button to export .json file

25

- Import Setting: If you have settings in a backup file on your computer, the Kopa Framework

can import those to this site.

26

E. Custom Widget

WordPress Widgets add content and features to your Sidebars. Here we give you some examples of

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 drag and drop it to the

Sidebar and refresh the appropriate page to display its content.

1. Kopa Accordion Slider

Display your accordion sliders on the front end. Drag and drop Kopa Accordion Slider widget to

the sidebar or the area you want to display.

(1) - Enter Title for widget.

(2) - Choose Categories

(3) - Select Relation = AND/OR - Display posts which both belong to categories and/or selected

tags

(4) - Select Tag (You can select single tag or multi tag)

(5) - Select Order to arrange the displaying order of posts according to ASC or DESC

(6) - Select Order by to arrange the displaying order of posts according to Date, Random or

Number of comment.

(7) - Number of posts: custom the number post which are appeared on the frontend (default is 5)

Click Save button to save change and click Close to close widget.

28

It displays the same as here:

2. Kopa Article Category

Display article list in categories on the front end. Drag and drop Kopa Article Category widget to

the sidebar or the area you want to display.


(2) - Enter Sub Title for widgets

(3) - Choose Categories


tags




Number of comment.



30

It displays the same as here:

3. Kopa Articles List

Display a list of articles with many styles for your choice. Drag and drop the widget to the sidebar or

the area you want to display.

(1) - Add Title of the widget.

(2) - Add Sub Title of the widget.

(3) - Select Categories (You can select single category or multi categories, if you do not select any

category, your website will show all posts with gallery format in all categories.


tags

(5) - Select Tag (You can select single tag or multi tag, if you do not select any tag your website will

show all posts with gallery format.)



Number of comment.


(9) - Custom excerpt length: custom the length of word displayed.

31

(10) - Style: You can choose 22 styles

(11) - Post per page: show number of posts in a page

(12) - View More URL: you can enter URL link where you want


33

With Style 1, it will display a list of posts with small thumbnail by 1 column as Footer part follows:

With Style 2 Home 1, it will display a list of posts with order-number as Home page 1 follows:

34

With Style 3 Home 1, it will display a list of posts with column 1 is large thumbnail, column 2 is

medium thumbnail as Home page 1 follows:

35

With Style 4 Home 1, it will display a list of posts with square thumbnail as Home page 1 follows:

36

With Style 5 Home 1, it will display a list of posts with large thumbnail above, small thumbnail at

2 column below as Home page 1 follows:

37

With Style 6 Home 1, it will display a list of posts with medium thumbnail by 3 column as Home

page 1 follows:

38

With Style 7 Home 1, it will display a list of posts no thumbnail with View All link below as Home

page 1 follows:

With Style 8 Home 1, it will display a list of posts large thumbnail by 1 column as Home page 1

follows:

39

With Style 9 Home 1, it will display a list of posts large thumbnail with page pagination below as

Home page 1 follows:

40

With Style 10 Home 1, it will display a list of posts medium thumbnail with rating star as Home

page 1 follows:

41

With Style 11 Home 1, it will display a list of posts with rating result for each post as Home page

1 follows:

42

With Style 12 Home 1, it will display one post with small thumbnail above and a list of posts

below as Home page 1 follows:

43

With Style 13 Home 1, it will display posts with large thumbnail above and a list of posts with

small thumbnail below as Home page 1 follows:

44

With Style 14 Home 2, it will display a list of posts with View more link and black background as


45

With Style 15 Home 2, it will display a large thumbnail post above and list of small thumbnail

posts below as Home page 2 follows:

46

With Style 16 Home 2, it will display a large thumbnail post above and a list of posts below with

social link and total number of view at footer part as Home page 2 follows:

47

With Style 16 Blog 1, it will display a large thumbnail post above and a list of posts below with

social link and total number of view at footer part as Blog 1 follows:

48

With Style 17 Home 3, it will display a list of posts same as style 4 Home 1 but adding author

post as Home page 3 follows:

49

With Style 18 Home 4, it will display a list of posts by 3 column with carousel effect as Home

page 4 follows:

With Style 19 Home 4, it will display a list of posts by 2 column with carousel effect and display

time play of videos as Home page 4 follows:

50

With Style 20 Home 4, it will display a list of posts by 4 column with carousel effect and display

time play of videos as Home page 4 follows:

With Style 21 Home 4, it will display a list of posts by 3 column with carousel effect and title

widget into black background as Home page 4 follows:

51

With Style 22 Home 4, it will display a big post above and a list of posts below with page

pagination as Home page 4 follows:

52

4. Kopa Masonry

Show grid article list with masonry. Drag and drop the widget to the sidebar or the area you want to

display then select categories you want to show.

53


(2) - Add Sub Title of the widget.




tags

(5) - Select Tag (You can select single tag or multi tag, if you do not select any tag your website will

show all posts with gallery format.)



Number of comment.


(9) - Custom excerpt length: custom the length of word displayed.

(10) - Style: You can choose 8 styles

(11) - URL see more: you can enter URL link where you want (in case, Masonry style 2)

(12) - Post per page: show number of posts in a page


With Masonry Home 1, it will display list of articles as Home page 1 follows:

54

With Masonry 2 Home 1, it will display list of article with large image articles with See More

button as Home page 1 follows:

With Masonry 3 Home 1, it will display list of article with large image article in center area,

small thumb articles are left and right site as Home page 1 follows:

55

With style Masonry 4 Home 2, it will display list of article masonry by carousel slider effect


56

With style Masonry 5 Home 2, it will display list of article masonry by carousel effect Home page

2 follows:

57

With style Masonry 6 Home 3, it will display list of article masonry with Load more link Home

page 3 follows:

58

With style Masonry 7 Home 4, it will display list of article masonry as Home page 4 follows:

59

5. Kopa Mega Menu Article List

Show articles list on extension menu (called Mega menu). Drag and drop the widget to the sidebar

or the area you want to display and configure it.

60





tags


(5) - Select Order: To arrange the displaying order of posts according to ASC or DESC


Number of comment.

(7) - Number of posts: custom the number clients which are appeared on the frontend

(8) - Style: You can choose styles: Small thumbnail, Medium thumbnail and Large thumbnail

Click Save & Close button to save change.

With Style: Small thumbnail, it will display follows:

61

With Style: Medium thumbnail, it will display follows:

With Style: Large thumbnail, it will display follows:

62

6. Kopa Newsletter

Show subscribe form. Drag and drop the widget to the sidebar or the area you want to display and

configure it.


(2) - Enter Description

(3) - Select Services: Mailchimp or FeedBurner

(4) - Enter URL if use Mailchimp/ ID if use Feedburner

(5) - Style: choose Footer or Sidebar


63

With Style: Footer, it will display as Footer follows:

With Style: Sidebar, it will display as Right Sidebar follows:

Note: The steps to setup email subscription newsletter

Note: The steps to setup MailChimp Form

http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-setup-feedburner-for-wordpress/

http://docs.shopify.com/manual/configuration/store-customization/communicating-with-customers/accounts-and-newsletters/where-do-i-get-my-mailchimp-form-action

64

7. Kopa Page

Show Link to page, just drag a widget to sidebars


(2) - Page: Select pages you want to show on the frontend

Click Save & Close button to save change and close widget.

It will display as follows:

65

8. Kopa Product Categories

Show a list of product categories. Drag and drop the widget to the sidebar or the area you want to

display and configure it.


(2) - Categories: Select categories you want to show on the frontend with categories created

in Product Categories

Click Save & Close button to save change and close widget.

It will show as Right Sidebar Shop follow:

66

9. Kopa Product

Display a list of your products on your site. Drag and drop the widget to the sidebar or the area you

want to display and configure it.


(2) - Number of product to show: custom the number product which are appeared on the

frontend

(3) - Select Show - You can show product by: All Products, Featured Products, or On-sale Products


Number of comment.

(5) - Select Order: To arrange the displaying order of posts according to ASC or DESC


67

It will display here:

10. Kopa Recent Comment

Show recent comments


(2) - Enter Number of comment: You can enter number of comment you want to show.


68

It will display list of recent comments follows:

69

11. Kopa Submenu Megamenu

Show custom text on extension menu (called megamenu)


(2) - Menu: You can choose Menu name you want to display (created in Appearance >> Menu)

(3) - Style: You can select styles: No title or Standard


With style: No title, it will display here:

70

With style: Standard, it will display here:

12. Kopa User

Show user in role with avatar


(2) - Role: You can choose roles: Editor, Author, Contributor or Subscriber

(3) - Enter Number to show: You can enter number of users to show


71

It will display list of users follows:

13. Kopa Widget Ads

Show your ads, you can upload image from media library or your computer


(2) - Image: You can upload image from library media or your computer

(3) - Enter URL

(4) - Check on checkbox to open link in new tab or open link in same frame

(5) - Enter Use Code: You enter code such as Google ads...

(6) - Select Style Choose style: Standard or Full width

72


With Style: Standard, it will display here:

73

Or with Style: Full width, it will display here:

14. Kopa Widget FB Fan

Show Facebook fan box


(2) - URL Facebook page: You can enter URL link Facebook page.


74

It will display as follows:

15. Kopa Widget Page Contact

Display a list of your products on your site. Drag and drop the widget to the sidebar or the area you

want to display and configure it.

Enter Title widget, Place. Latitude, Longitude and Description, it will display on the frontend.


75

It will show on the frontend as Contact Page follow:

76

Note: At Google Map, you can see image following to enter your google map code: latitude,

longitude.

77

16. Kopa Widget Quote

Display a quote. With the widget, only display the quote, so you have to enter content and

description which there is the post including the quote. Drag and drop Kopa Widget

Quote widget into sidebar you want to display and configure it.

It will be displayed as Footer below:

78

17. Kopa Widget Social

Display social link, you can change title default. Drag and drop the widget to the sidebar or the area

you want to display and configure it.

It will show on the frontend as follow:

79

18. Kopa Widget Social Counter

Display social counter. Drag and drop the widget to the sidebar or the area you want to display and

configure it.


(2) - Enter Username Twitter

(3) - Enter Facebook Page ID or Name

(4) - Enter Username Youtube

(5) - Enter Google Plus ID

(6) - Enter Google API Key


80

It will display as below:

81

F. Custom Shortcode Generator

It would be impossible 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 available 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. Tabs

Include types: Horizontal and Verticle. Click Tab icon, select type of tabs, you will see like below:

82

[tabs type="1"]

[tab title="Tab 1"]Text 1[/tab]



[/tab]

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

Horizontal:

Vertical:

83

3. Accordion

Click Accordion icon then add title and content for Accordion as code below:

[accordions]

[accordion title="Accordion title"]Accordion content[/accordion]



[/accordions]

It is illustrated two styles with image below:

4. Toggle

Click Toggle icon then add title and content for Toggle as code below:

[Toggle]

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



84

[/Toggle]

5. Dropcap

Includes 2 styles: Standard and Black Background select style and add content to your dropcap in

code below:

[dropcap][/dropcap]

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

6. Quote

Click blockquote symbol, there are 3 options: Border Left, Border Top and Border Top Right. Enter

content for quote in code below:

85

Border Left: [quote type="border_left"][/quote]

Border Top: [quote type="border_top"][/quote]

Border Top Right: [quote type="border_top_right"][/quote]

The following image will illustrate for above shortcode with 3 options:

7. Quote with Image:

Click blockquote symbol Enter author name and content for quote in code below:

[blockquote author="author"][/blockquote]

The following image will illustrate for above shortcode:

86

8. Button shortcodes:

Click on Button symbol, displaying styles color: Blue, Green, Orange, Yellow, Green 1, Green 2 , Red,

Black, Pink, Purple, Green3, Brown 1, Brown 2, Gray 1, and Gray 2 , it displays code like below:

[button color="blue" target="_blank | _self " url="link"] Button Text [/button]

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

87

9. Social

Click on Social symbol, select type of display styles: Small, Medium and Large, it displays code

blow:

Style 1- Small: [social style="style1"][social_item target="_blank | _self " url="link" icon="fa-

facebook"][/social]

Style 2 - Medium: [social style="style2"] [social_item target="_blank | _self " url="link" icon="fa-

facebook"][/social]

Style 3 - Large: [social style="style3"] [social_item target="_blank | _self " url="link" icon="fa-

facebook"][/social]

You can enter link, target, and social icon. The following image will illustrate for above shortcode:

10. Highlight

11. List

88

G. Create Categories - Posts - Toolkit plugin - Custom Menu

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

- Go to Posts Categories

- Enter new Category name.

- Scroll down and click on "Add Category". A newly created category will appear. You can then

repeat the steps to create more categories.

89

With our Kopatheme Framework, you can customize the layout for each category. Follow the

procedures listed below:

90

1. Click on 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.

91

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

92

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

5. You can assign single tag or multi tags existed before or create new tags by entering a tag and

click Add button to create

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

7. You can select rating option for your post, it will be displayed on the frontend by progress

bar at the overview position of single post.

8. Discussion: check in checkbox, if you want to be enable function comment in single post

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

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

93

3. Create Custom Menu

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

94

- 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 (Top Menu, Main Menu and Footer 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.

4. Create Mega Menu

To create a mega menu, go to Mega Menus in your dashboard.

Creating a Mega Menu

- Step 1: Go to Mega Menus click Add New to create a mega menu

- Step 2: Go to Appearance Theme Options Sidebar Manager Tab: create 9 sidebars

for Mega Menu

Go to Mega Menu Edit Mega Menu created in step 1 and configure it as bellow:

95

1. Enter mega menu name 3. Select a sidebar for column 1 5. Select a sidebar for column 3 7. Click to save changes.

2. Choose layout to display: 2 columns, 3 columns, 4 columns 4. Select a sidebar for column 2 6. Select a sidebar for column 4

- Step 3: Copy shortcode of mega menu created in All Mega Menu part.

- Step 4: Go to Appearance Menus: Click Select Main menu, then click edit menu item (menu

item created), paste the shortcode on description. Click Save Menu to save.

96

- Step 5: Appearance Widgets: Drag and drop Kopa Sub Menu Megamenu and Kopa

Mega Menu Article List widgets into the Megamenu sidebar and configure it ( see Custom

widget part).

Layout 2 Column:

97

Layout 3 Column:

98

Layout 4 Column:

99

H. Create Pages

1. Creating Home Page 1

To create Home page 1, you can follow steps as below:

Go to Dashboard Pages Add New

1. Enter page's name

2. Scroll down to Page Builder section, chose layout Front Page 1

3. Select the widgets using for Areas

4. Click Customize button to customize CSS for page

5. Click Publish button to save

6.

Add the widgets for Home page 1

Row 1

+/ Area 1:

Click Add widget button to select Kopa Masonry widget with style Masonry Home 1 then

configure parameters for it, following part Kopa Masonry

Click Add widget button to select Kopa Widget Ads widget with style Full width then

configure parameters for it, following part Kopa Widget Ads

Row 2:

+/ Area 2.1

Click Add widget button to select Kopa Article List widget with style 3 Home 1 then

configure parameters, following part Kopa Article List

+/ Area 2.2



100

Row 3:

+/ Area 3

Add widget button to select Kopa Article Category widget then configure parameters,

following part Kopa Article Category

Click Add widget button to select Kopa Masonry widget with style Masonry 2 Home 2 then


Row 4:

+/ Area 4.1.1



+/ Area 4.1.2



+/ Area 4.1.3



+/ Area 4.2

Click Add widget button to select Kopa Widget Social Counter widget then configure

parameters, following part Kopa Widget Social Counter

Click Add widget button to select Kopa Newsletter widget then configure parameters,

following part Kopa Newsletter





101

Row 5:

+/ Area 5

Click Add widget button to select Kopa Masonry widget with Masonry 3 Home 1 then

configure parameters, following part Kopa Masonry

Row 6:

+/ Area 6.1



+/ Area 6.2







+/ Area 6.3

Click Add widget button to select Kopa Widget Ads widget with style Standard then




Click Add widget button to select Kopa Recent Comment widget then configure parameters,

following part Kopa Recent Comment

Click Add widget button to select Kopa Widget FB Fan widget then configure parameters,

following part Kopa Widget FB Fan

102

2. Create Home page 2

To create Home page 2, you can follow the steps below:



2. Scroll down to Page Builder item, chose layout Front Page 2

3. Add the widgets to Areas


105

Add the widget to the areas

Row 1:

+/ Area 1:





Row 2:

+/ Area 2

Click Add widget button to select Kopa Widget Ads widget with style Fullwidth then

configure parameters, following part Kopa Widget Ads

Row 3:

+/ Area 3.1.1



+/ Area 3.1.2



+/ Area 3.1.3



+/ Area 3.2





106





Row 4:

+/ Area 4



Row 5:

+/ Area 5.1







+/ Area 5.2



+/ Area 5.3







107

Click Add widget button to select Kopa Widget FB Fan widget then configure parameters,

following part Kopa Widget FB Fan


To create Home page 3 you can follow steps as below:



2. Scroll down to Page Builder section, chose layout Front Page 3



110

Add the widgets to area of Home page 3

Row 1:

+/ Area 1.1:

Click Add widget button to select Kopa Accordion Slider widget then configure parameters

for it, following part Kopa Accordion Slider

+/ Area 1.2



Row 2:

+/ Area 2

Click Add widget button to select Kopa Widget Ads widget with style Fullwidth then

configure parameters, following part Kopa Widget Ads

Row 3:

+/ Area 3.1





+/ Area 3.2







111









+/ Area 3.3








To create Home page 4, you can follow steps as below:



2. Scroll down to Page Builder item, chose layout Front Page 4



113

Add the widgets to Home page 4 areas

Row 1:

+/ Area 1:



114

Row 2:

+/ Area 2



Row 3:

+/ Area 3.1







+/ Area 3.2







Row 4:

+/ Area 4



Row 5:

+/ Area 5.1

115



+/ Area 5.2









5. Creating Contact Page

To create Contact Page, you can follow steps as follows:



2. Scroll down to part Page Builder, chose layout Contact Page

3. Add the widget to the Areas

4. Click Publish button or Save button to save

116

Add the widget to the areas

Row 1:

+/ Area 1.1

Add Kopa Widget Page Contact widget then configure parameters; following part Kopa

Widget Page Contact

+/ Area 1.2







117

6. Creating Blog Right Sidebar

1. Go to Appearance Layout Manager Blog: Select the layout for your page: Blog

Right Sidebar. Finally, click Save Options

2. Go to Appearance Widget: Drag and Drop widget in sidebars the same as follows:

Top Content sidebar

Drag and drop Kopa Article List with Style 16 Blog 1 into Top Content sidebar

Column 1 sidebar

118

Drag and drop Kopa Article List with Style 10 Home 1 into Column 1 sidebar




Column 2 sidebar

Drag and drop Kopa Widget Social Counter widgets into Column 2 sidebar

Drag and drop Kopa Newsletter widgets into Column 2 sidebar



Drag and drop Kopa Widget Ads widget into Column 2 sidebar


Drag and drop Kopa Recent Comment widgets into Column 2 sidebar

Footer 1

Drag and drop Kopa Widget Social into Footer 1

Footer 2

Drag and drop Kopa Pages into Footer 2

Footer 3

Drag and drop Kopa Article List widgets with style 1 into Footer 3

Drag and drop Kopa Newsletter into Footer 3

Footer 4

Drag and drop Kopa User into Footer 4

Drag and drop Kopa Widget Quote into Footer 4

You can see How to use each widget above. Finally, preview your post on the frontend.

119

I. How to setup the demo site

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

- Step 1: Install Admag theme: following part A - Theme Installation

- Step 2: Install Kopa Page Builder plugin, Admag Toolkit plugin

and Woocommerce plugin (if you want to create online shop).

- Step 3: Import demo data: following part C - Demo Content

- Step 4: Go to Appearance Menus: choose location for menus or create new menus: following

part G - Create Custom Menu

- Step 5: Choose a page to become front page and posts page. Go to Settings Reading. Select

the page which you intend to show as your front page and posts page from Front page display.

120

- Step 6: Import demo backup all setting file.

We offer you a demo backup all setting file with name kopatheme.net-demo-admag-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 Appearance Theme Options Backup Tab Import/Export

121

Step 6.2: Click the Browse button and locate the kopatheme.net-demo-admag-backup-

all-settings.json file that is inside 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-admag-widgets.wie. When

you import this file, it will automatically drag and drop 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

Go to Dashboard Plugin Add New Search by "Widget Importer & Exporter"

keyword

Click "Install Now" to install plugin

122

Click "Activate Plugin"

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

123

After successfully import, all widgets be dragged into default sidebar and your task is to configure

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.

124

H. Translation

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

http://www.poedit.net/

http://urbangiraffe.com/articles/translating-wordpress-Themes-and-plugins/3/

http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Manually_Installing_Language_Files

125

I. Updating the Theme

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.

J. Sources and Credits

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

jquery-1.10.2.min.js

Bootstrap

Bootstrap Slider

Easy Paginate 1.0

Enquire

Modernizr jQuery plugin

form validator

Main menu jQuery plugin

Mobile menu jQuery plugin

Google map jQuery plugin

OwlCarousel jQuery plugin

Wow jQuery plugin

Colorbox jQuery plugin

Flickr jQuery plugin

jQuery Form

Magic layout jQuery plugin

matchHeight jQuery plugin

http://www.jquery.com/

http://getbootstrap.com/

http://www.apache.org/licenses/LICENSE-2.0

http://cssglobe.com/

http://wicky.nillia.ms/enquire.js

http://modernizr.com/

http://blikesistance.de/jquery-plugins/jquery-plugin-validation/

http://plugins.jquery.com/superfish/

http://plugins.jquery.com/navgoco/

http://hpneo.github.io/gmaps/

http://www.owlgraphic.com/owlcarousel/

http://mynameismatthieu.com/WOW/

http://www.jacklmoore.com/colorbox/

http://www.newmediacampaigns.com/page/jquery-flickr-plugin

http://malsup.com/jquery/form/

http://masonry.desandro.com/

126

Bootstrap slider jQuery plugin

zaccordion jQuery plugin

iconSweets 2 - by Yummygum

pictures get to pixabay.com, flickr.com, pexels.com with CC0 License

https://github.com/seiyria/bootstrap-slider

http://www.armagost.com/zaccordion/

http://www.iconsweets2.com/

http://www.pixabay.com/

127

******************************************************************************************

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: [email protected]

Designed and developed by: kopatheme.com

http://kopatheme.com/forum

mailto:[email protected]

http://kopatheme.com/

“ADMAG – RESPONSIVE WORDPRESS THEME …Woocommerce plugin Setting WooCommerce To create...

Documents

Transcript of “ADMAG – RESPONSIVE WORDPRESS THEME …Woocommerce plugin Setting WooCommerce To create...