“BEATMIX – RESPONSIVE WORDPRESS THEME ...box to enable this option to feature this product will...

1

“BEATMIX – RESPONSIVE WORDPRESS THEME

DOCUMENTATION”

Created: June 1, 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……..………………………………………………………………………..………….4

B. Plugin using in Beatmix theme……………………………………………………………..…………..8

1. Kopa Framework……………………………………………………………………………………………..8

2. Page Builder plugin……………………………………………………………..……………………..8

3. Beatmix Toolkit plugin……………………………………………………………..…………………12

4. WooComerce plugin……………………………………………………………..……………………12

C. Demo Content……………………………………………………………..…………………………………..15

D. Theme Options Customization……………………………………………………………..……………17

1. Theme Options…………………………………………………………………..………………………17

2. Sidebar Manager…………………………………………………………………..……………………20

3. Layout Manager……………………………………………………………………..………………….22

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

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

1. Events List - Pagination By Number……………………………………………………………..….27

2. Events List - Pagination By Next, Prev………………………………………………………………28

3. Events List By Months…………………………………………………………………..……………..29

4. Event Countdown……………………………………………………………..………………………..31

5. Event Countdown Lite…………………………………………………………………..……………..32

6. Contact form…………………………………………………………………..…………………………33

7. Contact Info…………………………………………………………………..………………………….34

8. Article Tabs……………………………………………………………………………………………….35

9. Article List Carousel……………………………………………………………………..……………..36

10. Article List………………………………………………………………………………………………..38

11. Single Article……………………………………………………………………………………………………39

12. Album Carousel……………………………………………………………………..…………………..40

13. Album List - Purple……………………………………………………………………..………………41

14. Album List - Pink……………………………………………………………………..…………………42

15. Album List - Big Thumb……………………………………………………………………..…………43

16. Album List Song - Lite…………………………………………………………………..……………..44

17. Album List Song……………………………………………………………………..…..……………..45

18. Audio Download List……………………………………………………………………….…………..46

19. Feature Album…………………………………………………………………..…………………..…..47

20. Feature Audio…………………………………………………………………..…………………..……48

21. Flickr…………………………………………………………………………………………………..…..49

3

22. Newsletter…………………………………………………………………………………………….….50

23. Band…………………………………………………………………………………………………...….51

24. Gallery……………………………………………………………………………………………….…...52

25. Latest Tweet Carousel…………………………………………………………………………………….…53

26. Latest Tweet……………………………………………………………………..………………….…..54

F. Custom Shortcode Generator……………………………………………………………………...……56

G. Create Data……………………………………………………………………………………………………….76

1. Create new Category……………………………………………………………..……………….……76

2. Create new Posts……………………………………………………………..……………………...…79

3. Create new Album……………………………………………………………..…………………….…82

4. Create new Gallery……………………………………………………………..…………..……..…..84

5. Create new Artist……………………………………………………………..…………………….….85

6. Create new Song……………………………………………………………..…………………….…..87

7. Create new Band……………………………………………………………..…………………..…...88

8. Create new Event……………………………………………………………..………………….…...89

9. Create Custom Menu……………………………………………………………..……………….….91

H. Create pages……………………………………………………………..………………………….………..93

1. Create Home page 1……………………………………………..………………………….………..93

2. Create Home page 2……………………………………………..………………………………….103

3. Create Event page 1……………………………………………..…………………………………..110




7. Create Album & Artist page……………………………………………..………………………….121

8. Create Contact page……………………………………………..…………………………………..124

9. Create Blog page……………………………………………..……………………………………….126

10. Create Gallery page……………………………………………..……………………………………126

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

J. Translation……………………………………………..…………………………………………………….133

K. Updating The Theme……………………………………………..………………………………….......134

L. Sources and Credits……………………………………………..…………………………………………135

4

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

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

- Step 1: Download the BeatMix theme files from your download page with name file "beatmix-

downloaded-package.zip ". The downloaded file consists of not only theme file but also demo

data, document, etc.

- Step 2: Unzip the file "beatmix-downloaded-package.zip ". Once the file has been unzipped you

will notice a file named BeatMix. This is the theme file.

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

5

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

Click "Add New" in either way.

Click “Upload Theme”

6

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

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

7

After activation, preview this theme you will see the theme request to install and active plugin to use this

theme:

- Kopa Page Builder plugin

- Kopa Framework plugin to active theme options

- Beatmix Toolkit plugin - A specific plugin used in Beatmix Theme to help you register post types

and widgets.

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

8

B. Using Plugin in Beatmix theme

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

must install plugin Beatmix toolkit to activate shortcodes, testimonials plugin, staff plugin, services plugin,

and portfolio plugin.

Go to Appearance Install Plugin you will see plugins required to install which is effective in using

theme

Let install and active them

1. Kopa Framework

You must install this plugin to active Theme Options, Sidebar Manager and Layout Manager

2. Page Builder plugin

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

sidebars. Especially, when you purchase our Beatmix 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 install theme, install

required plugin and import our demo data

The structure a Page Builder Rows Areas Widgets:

With each page builder, you can custom CSS for page

9

Customize full page:

10

Customize each row:

Install plugins

- Step 1: Go to Appearance Install Plugin: hover in Page Builder plugin to appear Install

hyperlink. Click to install

- Step 2: Activate plugin

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

including choosing rows, adding widgets to use for your page

11

- Step 4: Our pages are built based on this structure includes rows. And per widget added into rows, you

can configure CSS for it. To create each page properly structured, you should consider our guiders in

part Create pages

- Step 5: Add widget, you can follow Custom widget items to properly configure the widget.

12

3. Beatmix Toolkit plugin

Install and active to use shortcodes, album plugin, artist plugin, event plugin, band plugin, gallery plugin and

active widgets used to page which are integrated in Beatmix Toolkit plugin.

To install, click Appearance Install Plugin: hover in text Beatmix Toolkit plugin to see install

button, click to install.

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

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

choose WooCommerce - excelling E-Commerce then click Install Now.

- Step 3: Waiting for about 5s to WordPress auto download and Install Plugin WooCommerce.

- Step 4: Click to Activate Plugin.

WooCommerce is a WordPress E-Commerce plugin. It offers the features that are necessary for the

purpose of setting up an E-Commerce web store. Once you have successfully installed Divine theme, you

will be notified to activate WooCommerce plugin, which is included as a part of the theme. You need to

activate the plugin and complete the setting up process. Follow the below steps for a quick and free setup.

Click WooCommerce Settings.

1. General Settings: Enter your company details here.

2. Product: Allows you to select a weight unit, i.e., kilograms or pounds and change inventory options if

you want.

3. Tax: Enter the tax rate, country and the tax percentage to setup.

4. Checkout: This option lets you choose the coupon values. For bank transfer, fill out bank info. For

PayPal, fill out your PayPal info.

13

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 Beatmix

1. Creating new categories: Product Categories

2. Adding some new Products: On the WordPress dashboard Click on Products Add New. Enter

the title of the product, content, select product categories, excerpt and click Save.

3. In Product Data, select Product type

4. In General Tab, you can select pages where this product will be displayed. Checking on the Featured

box to enable this option to feature this product will make this a featured product.

5. Enter the Regular Price and Sale Price.

6. To disable default WooCommerce stylesheets, go to WooCommerce Settings General Check

Disable frontend styles box

7. In Inventory Tab, you can manage stock details. If you check ‘Manage Stock’ box, it will display the

stock quantity box. Enter the stock quantity. You can also choose the backorders attribute.

8. In Shipping: You can add weight, 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 frontend.

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

15

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.

First, you install and active the plugins recommended to import demo content success

Then 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://kopathem.net/demo/beatmix

16

- Click the Choose file button and locate the demo-data.xml file that is inside the 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.

17

D. Theme Options Customization

1. Theme Options

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

here. Here they are:

18

General Setting

You can:

- Upload favicon to display in window tab

- Custom Apple icon

- Custom notification in FrontPage 2

- Custom Excerpt length for blog

- Custom to show or hide Breadcrumb and Readmore element in your site

- Custom footer description

Headline

This tab helps you custom list article which will be displayed in headline such as category, number of post

Slider

This tab helps you custom list article will be displayed in top slider of front page 1 and front page 2 such

as category, tag, number of post and order by

Logo

This tab helps you upload logo your site.

Socials setting

Enter the Facebook link, Twitter link, Google Plus link, LinkedIn link, YouTube link, etc. if necessary.

19

Single Post setting

With single post, you can show or hide some element like thumbnail, rate, author post, post navigation,

about author, related post

Custom Related post such as get by (tag or category), number post, excerpt length of related post.

Custom Color Setting

You can custom main color, body text color and heading color, widget title color.

Custom Font Setting

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

uploaded shown in selectbox heading font, content font, main navigation font and widget title font.

- You can change heading font, content font, main navigation font and widget title font and custom font

weight, font size, font color for them.

Background setting

This option helps you custom background image for page header, footer header, Single artist header,

widget list events by month, single event in countdown layout, extra event header in event 4 page, author

background in single post, gallery page header, background of shortcode full with tab style, shortcode

transparent tab 1 and shortcode transparent tab 2 styles.

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.

Album

This option helps you custom title album archive and album per page.

20

Artist

This option helps you custom title artist archive and artist per page.

Gallery

This option helps you custom title gallery archive and gallery per page.

Page Builder

This options helps you custom enable or disable to use sticky toolbar in custom page.

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:


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

21

- 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

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

developers.

22

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.

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

23

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:

- All Setting: Come back the default for 3 tabs: Theme Options, Sidebar Manager, Layout

Manager

- Theme Options: Come back the default for Theme Options

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

Click Restore Defaults to finish the backup

24

Import/Export Setting

Besides Restore function, you also can import/ export setting 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 Options, Sidebars & Layout).

- Theme Options: It will make the backup for Theme Options tab

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

Note: With the widget used in Page Builder is configured differently than the widget using the normal

layout. Therefore, to the widget configure is correct, please following to the widget's introduction.

27

1. Events List - Pagination by Number: Display events list with timeline, pagination by number.

It displays on the front-end as below:

28

2. Events List - Pagination by Next, Prev: Display events list with timeline, pagination by next, prev.


29

3. Events List By Months: Display events list by months.


31

4. Event Countdown: Display Countdown to event.


32

5. Event Countdown Lite: Display Countdown to event without 2 buttons: Location, custom button.


33

6. Contact form: display a contact form:


34

7. Contact Info: display contact info include number phone, address, email


35

8. Article Tab : display a list article by tab


36

9. Article List Carousel: display a list article with carousel effect


38

10. Article List : display a list article with view count


39

11. Single Article : display a single article


40

12. Album Carousel: Display list albums carousel

41


13. Album List - Purple: Display list albums with all info Number of song, rating, release date...


42

14. Album List - Pink: Display list albums with all info: Number of song, rating, release date...

43


15. Album List - Big Thumb: Display list albums with big thumbnail.

44


16. Album List Song - Lite: Display list songs in an album without description.


45

17. Album List Song: Display list songs in an album and description.


46

18. Audio Download List: Display list download song.


47

19. Feature Album: display an album

48

20. Feature Audio: Display an album


49

21. Flickr: display a photos list from Flickr


http://flickr.com/

50

22. Newsletter: display subscribe form


51

23. Band: Display list bands. This widget used in Page Builder Front page 1 Row 4. Add the widget to

area 4, it will be displayed below


52

24. Gallery: show list gallery


53

25. Latest Tweets Carousel: display a tweet list by carousel effect


Note: How to get your Twitter API Keys

http://socialtoolbarpro.com/how-to-get-a-twitter-api-key-for-the-social-toolbar-feeds/

54

26. Latest Tweet: display a tweet list. This widget used in pages’ right sidebar belong to Layout

manager. It will be displayed in front-end below


56

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

This theme comes with following shortcodes to display the content:

1. Column shortcode: 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. Accordion and Toggle: include 3 style. Click to the Accordion/Toggle symbol, add title and content

for Accordion/Toggle:

[toggles style="1 or 2 or 3"]

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



[/toggles]

57

[accordions style="1 or 2 or 3"]

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



[/accordions]

Enter title toggle and toggle content replace default tile and content, the image will illustrate for above

shortcode:

58

3. Button: Click on the Button symbol, it displays code below

[button size="1,2,3" color="1,2,3" link="#" target="_blank"] Button [/button]

[button border="true" size="1,2,3,4" color="4" link="#" target="_blank"] Button [/button]

Example: [button size="1" color="1" link="#" target="_blank"] Small Button [/button]

[button size="1" color="2" link="#" target="_blank"] Small Button [/button]

[button size="1" color="3" link="#" target="_blank"] Small Button [/button]

[button border="true" size="1" color="4" link="#" target="_blank"] Small Button [/button]

Button will be displayed on the frontend as below:

4. Blockquote: Click on the blockquote symbol, it displays code below

[blockquote style="1" author="The author name"][/blockquote]



Example:

[blockquote style="1" author="Kopasoftheme"]Content input here[/blockquote]

59

Blockquote will be displayed on the frontend as below:

5. Event table: Click to the event symbol, it displays code below

[event number="5" tags="" excerpt="10"]

Example:

[event number="7" tags="event" excerpt="15"]

Event will be displayed on the frontend as below:

60

6. Progress bar: Click to the progress bar symbol, it displays code below

[progress_bar percent="10" delay="400"][/progress_bar]

Example: [progress_bar percent="85" delay="400"]Development[/progress_bar]

Progress bar will be displayed on the frontend as below:

61

7. Design element: Click on the Latest Tweet, Latest post, Archive symbol, it displays code below

[twitter number="5" twitter_id="" tw_api_key="" tw_api_secret="" tw_access_token=""

tw_access_token_secret=""]

[recent_posts number="5" cats=""]

[archieve limit="5"]

Design element will be displayed on the frontend as below:

8. Sticky Note: Click to the sticky note symbol, it displays code below

[sticky_note style="sticky-sky"][/sticky_note]

[sticky_note style="sticky-orange"][/sticky_note]

[sticky_note style="sticky-pink"][/sticky_note]

[sticky_note style="sticky-green"][/sticky_note]

Example: [sticky_note style="sticky-sky"]Content here[/sticky_note]

62

Sticky note will be displayed on the frontend as below:

9. Table style: Click to the Pricing table symbol and select 5 columns style, it displays code below

Example: You must go to Text editor and enter content below

[pricing_table_style style="5"]

[pricing_table style="5"]

[pt_caption]Title[/pt_caption]

[pt_featured]Category[/pt_featured]




[pt_featured]All Category[/pt_featured]

[/pricing_table][pricing_table style="5"]

[pt_caption]Title[/pt_caption]

[pt_featured][/pt_featured]




[pt_featured]Description[/pt_featured]

[pt_button url="#" target=""]Buy Now[/pt_button]


[pt_caption]Title[/pt_caption] [pt_featured][/pt_featured] [pt_featured][/pt_featured]

[pt_featured][/pt_featured] [pt_featured][/pt_featured] [pt_featured]Description[/pt_featured]

63

[pt_button url="#" target=""]Buy Now[/pt_button] [/pricing_table][pricing_table style="5"]



[pt_button url="#" target=""]Buy Now[/pt_button] [/pricing_table][pricing_table style="5"]



[pt_button url="#" target=""]Buy Now[/pt_button] [/pricing_table] [/pricing_table_style]

Table style will be displayed on the frontend as below:

10. Message box: Click to the alert symbol, it displays code below

[alert style="alert alert-dark-blue alert-dismissable" icon="fa fa-check"][/alert]

[alert style="alert alert-yellow alert-dismissable" icon="fa fa-check"][/alert]

[alert style="alert alert-green alert-dismissable" icon="fa fa-check"][/alert]

[alert style="alert alert-pink alert-dismissable" icon="fa fa-check"][/alert]

[alert style="alert alert-sky alert-dismissable" icon="fa fa-check"][/alert]

Example: [alert style="alert alert-sky alert-dismissable" icon="fa fa-check"]Enter Alert Text[/alert]

64

Message box will be displayed on the frontend as below:

11. Tabs: Click to the tab symbol, it displays code below

[tabs style="1,2,3,4,5"]

[tab title="Tab title"]Tab content[/tab]



[/tabs]

Numbers from 1 to 5 corresponding to simple tab style 1, simple tab style 2, fullwidth tab, Transparent

Tabs style 1 & 2

Tab will be displayed on the frontend as below:

66

12. Custom font: Click to the custom font symbol, it displays code below

[font style="1"][/font] corresponding to font-style italic

[font style="2"][/font] corresponding to font-color green

[font style="3"][/font] corresponding to text-transform uppercase

Example:

[font style="1"]Content[/font]

Custom font will be displayed on the frontend as below:

13. Highlight: Click to the highlight symbol, it displays code below

[highlight][/highlight]

Example:

Content before [highlight]Content highlight[/highlight]Content after

Highlight will be displayed on the frontend as below:

67

14. Divider: Click to the divider symbol, it displays code below

[divider style="1,2,3,4,5"

Numbers from 1 to 5 corresponding to shadow, single line, fat line, dotted, dashed style

Divider will be displayed on the frontend as below:

68

15. Dropcaps: inludes 3 style: turquoise, white, grey. Click to the dropcaps symbol, It displayss code

below

[dropcap style="1"][/dropcap]

[dropcap style="2"][/dropcap]

Example:

[dropcap style="1"]L[/dropcap]orem ipsum dolor sit amet, consectetur adipiscing elit...Content

input in front of close tag

Dropcaps will be displayed on the frontend as below:

69

16. Pricing table: Click to the Pricing table symbol, the code as below:

Style1


[pt_caption]Plan 1[/pt_caption]

[pt_price prefix="month"]10[/pt_price]

[pt_featured prefix="2x"] option1[/pt_featured]

[pt_featured prefix="free"]option 2[/pt_featured]

[pt_featured prefix="Unlimited"]option 3[/pt_featured]

[pt_featured prefix="Unlimited"]Option 4[/pt_featured]

[pt_featured prefix="2x"]Option 5[/pt_featured]

[pt_button url="#" target=""]Purchase[/pt_button]
























70





[/pricing_table]

[/pricing_table_style]

Style 2




[pt_price]10[/pt_price]























71












[/pricing_table]


Style 3



[pt_caption]Starter[/pt_caption]

[pt_price currency="$" prefix="month"]10[/pt_price]








[pt_caption]Basic[/pt_caption]







72



[pt_caption]Pro[/pt_caption]









[pt_caption]Ultra[/pt_caption]








[/pricing_table]


Style 4 - 3cols



[pt_caption]Starter[/pt_caption]









73

[pt_caption]Basic[/pt_caption]









[pt_caption]Pro[/pt_caption]








[/pricing_table]


Replace your contents in pricing table such like the caption, price, and features, link Button, Button text

for default content. The following image will illustrate for above shortcode

76

G. Create data

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.

78

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

listed below:

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

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

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

79

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:

81

1. Enter title post

2. Enter post content, you can use shortcode to create post content

3. Custom feature thumbnail other format and rate

4. Custom excerpt length (Excerpts are optional hand-crafted summaries of your content that can be

used in your theme)

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

6. Select author of post

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

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

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

click Add button to create

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

11. Check 1 format like: standard, video, gallery, audio, quote in meta box

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

82

3. Create New Album

To create new Album, follow these steps:

Go to Dashboard Album Add New

1. Enter album's name

2. Enter extra fields

3. Upload featured image of albums

4. Select genres of album

5. Click Update button to finish

You can see the following illustration:

83

You can see all staffs created in All Staff

84

4. Create new Gallery

To create a new gallery, do the following steps as below:

Go to Dashboard Gallery Add New

1. Enter gallery's title

2. Set featured image for gallery

3. Create new tag or assign tag created before for gallery



You can see all portfolio created in All Portfolio

85

5. Create New Artist

To create a new artist, do the following steps as below:

Go to Dashboard Services Add New

1. Enter Artist's name

2. Enter Artist's content

3. Enter extra field of artist

4. Set featured image for artist

5. Create new tag of artist



86

You can see all services created in All Services

87

6. Create new Song

To create a new song, do the following steps as below:

Go to Dashboard Song Add New

1. Enter title of song

2. Enter extra fields of song includes audio, select album and artist of song

3. Set featured image for song



88

7. Create new Band

To create a new band, do the following steps as below:

Go to Dashboard Slider Add New

1. Enter band's name

2. Enter intro of band

3. Enter direct link of band

4. Set featured image for band


You can see the following illustration

89

8. Create new Event

To create a new event, do the following steps as below:

Go to Dashboard Partner Add New

1. Enter event's name

2. Custom extra field include short description, map, phone, start day, start time, end day, end time,

button,

3. Create new tag of event


91

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

92

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

Edit Menu

1. To Edit Menus tab, select a menu to edit then click Select button to select.

2. You can the order of menus by dragging the menu and drop it to position you want, or you can change

navigation Label, Title Attribute, CSS class, link relationship, theme location…

3. Click Save button to save.

93

H. Create pages

1. Creating Home Page 1

To create Homepage 1, you can follow steps as below:

Go to Dashboard Pages Add New

1. Enter page's name

2. Click Publish button to save page

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

4. Configure for Rows

5. Add the widgets into Areas

6. Click Save button to save configuration of page builder

Configure parameters for Rows, Areas of Home page 1

Row 1:

- Customize:

Section: No

Overlay: No

Area NT: No

Wrapper: No

- Add widget:

Add Feature Audio widget to Area 1 then select an album to show.

Click Save button to save.

94

Row 2:

- Customize:

Section: Yes

Show section: Yes

Background image: upload an image from your computer into background

Area: Area 1

Use Parallax: No

Style: None

Overlay: Yes

Area NT: No

Wrapper: Yes/Style: Standard

- Add widget:

Add Event List - Pagination by number widget to Area 2 then custom below

Widget: custom title, custom post number equal posts per page, select a tag

Title: style 1

95

Row 3:

- Customize:

Section:

Show section: Yes

Area: Area 1

Use Parallax: No

Style: None

Overlay: No

Area NT: No

Wrapper: No

- Add widget:

Add Album List - Purple widget to Area 3 then custom below

Widget: Custom parameters like title, description and select multiple album to show

Title: style 1

96

Row 4:

- Customize:

Section:

Show section: Yes

Area: Area 2


Use Parallax: Yes

Style: Kopa Area Dark

Overlay: Yes

Area NT: No

Wrapper: Ye

Style: Standard

- Add widget:

Add Bands widget to Area 4 then custom below

Widget: Custom parameters like title, number of bands

Title: Style 1

97

Row 5:

- Customize:

Section:

Show section: Yes

Area: Area 3


Use Parallax: Yes

Style: None

Overlay: Yes

Area NT: No

Wrapper: Yes

Style: Standard

- Add widget:

Add Album List Song - Lite widget to Area 5.1 then custom below

Widget: custom title and select an album to show

Title: Style 1

Add Album Carousel widget to Area 5.2 then custom below

Widget: select multiple album to show

98

Row 6:

- Customize:

Section:

Show section: Yes

Area: Area 4


Use Parallax: Yes


Overlay: Yes

Area NT: No

Wrapper: Ye

Style: Standard

- Add widget

Add Article List Carousel widget to Area 6

99

Widget: custom title, category/tag, order by, number of posts, excerpt length

Title: style 1

Row 7:

- Customize:

Section:

Show section: Yes

Area: Area 5


Use Parallax: Yes


Overlay: Yes

Area NT: No

Wrapper: Ye

Style: Standard

- Add widget:

Add Gallery widget to Area 7

Widget: custom title, description and gallery configure

Title: style 1

100

Row 8:

- Customize:

Section:

Show section: Yes

Area: Area 6


Use Parallax: No

Style: None

Overlay: No

Area NT: No

Wrapper: Yes

Style: Standard

- Add widget:

Add Event Count Down widget to Area 8

Widget: custom title and select an event to show

Title: style 1

101

Row 9:

- Customize:

Section:

Show section: Yes

Area: Area 7


Use Parallax: Yes


Overlay: Yes

Area NT: Yes

Wrapper: Yes

Style: Standard

- Add widget:

Add Latest Tweets Carousel widget to Area 9

Widget: enter title and the parameters twitter id, API key, API secret, Access token, Access

token secret and custom number of item to show

Title: style 1

102

Row 10:

- Customize:

Section:

Show section: Yes

Area: Area 8


Use Parallax: No

Style: None

Overlay: Yes

Area NT: Yes

Wrapper: Ye

Style: Standard

- Add widget:

Add Contact form widget to Area 10.

Widget: enter title widget

Title: style 1

103

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

Configure parameters for Rows, Areas of Home page 2

Row 1:

- Customize:

Section: No

Overlay: No

Area NT: No

Wrapper: No

104

- Add widget:

Add Album List - Big thumb widget to Area 1 then select multiple album to show, click Save

button to save

Row 2:

- Customize:

Section:

Show section: Yes

Area: Area 9


Use Parallax: Yes


Overlay: Yes

Area NT: No

Wrapper: Yes Style: Standard

- Add widget

Add Event CounDown - Lite widget to Area 2

Widget: Select an event to show

105

Row 3:

- Customize:

Section:

Show section: Yes

Area: Area 10

Use Parallax: No


Overlay: Yes

Area NT: No


- Add widget:

Add Article List widget to Area 3.1

Widget: custom title, category, tag, number of post, excerpt length

Title: style 1

Add Article Tabs widget to Area 3.2

Widget: custom title, select multiple category or multiple tag, number of post, excerpt length

Add Audio Download List widget to Area 3.3

Widget: custom title, select multiple song to show

Title: style 1

Add Single Article widget to Area 3.3.2

Widget: custom title, select an article to show

Title: Style 1

107

Row 4:

- Customize:

Section: No

Overlay: Yes

Area NT: No

Wrapper: No

- Add widget:

Add Album List - Pink widget to Area 4

Widget: Custom title, description and select multiple album to show

Title: title

Row 5:

- Customize:

Section:

Show section: Yes

Area: Area 11


Use Parallax: Yes


Overlay: yes

Area NT: No

108


- Add widget:

Add Gallery widget to Area 5

Widget: custom title, description, upload multiple images

Title: style 1

Row 6:

- Customize:

Section:

Show section: Yes

Area: Area 12

Use Parallax: No


Overlay: Yes

Area NT: No


- Add widget

Add Event List - Pagination By number widget to Area 6

Widget: custom title, number of event equal number of page, excerpt length, tags

Title: style 1

109

Row 7:

- Customize:

Section:

Show section: Yes

Area: Area 13


Use Parallax: Yes


Overlay: Yes

Area NT: No


- Add widget

Add Newsletter widget to Area 7

Widget: choose service (feedburner or mail chimp) and enter URL (mail chimp) or ID

(feedburner)

Title: style 1

110

3. Create Event page 1

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



2. Scroll down to Page Builder item, chose layout Event 1

3. Configure parameters for Rows, Areas

4. Click Publish button to save.

112

Configure parameters for Rows, Areas of Event 1

Row 1:

- Customize:

Section:

Show section: Yes

Area: Area 6


Use Parallax: No

Style: None

Overlay: No

Area NT: No


- Add widget

Add Event Countdown widget to Area 1

Widget: enter title and select an event to show

Title: style 1

Row 2:

- Customize:

Section:

Show section: Yes

Area: Area 12

Use Parallax: No


Overlay: No

Area NT: No


- Add widget:

Add Event List - Pagination by number widget to Area 2

Widget: enter title, Custom number of event, number of page, excerpt length, tag

Title: style 1

113

4. Creating Event page 2





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




115


Row 1:

- Customize:

Section: No

Overlay: No

Area NT: No


- Add widget:

Add Album Feature widget to Area 1.1

Paste a link video to textbox Video URL and select an album and custom excerpt length

Row 2:

- Customize:

Section:

Show section: Yes

Area: None

Use Parallax: No

Style: Event Dark

Overlay: No

Area NT: No


Add Event List - Pagination by Next, Prev

Widget: enter title, custom event number and event per page

Title: style 1

5. Creating Event 3 page

To create Event 3, you can follow steps as below:




116





118


Row 1:

- Customize:

Section:

Show section: Yes

Area: Area 9


Use Parallax: Yes


Overlay: Yes

Area NT: No


- Add widget

Add Event CountDown Lite widget to Area 1 then select a event to show, click Save button

to save

Row 2:

- Customize:

Section:

Show section: Yes

Area: Area 14


Use Parallax: Yes


Overlay: Yes

Area NT: No


Add Event List - Pagination by Number

Widget: enter title, custom number of event and number per page

Title: style 1

119

6. Creating Event 4 page









121


Row 1:

- Customize:

Section: No

Overlay: No

Area NT: No

Wrapper: Yes Style: Clearfix

Add Event List by Month

Widget: Select multiple month, custom number month per page, number event per month,

year, excerpt length

7. Creating Album & Artist page

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

- Step 1: Go to dashboard: Appearance Theme Options Layout Manager Artist/ Album:

custom sidebars for widget areas

- Step 2: Go to dashboard: Appearance >> Menus: Click Screen Options to enable Custom

Postype Archive metabox >> Check in Artist / Album post type to add to main menu >>

Click Save Menu button to save

122

- Step 2: Go to dashboard: Appearance Menus: Click Screen Options to enable Custom

Postype Archive metabox Check in Artist/ Album post type to add to main menu

Click Save Menu button to save

123

- Step 3: Go to Appearance Widgets: Add the widgets to the sidebars

124

8. Create Contact Page

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







6. Add Contact Form shortcode to contact to create contact form


126

Row 1:

- Customize:

Section: No

Overlay: No

Area NT: No

Wrapper: No

Add Contact info widget to area 1 and enter information.

9. Create Blog page

1. Go to Appearance Layout Manager Blog custom the sidebar for the widget area. Finally,

click Save Options

2. Go to Settings > Reading: chose one page to make Posts page

3. Go to Appearance > Menus and make sure you already have a Main Menu Tab created and set as

default. Now check the blog page from the pages box and move the page name all the way to the main-

menu and Save Menu.

10. Create Gallery Page

Go to dashboard: Appearance Theme Options Layout Manager Gallery: custom sidebars for

widget areas

Go to dashboard: Appearance Menus: Click Screen Options to enable Custom Postype

Archive metabox Check in Gallery post type to add to main menu Click Save Menu button to save.

127

Click on Save Menu.

128

I. 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 Beatmix theme: following part A - Theme Installation

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

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.

129

- Step 6: Import demo backup all setting file.

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

130

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

settings.json file that is inside the folder and double click the file to select it and then click

the Import button.

131

- Step 7: Import demo widgets file

We offer you a demo widget file with name kopatheme.net-demo-Beatmix-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 "Active Plugin" to active plugin

132

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.

133

J. 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 Beatmix/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

134

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

135

L. Sources and Credits

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

jquery-1.11.1.min.js

form validator

jquery.form.js

Magic layout jQuery plugin

Google map jQuery plugin

Flickr jQuery plugin

OwlCarousel jQuery plugin

FredCarousel jQuery plugin

Responsive menu jQuery plugin

jQuery UI - v1.10.4

ProgressBar jQuery plugin

jQuery Wookmark plugin

jPlayer jQuery plugin

Match Height jQuery plugin

CountDown jQuery plugin

ScrollBar jQuery plugin

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

http://www.jquery.com/

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

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

http://masonry.desandro.com/

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

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

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

http://dev7studios.com/plugins/caroufredsel

http://www.komposta.net/article/navgoco

http://jqueryui.com/

http://www.cloud-eight.com/github/pro-bars/

http://www.wookmark.com/jquery-plugin

http://jplayer.org/

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

https://github.com/hilios/jQuery.countdown

http://manos.malihu.gr/jquery-custom-content-scroller

https://www.flickr.com/photos/jointcracker/9465789061

https://www.flickr.com/photos/kirkstauffer/3518045376

https://www.flickr.com/photos/dust/3793301695

https://www.flickr.com/photos/markjsebastian/15161220656/

https://www.flickr.com/photos/elisecathlene/6524033219

136

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

https://www.flickr.com/photos/emilianohorcada/3905889535

https://www.flickr.com/photos/idhren/16468824969

https://www.flickr.com/photos/rob215/13413709343



https://www.flickr.com/photos/markjsebastian/4097268668/in/photostream/

http://pixabay.com/en/record-player-disk-turntable-vinyl-336626/

http://pixabay.com/en/ipad-samsung-music-play-google-605439/

http://pixabay.com/en/guitar-guitarist-playing-the-guitar-445387/

http://pixabay.com/en/lead-singer-stage-performance-show-455750/

http://pixabay.com/en/music-sheet-note-pocket-watch-637860/

http://pixabay.com/en/guitar-guitar-player-musician-670087/

http://pixabay.com/en/guitar-music-musical-instrument-599482/

http://pixabay.com/en/bass-music-instrument-guitar-622598/

http://pixabay.com/en/mixing-desk-mixer-slide-control-351478/

http://pixabay.com/en/turntable-plate-long-player-single-599462/

http://pixabay.com/en/electric-guitar-rock-band-566096/

http://pixabay.com/en/bass-bass-guitar-music-guitar-376402/

http://pixabay.com/en/street-musicians-guitar-485110/

http://pixabay.com/en/drummer-drums-music-concert-675852/

http://pixabay.com/en/electric-guitar-rock-band-566096/

http://pixabay.com/en/headphones-earphones-audio-mp3-407190/

http://pixabay.com/en/violinist-concert-music-player-407185/

137

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

image use for demo

Video How to create music data and show to frontend

http://pixabay.com/en/record-player-phonograph-vinyl-349840/

http://pixabay.com/en/guitar-guitar-player-man-player-407114/

http://pixabay.com/en/music-serenity-sound-music-playback-184866/

http://pixabay.com/en/b-boying-breaking-breakdancing-413726/

http://pixabay.com/en/guitar-player-guitar-player-music-92385/

http://pixabay.com/en/urban-argentina-plaza-music-261568/

http://pixabay.com/en/singer-musician-woman-headphones-340210/

http://pixabay.com/en/mother-mother-music-guitar-band-63735/

http://pixabay.com/en/singer-musician-performer-vocalist-690117/


http://www.pexels.com/photo/1221/







https://youtu.be/01pwcpYv4QI

138

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

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/

“BEATMIX – RESPONSIVE WORDPRESS THEME ...box to enable this option to feature this product will...

Documents

Transcript of “BEATMIX – RESPONSIVE WORDPRESS THEME ...box to enable this option to feature this product will...