“trendmag – responsive wordpress theme … · 2016-02-19 · 7. woocommerce plugin setting...

1

“TRENDMAG – RESPONSIVE WORDPRESS THEME

DOCUMENTATION”

Created: July 8, 2015

Version: 1.0.1

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 Plugin in Trendmag theme……..…………………………………………………………………..9

1. Kopa Framework plugin……..……………………………………………………………………..….10

2. Kopa Page Builder plugin……..……………………………………………………………………….10

3. Contact Form 7 plugin……..……………………………………………………………………..……12

4. Trendmag Toolkit plugin……..………………………………………………………………………..14

5. Trendmag Toolkit plus plugin……..……………………………………………………………….…15

6. Envato WordPress Toolkit plugin……..…………………………………………………….……….15

7. WooCommerce plugin……..………………………………………………………………………..…15

C. Demo Content……..………………………………………………………………………..…………………..19

D. Theme Options Customization……..……………………………………………………………………..21

1. Sidebar Manager……..……………………………………………………………………………….…21

2. Layout Manager……..……………………………………………………………………………..……23

1. Setup Home Page……..………………………………………………………….……………24

2. Setup Front Page……..……………………………………………………………..…………25

3. Setup Page……..…………………………………………………………………………….…26

4. Setup Post……..……………………………………………………………………………..…26

5. Setup Search Page……..………………………………………………………………………26

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

7. Set up Product Archive Pages……..…………………………………………………………26

8. Set up Single Product……..………………………………………………………………..…26

3. Backup……..…………………………………………………………………………………………..…27

E. Customize The Theme……..………………………………………………………………………..…….…29

F. Custom Widgets……..………………………………………………………………………..……………….36

1. (Trendmag) Brands Carousel……..……………………………………………………………….…36

2. (Trendmag) Instagram……..……………………………………………………………………….…37

3. (Trendmag) Contact……..…………………………………………………………………………….38

4. (Trendmag) Contact Simple……..……………………………………………………………………39

5. (Trendmag) Flickr……..…………………………………………………………………………….…40

6. (Trendmag) Google Map……..…………………………………………………………………….…42

7. (Trendmag) Newsletter Feedburner……..…………………………………………………………44

8. (Trendmag) Social Links……..…………………………………………………………………….…45

3

9. (Trendmag) Advertisement……..……………………………………………………………………46

10. (Trendmag) Detail Gallery……..………………………………………………………………….….47

11. (Trendmag) Fashion Form……..…………………………………………………………………….48

12. (Trendmag) Fashion Two Positions……..……………………………………………………….…49

13. (Trendmag) Grid posts……..……………………………………………………………………….…52

14. (Trendmag) List Post Carousel with Custom Navigation……..………………………….………54

15. (Trendmag) List Posts with First Big, Other Medium Thumbnail……..……………….…...…57

16. (Trendmag) List Videos with Custom Navigation……..………………………………….………59

17. (Trendmag) List Videos First Left, Other Right……..………………………………………….…61

18. (Trendmag) Posts Two Positions……..………………………………………………………………63

19. (Trendmag) Recent Posts……..……………………………………………………………………….67

20. (Trendmag) Grid Posts Carousel……..………………………………………………………………69

21. (Trendmag) List Videos……..…………………………………………………………………………72

22. (Trendmag) Megamenu Posts……..………………………………………………………….………75

23. (Trendmag) Post Bxslider……..…………………………………………………………………...…76

24. (Trendmag) Post Carousel……..……………………………………………………………….…..…79

25. (Trendmag) Sticky Posts……..……………………………………………………………….…….…80

26. (Trendmag) Latest Products……..…………………………………………………………..….……81

27. (Trendmag) Product Categories……..………………………………………………………….……82

28. Product Categories Carousel……..………………………………………………………………...…83

29. (Trendmag) List Products……..…………………………………………………………………...…83

30. (Trendmag) Products Carousel……..…………………………………………………………..……85

31. (Trendmag) Service Grid……..…………………………………………………………………….…86

32. (Trendmag) Service Grid with More Link……..…………………………………………………,..87

33. (Trendmag) Fashion Slide……..………………………………………………………………..……88

34. (Trendmag) Slide One……..…………………………………………………………………………..89

35. (Trendmag) Slide Three……..…………………………………………………………………………91

36. (Trendmag) Slide Five……..………………………………………………………………………..…93

37. (Trendmag) Slide Media……..…………………………………………………………………..……95

38. (Trendmag) Testimonial Carousel……..……………………………………………………….……97

39. (Trendmag) Grid Posts More Link……..………………………………………………….…………99

40. Text……..………………………………………………………………………………………………..101

G. Custom Shortcode Generator……..……………………………………………………………………..102

4

H. Create Categories - Posts - Toolkit plugin - Custom Menu……..………………………….….109

1. Create Category……..………………………………………………………………………….….109

2. Create Posts……..……………………………………………………………………………….…113

3. Brands Plugin……..………………………………………………………………………….……117

4. Service plugin……..………………………………………………………………………….……119

5. Testimonials plugin……..…………………………………………………………………..……120

6. Create Custom Menu……..………………………………………………………………….……121

I. Create pages……..………………………………………………………………………..……………….….125

1. Create Home page 1……..……………………………………………………………………..…125

2. Create Home page 2……..……………………………………………………………………..…132

3. Create Home page 3……..………………………………………………………………………..140

4. Create Contact page……..………………………………………………………………………..142

5. Creating Fashion page……..……………………………………………………………………..144

6. Creating Fashion Show……..……………………………………………………………..……..148

7. Creating Gallery page……..…………………………………………………………………..…..152

8. Creating Movies& Video page……..…………………………………………………………..…155

9. Creating Single Post……..…………………………………………………………………….…..159

J. How to setup the demo site……..……………………………………………………………….…….…162

K. Translation……..………………………………………………………………………..……………….…….167

L. Updating the Theme……..………………………………………………………………………....………168

M. Sources and Credits……..………………………………………………………………………..…..….…168

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 Trendmag

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

install Trendmag theme:

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

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

but also demo data, document, etc.

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

unzipped you will notice a file named Trendmag. 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 Trendmag.zip on your computer and click Install

Now.

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

8

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 Trendmag. Please install plugin Kopa Page Builder,

Kopa Framework, Contact form 7, Trendmag tootkit, Trendmag tootkit plus Envato WordPress

toolkit plugin and WooCommerce to run theme" that request to install and active plugin to use this

theme

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

Kopa Page Builder plugin: make you easy to create and custom pages without depending on creating

sidebars

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.

Trendmag Toolkit plugin - A specific plugin used in Trendmag Theme includes some custom

widgets, and layout.

Trendmag Toolkit Plus plugin - A specific plugin used in Trendmag Theme helps you register post

types, widgets and shortcodes.

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

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

9

B. Using Plugin in Trendmag theme

With our Trendmag theme, you must install and activate Kopa Framework plugin, Page

Builder plugin to use the theme. Besides, you must install plugin Trendmag toolkit, Trendmag

toolkit plus plugin to activate shortcodes, widgets..., Contact form 7 to create multi contact form

and customize theme. Moreover, Trendmag theme also supports WooCommerce plugin to create

eCommerce website.

From your Dashboard appear warning about Kopa Framework, Trendmag Toolkit,

Trendmag Toolkit plus, Envato WordPress Toolkit, Kopa Page

Builder and WooCommerce.

- Step 1: Click "Begin installing plugin"

- Step 2: Click “Install” and then “Activate” them

10

1. Kopa Framework plugin

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

the plugin.

Note: you must install and activate Kopa Framework plugin.

2. Page Builder plugin

After installing and activating the theme, you cannot use it now, you will see a message displayed at the

top of the page that requests Page Builder installation. This plugin has been integrated when you buy

our theme.

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

creating sidebars. Especially, once purchasing our Trendmag 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 theme, install required plugin and import our demo data.

Create page use Page Builder

- Step 1: Create new page, scroll down to Page Builder to custom page where you can customize

page including choosing rows, adding widgets to use for your page it will appearance same image

below. If you do not see the Page Builder module, check that you have it enabled in

your Screen Options

11

- Step 2: Add widget for areas, You can follow Custom widget items to properly configure the

widget

12

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

- Step 1: Go to Dashboard Contact Contact Form to copy default shortcode.

13

- Step 2: Go to your page (Contact page), after adding Text widget in your page, paste shortcode

contact form into the content of text widget

14

It will be displayed in your contact page like this:

Besides, you can add new contact form with many languages, fields (Generate tag) at Dashboard

Contact Add New

4. Trendmag Toolkit plugin

Install and active to custom widgets, layout which are integrated in Trendmag Toolkit plugin

15

5. Trendmag Toolkit Plus plugin

Install and active to custom widgets, layout, shortcodes which are integrated in Trendmag

Toolkit plugin.

6. Envato WordPress Toolkit plugin

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

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

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 Trendmag

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.

https://github.com/envato/envato-wordpress-toolkit/

16

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 Trendmag

1. Creating new categories: Product Categories

http://www.woothemes.com/woocommerce/

17

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.

18

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 front-end 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, dimension, 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 front-end.

19

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

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

WordPress Importer plugin you should do this.

http://kopasoft.net/demo/yosaga

20

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

21

D. Theme Options Customization

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


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

22

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

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

developers.

23

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

24

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

Setup Home Page (Blog 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.

25

Setup Front Page

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

from Home page display.

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.

26

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.

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.

Set up Search

Click Appearance Layout Manager Search. Search page shows search results. Setup Blog

page layout for Search page on the site.

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.

Set up Product Archive

Click Appearance Layout Manager Product Archive. Setup Product archive page layout

for Product archive page on the site.

Set up Product Single

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

Single Product page on the site.

27

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

- 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

28

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 for 2 tabs: Sidebar Manager & Layout manager

Click Download Export File button to export .json file

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

import those to this site.

29

E. Customize the theme

The theme customize 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:

- On the “Themes” page, search for and activate the Trendmag Theme.

- On the same page, click on the “Customize” link under the current theme’s description.

- This brings up the Theme Customizer in the left column, along with a preview of your website on the

right.

- To make changes, all you have to do is select each of the available options and edit their settings.

The options are:

30

1. Site Title & Tag Line

Edit the title and tagline of the website without having to go to the “Settings” page. Choose a title and

tag line for your site.

- Site Title: Text box for site title

- Tag Line: Text box for tag line

- Display: Checkbox to enable or hide the display of title and tag line

2. Navigation:

Select which menu you want to use for the primary navigation of your website. Your theme supports 4

menus. Select which menu appears in each location. You can edit your menu content on the Menus

screen in the Appearance section.

- Top Menu: select either a post or page from the drop downs (Top Menu)

- Main Menu: select either a post or page from the drop downs (Main Menu)

- Footer Menu: select either a post or page from the drop downs (Footer Menu)

- Mobile Menu: select either a post or page from the drop downs (Mobile Menu)

3. Widgets

Widgets are independent sections of content that can be placed into widget zed areas provided by your

theme (commonly called sidebars).

- Mega Menu: You can add a widget for Mega Menu

- Header (fixed): You can add a widget for Header (fixed)

- Footer (fixed): You can add a widget for Footer (fixed)

4. Static Front Page

Specify whether the front page of the website should be a listing of your latest posts, or a static page of

your choosing. You site's home page can either contain your latest posts or display a static page or post.

- Your Latest Posts: You can add a widget for Mega Menu

31

- A static page: select either a post or page from the drop downs.

5. Theme Option:

- Logo & Favicon:

+ You can upload Logo (including Big Logo, Small Logo, and Mobile Logo)

+ You upload your favicon image

32

+ You can upload icon for apple device (152x152)

- Header Option:

You check on checkboxes Search Form and Breadcrumb to show them on front end. Also, you can

upload background for page title

33

- Blog:

+ Enter number words of excerpt to show into textbox

+ Enter number of posts to show in before into textbox

+ Check on options metadata to show them or not

34

- Single Post:

+ Check on options metadata to show them or not

+ Related Post: You can get by category or tag and limit the number of posts you want to display

35

- Font:

+ Check on checkbox to enable custom font for Body, you can select Font family, Font Weight, Fonts

Size for body

+ Check on checkbox to enable custom font for Main menu, you can select Font family, Font

Weight, Fonts Size for Main menu

+ Check on checkbox to enable custom font for Footer menu, you can select Font family, Font

Weight, Fonts Size for Footer menu

+ Check on checkbox to enable custom font for Widget title, you can select Font family, Font

Weight, Fonts Size for Widget title

+ Check on checkbox to enable custom font for Post title, you can select Font family, Font Weight,

Fonts Size for Post title

+ Check on checkbox to enable custom font for Post content, you can select Font family, Font

Weight, Fonts Size for Post content

+ Check on checkbox to enable custom font for Heading (H1, H2, H3, H4, H5, H6), you can select

Font family, Font Weight, Fonts Size for Heading (H1, H2, H3, H4, H5, H6).

Save & Public: Click the Save & Publish button to ensure any changes you have made to your

Options are saved to your database. Once you click the button, the button text changes to "Saved"

telling you your settings have been saved.

36

F. 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. (Trendmag) Brands Carousel:

Display a list of brand with carousel effect. Just drag a widget to the area or sidebars then enter the

number of brands, select tags. You also can select Background image tab to upload background

image for widgets, moreover, you can customize margin & padding, and Custom CSS for widget if

you want then click Save & Close.

With Brands created in Using Plugin in Trendmag Theme, they will be displayed as Home style 2

as below:

37

2. (Trendmag) Instagram:

Display your photos from Instagram. Just drag a widget to the area or sidebars you want to display.

Then you can enter title widget, Client ID (You can obtain a client ID registering a new Instagram API

client app at here) and enter number of photo and click to save change.

It will show in the Blog page as follows:

http://instagram.com/developer/clients/register/

38

3. (Trendmag) Contact

Display your organization information on footer. Just drag a widget to the area or sidebars you want to

display. Then you can enter Name, Street address, Address Locality, Postal Code, Telephone, email and

Save to save change.

It will show in the Footer as follows:

39

4. (Trendmag) Contact Simple

Display your organization information. Just drag a widget to the area or sidebars you want to display.

- Widget tab: You can enter address title, address, telephone title, telephone, email title, email

- Background image tab: You can upload your background image

- Margin tab: You can customize margin (Top, Bottom, Left, and Right)

- Padding tab: You can customize padding (Top, Bottom, Left, and Right)

- Custom CSS tab: enter your CSS code.

- Click Save & Close button to save change.

40

It will show in the Contact page as follows:

5. (Trendmag) Flickr

Display your photos from Flickr.com. Just drag a widget to the area or sidebars you want to display.

Enter title, Flickr ID, number of photos.

41

It will show as follows:

42

6. (Trendmag) Google Map

Display Google maps, this widget used in Page Builder - Contact page. Add the widget to the row the

area you want to display.

Note: At Customize of Contact page, you must check box to load Google-Maps API

Enter widget title, Latitude, Longitude, Height will be displayed on the front-end. Click Save button, it

will display as the contact page

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

longitude

44

7. (Trendmag) Newsletter Feedburner

Display a newsletter form with Feedburner service. Drag and drop Trendmag Newsletter Feedburner

widget to the sidebar or the area you want to display.

Enter Title widget, Button text, Feedburner URI then Save. It will display in the footer as follows:

45

8. (Trendmag) Social Links

Display your social links. Drag and drop Trendmag Social Links widget to the sidebar or the area you

want to display. You can enter title for widget and title responsive (display on responsive screen),

number of social links, then select icon, link text, link URL for social link and Save.

46

It will display in the header like this:

9. (Trendmag) Advertisement

Display your banner adsense with custom link on the front end. Drag and dropTrendmag

Advertisement widget to the sidebar or the area you want to display.

- Click to upload an image you will use in Advertisement widget.

- Layout for: You can select layouts( Layout for size 980 x 90 px ( in blog content ), Layout for size

300 x 390 px ( in blog sidebar ), Layout for size 252 x 125 px ( in footer ), Layout for custom size)

- Image Link: Enter link for your banner, advertisement

- You can upload your background image, custom margin, padding, CSS

- Click Save button to save.

47

10. (Trendmag) Detail Gallery

Display your gallery. Drag and drop the widget to the sidebar or the area you want to display.

- Widget tab: You can enter title, number of images/ slides, Select post by post format gallery

- Background image tab: You can upload your background image





48

It shows on the gallery page as follows:

11. (Trendmag) Fashion Form

Display search form for fashion. Drag and drop the widget to the sidebar or the area you want to

display.

It will show fashion form with Season and design are created in Post Season, Design

49

12. (Trendmag) Fashion Two Positions

Display fashions list with two positions. Drag and drop the widget to the sidebar or the area you want to

display.

- Enter Title for widget.

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

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

comment. Number of post: enter number of post to display

- Choose Seasons

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

- Select Design

- Excerpt length: custom the length of word displayed

- Check or not checkbox: Show in before position

- Enter number of posts to show in before position

- Enter Button text for header (Only show in before position)

- Enter Button link for header (Only show in before position)

- check or not to show/ hide options: Open link in new window, Show author info, Show time ago,

Show share links, Show category, Show date

- Other tabs, you can upload background image, custom margin, padding, CSS.


51

It displays as Fashion page, Fashion show like this:

52

13. (Trendmag) Grid posts

Display grid posts. Drag and drop the widget to the sidebar or the area you want to display.

- Enter Title for widget

- Choose Categories


- Select Tags



comment.

- Number words of excerpt: enter number word excerpt to display

- Number of post: enter number of post to display

- View more text: Enter text for button

- View more link: enter link for button


54

Click Save & Close button to save change. It displays as Home page 2 as below:

14. (Trendmag) List Post Carousel With Custom Navigation

Display list posts with carousel effect and custom navigation. Drag and drop the widget to the sidebar or

the area you want to display.


- Choose Categories


- Select Tags



comment.


55

- Button text: Enter text for button

- Button link: enter link for button


56

Upload background image, it displays as home 1 as follows:

If you don’t upload background image, it displays as gallery page, media page as follows:

57

15. (Trendmag) List Posts with First Big, Other Medium Thumbnail

Display list posts with first big thumbnail, other medium thumbnail. Drag and dropthis widget to your

sidebar which you want to appear and configure parameters for it.


- Choose Categories


- Select Tags



comment.


- Link text: Enter text for link text

- Link URL: enter link URL


59

It displays as Home 1 like this:

16. (Trendmag) List Videos with Custom Navigation

Display list videos with carousel effect and custom navigation. Drag and drop widget to the area where

you want to display on frontend then configure parameters below:


- Choose Categories


- Select Tags



comment.

60



61

Click Save & Close button to save change. It displays as Media page as below:

17. (Trendmag) List Videos First Left, Other Right

Display list video posts with first left and other right. Drag and dropwidget to the area where you want

to display on frontend then configure parameters below:

- Choose Categories


- Select Tags



comment.


- Button text for header: Enter button text for header

- Button link for header: Enter button link for header

- Excerpt length for first video: custom the length for first video displayed

- Button link for first video: Enter button link for first video

62

- Button text for first video: Enter button text for first video

- Check or not on checkbox: Open link in new window


63

Click Save & Close button to save change. It displays as Home page 1 as below:

18. (Trendmag) Posts Two Positions

Display posts list with two positions. Drag and drop the widget to the sidebar or the area you want to

display and configure it.




comment.


- Choose Categories


- Select Tags

64

- Number of post: Enter number of post you want to show.

- Excerpt length: custom the length of word displayed

- Check or not checkbox: Show in before position

- Enter number of posts to show in before position

- Enter Button text for header (Only show in before position)

- Enter Button link for header (Only show in before position)

- Check or not to show/ hide options: Open link in new window, Show author info, Show time ago,

Show share links, Show category, Show date.



66

If you check into checkbox to show in before position, it will display as Home page like this:

67

If you don’t check into checkbox to show in before position, it will display as below:

19. (Trendmag) Recent Posts

Display recent posts. Drag and drop the widget to the sidebar or the area you want to display and

configure it.


- Choose Categories


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

68

- Select Order by: To arrange the displaying order of posts according to Date, Random or Number of

comments.

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

- Number of Post: custom the number post which are appeared on the front-end



69

20. (Trendmag) Grid Posts Carousel

Display grid posts for some layouts with carousel effect.


- Choose Categories


- Select Tag (You can select single tag or multi tags

- Select Order by: To arrange the displaying order of posts according to Date, Random or Number of

comments.

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

- Number of Post: custom the number post which are appeared on front-end

- Check or not in check box to show border of header (in case, enter title for widget)

- Other tabs, you can upload background image, custom margin, padding, CSS

70


71

If you check on check box to show border for header, it will be displayed as below:

72

21. (Trendmag) List Videos

Display list video posts with only thumbnail and play icon.

- Widget tab: You can enter title, select categories or/and tags, order, order by, enter number of

posts, enter text and link for button text

- Background image tab: you can upload your background image for widget





74

It displays as Fashion show (upload background image) as below:

75

22. (Trendmag) Megamenu Posts

Display grid posts for megamenu, it used to for megamenu, add the widget to the area that you want to

display then configure the necessary parameters for it.

76

Enter title, select categories and/or tags, order, order by, number of post then Click Save button to save

change. It displays as below:

23. (Trendmag) Post Bxslider

Display list posts with bxslider effect

- Widget tab: Enter title, select categories and/or tags, order, order by, number of post, Choose

mode (horizontal or vertical. Default is vertical), check to auto slide or not, enter speed you want.

- Background image tab: you can upload your background image


- Padding tab: You can customize padding (Top, Bottom, Left, and Right



78

It displays as page below:

79

24. (Trendmag) Post Carousel

Display list posts with carousel effect.

80

Enter number of posts, slider items, Click Save & Close button to save change. It displays as single

post as follows:

25. (Trendmag) Sticky Posts

Display sticky post by newest. Drag and drop the widget to the sidebar or the area you want to display

and configure it.

Enter number of posts, number words of excerpt to show, it display as below:

81

26. (Trendmag) Latest Products

Show latest products. Drag and drop the widget to the sidebar or the area you want to display and

configure it.

Enter title, number of products, it displays as below:

82

27. (Trendmag) Product Categories

Show shop categories. Drag and drop the widget to the sidebar or the area you want to display and

configure it.

Enter title, select categories of product, it display as Home 2 as below:

83

28. (Trendmag) Product Categories Carousel

Show shop categories with carousel effect. Drag and drop the widget to the sidebar or the area you want

to display and configure it.

Only select categories of product, it displays as Home 2 as below:

29. (Trendmag) List Products

Display a list of products. Drag and drop the widget to the sidebar or the area you want to display and

configure it.

- Enter Title first

- Enter Title after

- Enter Title link

- Enter Description

- Enter Button text

84

- Enter Button link

- Number of Product: custom the number product which are appeared on front-end

- Select Order: you can choose order by: Sale Products, Bestselling Products, Top Rated Products, or

Featured Products

- Check to open link in new window



85

It shows as home 2 as below:

30. (Trendmag) Products Carousel

Display a list of products with carousel effect. Drag and drop the widget to the sidebar or the area you

want to display and configure it.

86

Enter title, number of products, select order, and choose image size for product then Save & Close. It

shows as home 2 as below:

31. (Trendmag) Service Grid

Display a grid of service (default 3 item per row). Drag and drop the widget to the sidebar or the area

you want to display and configure it.

87

Enter number of services, select tags then Save & Close. With Services created in Using Plugin in

Trendmag Theme, they will be displayed as home page 2 as below:

32. (Trendmag) Service Grid with More Link

Display a grid of service with more link (default 2 item per row). Drag and drop the widget to the

sidebar or the area you want to display and configure it.

Enter number of services, select tags then Save & Close. With Services created in Using Plugin in

Trendmag Theme, they will be displayed as home page 2 as below:

88

33. (Trendmag) Fashion Slide

Display fashions slides with carousel effect, five items per page.

89

Enter number of posts, select seasons and/or designs, and enter number words of excerpt to show. With

seasons, designs are created in Post Season, Designs, they will be displayed as Fashion Show as

below:

34. (Trendmag) Slide One

Display slides with carousel effect, one item per page.

90

Select categories and/or tags, order, order by, enter number of post to show, then click Save & Close.

It shows as Slide style 2 page as below:

91

35. (Trendmag) Slide Three:

Display slides with carousel effect, three items per page.

92

Select categories and/or tags, order, order by, enter number of post to show, then click Save & Close.

It shows as Slide style 1 page as below:

93

36. (Trendmag) Slide Five

Display slides with carousel effect, three items per page.

Select categories and/or tags, order, order by, enter number of post to show, number words of excerpt

to show, select thumbnail size ( 302 x 500 px) or ( 302 x 255 px) then click Save & Close.

94

With Thumbnail (302 x 500 px), It shows as Slide style Slide style 1 page as below:

With Thumbnail (302 x 255 px), It shows as Slide style Home page 3 as below:

95

37. (Trendmag) Slide Media

Display slides with carousel effect for media page, three items per page.

Select categories and/or tags, order, order by, enter number of post to show, Select Format by Video or

Gallery then click Save & Close.

96

If you select Format: Video, It shows as Media page as below:

If you select Format: Gallery, It shows as Gallery page as below:

97

38. (Trendmag) Testimonial Carousel

Display a list of testimonial with carousel effect.

- Enter Title for widget.

- Enter number of testimonials

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

- Background video URL: Enter video URL in library media or your computer

- Background video width (Default is 1280 px): Enter width for background video

- Background video height (Default is 720 px): Enter height for background video



98

It displays as home 2 like this:

99

39. (Trendmag) Grid Posts More Link

Display grid posts with more link.

100

Enter Title, Select categories and/or tags, order/order by, Enter number of posts to show, enter button

text, button link then Click Save button to save change. It displays as Single style 2 like this:

101

40. Text:

Display Arbitrary text, HTML or shortcodes. Dragging and dropping this widget to the sidebar or the

area that you want to display.

- Enter Title, content of the widget, check on checkbox if you want to add paragraphs automatically.

- Background image: You can upload your background image for widget





102

G. Custom Shortcode Generator

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.

103

Shortcodes available with this theme

This theme comes with the 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.

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]

2. Container: Include options: Tabs, Tabs (large), Tabs (Vertical), Accordion, Toggle.

- Tab

[trendmag_tabs]

[trendmag_tab title="Tab title 1"]Tab content 1[/trendmag_tab]



[/trendmag_tabs]

Example:

[trendmag_tabs]

[trendmag_tab title="Tab title 1"]1As for nailing the Kimye look—from the outfits to the facial

expressions—Burroughs says it's all about the details. "I feel like Kim K double tapped our ice

cream pic because she noticed the amount of [/trendmag_tab]






104


[/trendmag_tab]

The same with other tabs, Enter Tab title and Tab content for tab, the image will illustrate for above

shortcode:

- Accordion: Click Container, select Accordion, add title and content for Accordion:

[trendmag_accordions]

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



[/trendmag_accordions]

Example:

[trendmag_accordions]

[trendmag_accordion title="VESTIBULUM PHARETRA NIBH SIT AMET CONSEQUAT

COMMODO."]As for nailing the Kimye look—from the outfits to the facial expressions—Burroughs

says it's all about the details. "I feel like Kim K double tapped our ice cream pic because she noticed

the amount of attention to[/trendmag_accordion]




105






trendmag_accordion title="VESTIBULUM PHARETRA NIBH SIT AMET CONSEQUAT




[/trendmag_tab]

The same with Toggle shortcode, It is illustrated with the image below:

3. Dropcap

Includes styles: Color, Gray, Transparent

Select the style you want and add content to your dropcap in code below:

- Style: Transparent [trendmag_dropcap class="kopa-dropcap style-1"][/trendmag_dropcap

- Style: Circle [trendmag_dropcap class="kopa-dropcap style-2"][/trendmag_dropcap]

- Style: Restangle [trendmag_dropcap class="kopa-dropcap style-3"][/trendmag_dropcap]

Example:

106

[trendmag_dropcap class="kopa-dropcap style-1"]L[/trendmag_dropcap]orem ipsum dolor sit

amet, consectetur adipiscing elit. duis nec pur us tellus consectetur.

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

4. Alert box shortcode

Click on Alert symbol, select options (Warning, Success, Danger, Info), it displays code blow:

- Info: [trendmag_alert class="kopa-alert alert-info alert-dismissible"][/trendmag_alert]

- Success: [trendmag_alert class="kopa-alert alert-success alert-

dismissable"][/trendmag_alert]

- Warning: [trendmag_alert class="kopa-alert alert-warning alert-


- Danger: [trendmag_alert class="kopa-alert alert-danger alert-


Example:

[trendmag_alert class="kopa-alert alert-info alert-dismissable"]Insert here Box

Content[/trendmag_alert]

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

107

5. Button shortcodes

Click on Button symbol, displaying 2 styles: White (Small, Medium, Large), and Black (Small,

Medium, Large) it displays code like below:

- White: [trendmag_button class="btn btn-default btn-sm" link="#"

target=""][/trendmag_button]

[trendmag_button class="btn btn-default btn" link="#" target=""][/trendmag_button]

[trendmag_button class="btn btn-default btn-lg" link="#" target=""][/trendmag_button]

Example:

[trendmag_button class="btn btn-default btn-sm"

link="http://kopatheme.net/demo/trendmag" target="_blank"]Small

Button[/trendmag_button]

- Black: [trendmag_button class="btn btn-black btn-sm" link="#"

target=""][/trendmag_button]

[trendmag_button class="btn btn-black btn" link="#" target=""][/trendmag_button]

[trendmag_button class="btn btn-black btn-lg" link="#" target=""][/trendmag_button]

Example:

108

[trendmag_button class="btn btn-black btn-sm"

link="http://kopatheme.net/demo/trendmag" target=""]Small Button[/trendmag_button]

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

6. Caption

[trendmag_caption]Caption[/trendmag_caption]

109

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

111

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

procedures listed below:

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.

112

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

113

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 partHow 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, (Trendmag) Slide

Three, (Trendmag) Slide Five (size 302 x 500 px and 302 x 255 px.), (Trendmag) Slide One,

(Trendmag) List Posts With First Big, Other Medium Thumbnail, Single, Single full, Single

gallery 1 slide, Single gallery 1 slide full). When you use to custom featured image size, the more

priority use to upload featured image

114

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

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 the same as to customize layout for category above.

117

1. Check to show options 3. Enter content, shortcode to create post 5. Upload gallery ID 7.Enter information to customize imaged size 9.Create a new tag or assign an existing one 11.Choose a post format

2. Enter title post 4. Check on box if you want to use the custom setting layout 6. Enter custom content (e.g. YouTube URL) 8.Set featured image for post

10.Choose an existing category to create a new one 12. Click to publish.

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:

Click the New Post button.

1. Choose Gallery, Audio, Video, or Quote.

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

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

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

118

6. Click Update button to finish

You can see the following illustration:

You also see events created in "All Brands"

119

4. Service plugin

To create Service plugin, follow steps:

Go to Dashboard Services Add New

1. Enter Service's name

2. Enter Service's excerpt (Excerpts are optional hand-crafted summaries of your content that can

be used in your theme)

3. Select an icon awesome or upload your icon, enter link for icon

4. Add new service tag or assign existed service tags


You can see the following illustration:

120

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

icon you want.

You can see all services in All Services

5. Testimonials plugin

To create Testimonials plugin, do the following steps:

Go to Dashboard Testimonials Add New

1. Enter testimonial's name

2. Enter testimonial's content

3. Add new testimonial tag or assign existed testimonial tags

121

4. Upload featured image of testimonials


You can see the following illustration.

All Testimonials created are in Testimonials.

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

122

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.

123

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.

Create Mega Menu

- Step 1: Go to Appearance Theme Options Sidebar Manager tab: create a sidebar for Mega

Menu

- Step 2: Go to Appearance Widgets: Drag and drop (Trendmag) Megamenu Posts widget into

the Mega Menu sidebar and configure it (See Custom Widget - (Trendmag) Megamenu

Posts)

- Step 3: Go to Appearance Mega Menus All Mega Menus: Copy shortcode of mega

menu

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

124

End Review mega menu on the front-end.

125

I. Create pages

1. Creating Home Page 1

To create Homepage 1, you can follow the steps 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. Configure for Rows

4. Select the widgets using for Areas

5. Click Customize button to customize CSS for page

6. Click Publish button to save

Configure parameters for Rows, Areas of Home page 1

Row 1

Area 1:

- Click Add widget button to select Trendmag Slide Three widget then configure

parameters for it, following the Trendmag Slide Three part.

126

Row 2

Area 2

- Click Add widget button to select (Trendmag) Sticky Posts widget then configure

parameters, following the (Trendmag) Sticky Posts part.

- Click Add widget button to select (Trendmag) Grid Posts Carousel widget then configure

parameters, following the (Trendmag) Grid Posts Carousel part.

127

Row 3

Area 3

- Add (Trendmag) Advertisement widget, you can enter title, content for text, use widget

effect, enter padding (Trendmag) Advertisement.

128

Row 4

Area 4

- Click Add widget button to select (Trendmag) List Posts With First Big, Other

Medium Thumbnail then configure parameters, following part(Trendmag) List Posts With

First Big, Other Medium Thumbnail

- Click Add widget button to select (Trendmag) Grid Posts Carousel then configure

parameters, following part (Trendmag) Grid Posts Carousel

- Click Add widget button to select (Trendmag)List Videos First Left, Other Right then

configure parameters, following part (Trendmag) List Videos First Left, Other Right

129

Row 5

Area 5

- Add (Trendmag) Advertisement widget, you can enter title, content for text, use widget

effect, enter padding (Trendmag) Advertisement

130

Row 6

Area 6.1

- Add (Trendmag) Posts Two Positions widget then configure parameters for it, following

the part (Trendmag) Posts Two Positions

Area 6.2

- Add (Trendmag) Post Bxslider widget then configure parameters for it, following the

part (Trendmag) Post Bxslider

- Add (Trendmag) Recent Posts widget then configure parameters for it, following the

part (Trendmag) Recent Posts

- Add Tag Cloud widget then configure parameters for it.

131

Row 7

Area 7

- Add (Trendmag) List Post Carousel With Custom Navigation widget then configure

parameters; following the part (Trendmag) List Post Carousel With Custom Navigation

Row 8

Area 8.1

- Add (Trendmag) Posts Two Positions widget then configure parameters for it, following

the part (Trendmag) Posts Two Positions

Area 8.2

- Add (Trendmag) Latest Products widget then configure parameters for it, following the

part (Trendmag) Latest Products

- Add (Trendmag) Flickr widget then configure parameters for it, following the

part (Trendmag) Flickr

132

2. Create Home page 2

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



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

3. Configure parameters for Rows, Areas

4. Click Publish button to save.

133

Configure parameters for Rows, Areas Home page 2

Row 1

Area 1

- Add (Trendmag) Slide Five widget then configure parameters for it, following the

part (Trendmag) Slide Five

134

Row 2

Area 2:

- Add (Trendmag) Product Categories Carousel widget then configure parameters for

it,following part (Trendmag) Product Categories Carousel

- Add (Trendmag) Products Carousel widget then configure parameters for it,following

part (Trendmag) Product Carousel

135

Row 7

Area 7:

- Add (Trendmag) List Products widget then configure parameters for it,following

part (Trendmag) List Products

136

Row 9

Area 9:

- Add (Trendmag) Product Categories widget then configure parameters for it,following

part (Trendmag) Product Categories

- Add (Trendmag) Service Grid widget then configure parameters for it,following

part (Trendmag) Service Grid

137

Row 10

Area 10

- Click Add widget button to select (Trendmag) Testimonial Carousel then configure

parameters, following part (Trendmag) Testimonial Carousel.

- Click Add widget button to select (Trendmag) Brands Carousel then configure

parameters, following part (Trendmag) Brands Carousel

138

Row 11

Area 11

- Add (Trendmag) Grid Posts widget then configure parameters for it, following the

part (Trendmag) Grid Posts

Row 12

Area 12

- Add (Trendmag) List Post Carousel With Custom Navigation widget then configure

parameters for it, following part (Trendmag) List Post Carousel With Custom Navigation

139

Row 13

Area 13

- Add (Trendmag) Service Grid With More Link widget then configure parameters for it,

following the part (Trendmag) Service Grid With More Link

140

3. Create Home page 3

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



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

Format. Finally, click Save Options

3. Go to Appearance Widget: Dragging and dropping widget in sidebars the same as follows:

141

Top sidebar

Drag Trendmag Slide Five into Top sidbar.

Right Before sidebar

Drag (Trendmag) Post Bxslider into Right Before sidebar.

Drag (Trendmag) Advertisement into Right Before sidebar.

Drag (Trendmag) Latest Products into Right Before sidebar.

Drag (Trendmag) Recent Posts into Right Before sidebar.

Before Footer sidebar

Drag (Trendmag) Advertisement into Before Footer sidebar.

Drag (Trendmag) Instagram Twitter Caousel into Before Footer sidebar.

Header (fixed) Sidebar

Drag (Trendmag) Social Link into Header (fixed) sidebar.

Footer (fixed) Sidebar

Drag (Trendmag) Advertisement into Footer (fixed) Sidebar.

Drag Text into Footer (fixed) Sidebar.

Drag (Trendmag) Newsletter Feedburner into Footer (fixed) Sidebar.

Drag (Trendmag) Contact into Footer (fixed) Sidebar.

142

4. Creating Contact page

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



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


4. Click Publish button or Save button to save

143

Configure customize contact page

You click Customize, at Javascript tab, you check on checkbox Load Google-Maps API to load google

map

Configure parameters for Rows, Areas

Row 1

Area 1

- Add (Trendmag) Google Map widget then configure parameters for it, following

part (Trendmag) Google Map

Row 2

Area 2.1

- Add (Trendmag) Contact Simple widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Contact Simple

Area 2.2

- Add Text widget then enter your text in text area then configure parameters for it, following

part Text

144

5. Creating Fashion page

To create Fashion page, you can follow steps as follows:



2. Scroll down to part Page Builder, chose layout Fashion page


4. Click Publish button or Save button to save

147


Row 1: You can add widget slider or other widgets if you want

Row 2: You can add widget slider or other widgets if you want

Row 6

Area 6.1

- Add (Trendmag) Fashion Two Positions widget then enter your text in text area then

configure parameters for it, following part (Trendmag) Fashion Two Positions

Area 6.2

- Add (Trendmag) Advertisement widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Advertisement

- Add (Trendmag) Post Bxslider widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Post Bxslider

Row 7

Area 7

- Add (Trendmag) List Videos widget enter your text in text area then configure parameters

for it, following part (Trendmag) List Videos

Row 8

Area 8.1


configure parameters for it, following the part (Trendmag) Fashion Two Positions

Area 8.2

- Add (Trendmag) Latest Products widget then enter your text in text area then configure

parameters for it, following the part (Trendmag) Latest Products

148

- Add (Trendmag) Flickr widget then enter your text in text area then configure parameters

for it, following the part (Trendmag) Flickr

Row 9

Area 9

- Add (Trendmag) Grid Posts Carousel widget enter your text in text area then configure

parameters for it, following part (Trendmag) Grid Posts Carousel

Row 10

Area 10

- Add (Trendmag) Advertisement widget enter your text in text area then configure


6. Creating Fashion Show

To create Fashion Show page, you can follow steps as follows:



2. Scroll down to part Page Builder, chose layout Fashion page


4. Click Publish button or Save button to save.

151


Row 1

Area 1

- Add (Trendmag) Fashion Form widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Fashion Form

Row 2

Area 2

- Add (Trendmag) Fashion Slide widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Fashion Slide

Row 6

Area 6.1



Area 6.2





Row 7

Area 7

- Add (Trendmag) List Videos widget enter your text in text area then configure parameters

for it, following part (Trendmag) List Videos

Row 8

Area 8.1

152



Area 8.2


parameters for it, following part (Trendmag) Latest Products


for it, following part (Trendmag) Flickr

Row 9

Area 9

- Add (Trendmag) Grid Posts Carousel widget enter your text in text area then configure

parameters for it, following part (Trendmag) Grid Posts Carousel

Row 10

Area 10

- Add (Trendmag) Advertisement widget enter your text in text area then configure


7. Creating Gallery page

To create Gallery page, you can follow the steps as follows:



2. Scroll down to part Page Builder, chose layout Media page



154


Row 1

Area 1

- Add (Trendmag) Slide Media widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Slide Media

Row 2

Area 2

- Add (Trendmag) List Post Carousel With Custom Navigation widget then enter your

text in text area then configure parameters for it, following part (Trendmag) List Post Carousel

With Custom Navigation

Row 6

155

Area 6.1

- Add (Trendmag) Detail Gallery widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Detail Gallery





Area 6.2





- Add Tagcloud widget then configure parameters for it



8. Creating Movies & Video page

To create Movies & Video page, you can follow the steps as follows:



2. Scroll down to part Page Builder, chose layout Media page



157


Row 1

Area 1

- Add (Trendmag) Slide Media widget then enter your text in text area then configure

parameters for it, following part (Trendmag) Slide Media

158

Row 2

Area 2

- Add (Trendmag) List Post Carousel With Custom Navigation widget then enter your

text in text area then configure parameters for it, following part (Trendmag) List Post Carousel

With Custom Navigation

Row 7

Area 7



Row 6

Area 6.1

- Add (Trendmag) List Videos With Custom Navigation widget then enter your text in

text area then configure parameters for it, following part(Trendmag) List Videos With Custom

Navigation



Navigation



Navigation

Area 6.2





- Add Tagcloud widget then configure parameters for it

159



9. Creating Single Post - Single Product

1. Go to Appearance Theme Option Layout Manager post: Select the layout for

your page: Single Post. Finally, click Save Options

2. Go to Appearance Theme Option Sidebar Manager, add new sidebar with name:

Single gallery after

3. Go to Appearance Widget: Dragging and dropping widget in sidebars the same as follows:

160

Blog right after sidebar

- Drag (Trendmag) Fickr into Blog right after sidebar.

- Drag Tag Cloud into Blog right after sidebar.

Blog Middle sidebar

- Drag (Trendmag) List Video into Blog Middle sidebar

Blog After sidebar

- Drag (Trendmag) Grid Posts Carousel into Blog After sidebar

Blog Before Footer Sidebar

- Drag (Trendmag) Advertisement into Blog Before Footer Sidebar.

- Drag (Trendmag) Instagram into Blog Before Footer Sidebar.

Blog Top Sidebar

- Drag (Trendmag) Slide Five into Blog Top Sidebar.

Single Top Sidebar

- Drag (Trendmag) Post Carousel into Single Top Sidebar

Page Info sidebar

- Drag (Trendmag) Contact Simple into Page Info sidebar

Page Content sidebar

- Drag Text into Page Content sidebar.

Shop Top sidebar

- Drag (Trendmag) Products Carousel into Shop Top sidebar.

Shop Before Footer Sidebar

- Drag (Trendmag) Advertisement into Shop BeforeFooter Sidebar

Single Gallery After sidebar

161

- Drag (Trendmag) Grid Posts More Link into Single Gallery After sidebar

Right Before sidebar

- Drag (Trendmag) Post Bxslider into Right Before sidebar.

- Drag (Trendmag) Advertisement into Right Before sidebar.

- Drag (Trendmag) Latest Products into Right Before sidebar.

- Drag (Trendmag) Recent Posts into Right Before sidebar.

Header (fixed)

- Drag Trendmag Social Link into Header (fixed).

Footer (fixed)

- Drag Text into Footer (fixed).

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

162

J. How to setup the demo site

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

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

- Step 2: Install Kopa Framework, Kopa Page Builder plugin (mandatory), Trendmag

Toolkit plugin (mandatory)

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

163

- Step 6: Import demo backup all setting file.

We offer you a demo backup all setting file with name kopatheme.net -demo-trendmag-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

instruction below

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

164

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

backup-all-settings.json file that is inside the folder and double click the file to select it and

then click the Import button.

165

- Step 7: Import demo widgets file

We offer you a demo widget file with name kopatheme.net-demo-trendmag-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

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

Click "Install Now" to install plugin

Click "Activate Plugin"

166

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

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.

167

K. 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 Trendmag/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

168

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

M. Sources and Credits

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

jQuery Form Plugins

Bootstrap

gmaps

classie

hoverIntent

jquery.backgroundvideo

bxslider

jquery.carouFredSel-6.2.1

imgLiquid

jquery.form

Magnific Popupd

jquery.matchHeight

jQuery Navgoco Menus Plugin

jQuery Validation Plugin

jQuery Wookmark plugin

jquery.wow- Copyright (c) 2014 Matthieu Aussaguel; Licensed MIT

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

http://getbootstrap.com/

http://hpneo.github.com/gmaps/

https://github.com/ded/bonzo

http://cherne.net/brian/resources/jquery.hoverIntent.html

http://victorcoulon.fr/

http://bxslider.com/

https://github.com/karacas/imgLiquid

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

http://brm.io/jquery-match-height/

https://github.com/tefra/navgoco

http://docs.jquery.com/Plugins/Validation

169

Modernizr

jQuery OwlCarousel v1.27

sticky-kit

uisearch.js

FitVids 1.0.3

flickrfeed

Image demo get from Pexels, Pixabay, Photodune with CC0 License

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

https://github.com/emn178/jquery-stickit

http://www.codrops.com/

http://fitvidsjs.com/

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

http://www.pexels.com/

http://pixabay.com/

https://www.google.com.vn/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CB0QFjAA&url=http%3A%2F%2Fphotodune.net%2F&ei=6tbVVLzZConMoATr7ICQAg&usg=AFQjCNFhl_e16CwEkOEBwWx2arXxJ7O2vw&sig2=Ln8irImvkgPFhMapsGm9dw&bvm=bv.85464276,d.cGU

170

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

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/

“trendmag – responsive wordpress theme … · 2016-02-19 · 7. woocommerce plugin setting...

Documents