Documentation mugen woocommerce

WordPress Theme

Theme Documentation

First Thing First

Please take the time to read through the instructions and take notice of the instructions listed here, as many support related questions can be answered simply by re-readingthese instructions.

We will frequently update this theme for bug fix, add new features and more... please follow us on twitter to get notification.

If you are new with wordpress, please read the wordpress administration panel documentation at http://codex.wordpress.org/Administration_Panels

If you still have a problems, please send the issue to me via my support site http://interfeis.ticksy.com, please include the questions/problems, your site url and theme name.

— Interfeis Team

Table of Content

1. Theme Installation

2. Template Features

3. Blog Post

4. Slider

5. Portfolio

6. Testimonial

7. Brands

8. Pages Settings

9. Homepage Setting

10. Menu Settings

11. Sidebar Generator

12. Plugin, Widget and Shortcode

13. Other Settings

14. Support

1. Theme Installation

1. Unzip the zip file that you download from themeforest and locate the 'mugen.zip' file inside the 'Themes ' folder. This is the file you will need to install in wordpress.

2. Login to your wp-admin and install the theme by going to APPEARANCE >> THEMES. Click "Install Themes" tab and you will see the upload form. Please upload the'mugen.zip' in there and click Install Now button.

theme shared on wplocker.com

http://twitter.com/theinterfeis

http://codex.wordpress.org/Administration_Panels

http://interfeis.ticksy.com/

3. When the install is finished you will get a notification like this picture below :

4. Click 'Activate' link in there to activate the theme.

5. Before we import the dummy content, we need to install the woocommerce plugin first. Please download the woocommerce plugin from : http://www.woothemes.com/woocommerce/

6. If the download is finish, please install the plugin to your wordpress wp-admin.

7. Then we need to set the image options in woocommerce settings. please go to WOOCOMMERCE >> SETTINGS. and click Catalog tab. you need to set the image options inthere like the image below :

8. Now we need to import the Dummy Content . By doing this, you will get all post and page that you see in the demo.

9. Before that, you will need to install all of plugin listed on : Section 12. Plugins, Widget and Shortcode. Especially : Contact form 7 and Woocommerce

10. After the plugins are installed, locate the Dummy Content in Packages/Dummy Content/mugen.wordpress.xml.11. Upload the file mugen.wordpress.xml to wordpress system by going to TOOLS >> IMPORT.And click 'Wordpress' link in there.


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

http://wordpress.org/extend/plugins/contact-form-7/


12. Wordpress will install the importer. When the install is finished, please click 'Activate Plugin & Run Importer'.

13. You will get a form like the picture below. Now pick the .xml file (Packages/Dummy Content/mugen.wordpress.xml) and click 'Upload file and import'.

14. When the upload is finish, choose the author for all of the contents that you import and click 'Submit' button.

15. We will setup the menu now. Please go to APPEARANCE >> MENUS, and set the Theme Location to be "Main Menu" then click "Save" button


16. Now we will need to set the front page. Go to SETTINGS >> READING. Set the 'front page displays' to be 'A static page ' then choose the page that you want to set as a frontpage and also choose the page that you want to set as a Posts Page. if you finish, click 'Save Changes' button.

17. Now all we need to do is set the widgets. Please go to APPEARANCE >> WIDGETS and drag any widgets to 'Sidebar ', 'Footer1 Sidebar ', 'Footer2 Sidebar ', 'Footer3Sidebar ' & 'Footer4 Sidebar '.

18. Here is how we set for the 'Sidebar ' :

19. Here is how we set for the 'Footer Upper 1 Sidebar '. we use simple flickr plugin :


http://wordpress.org/extend/plugins/simple-flickr-plugin/

20. Here is how we set the widget for the 'Footer Upper 2 Sidebar ' :

21. Here is how we set the widget for the 'Footer Upper 3 Sidebar ':


22. Here is how we set for the 'Footer1 Sidebar ' :

23. Here is how we set the widget for the 'Footer2 Sidebar ' :




this is the code just in case you want to get the same footer 4 layout like our demo :

<ul>

<li class="clearfix contact_address"><div class="left"><span class="lambda-address"></span></div><div class="description">Jl.

Ranca Bentang No. 122<br />

West Ciumbuleuit, <br/>Bandung 12322<br/>Indonesia</div></li>

<li class="clearfix contact_phone" ><div class="left"><span class="lambda-phone"></span></div><div class="description">+62 (22)

555-2346</div></li>

<li class="clearfix contact_mobile"><div class="left"><span class="lambda-fax"></span></div><div class="description">+62 (22)

555-1247</div></li>

<li class="clearfix contact_email"><div class="left"><span class="lambda-email"></span></div><div

class="description">[email protected]</div></li>

</ul>

26. That's all folks :). you will get your website look like our demo. for more information, you can follow our documentation below.

27. Meanwhile you need to download and activate all plugins listed in instruction Plugin, Widget and Shortcode below.

back to top


2. Template features

1. Several Page Template :

1. Default Page : a page layout with sidebar on the right or left. you can set it from theme options

2. Portfolio : a page layout which show portfolio post. you can choose one of 3 layout we provide (2 columns, 3 columns, 4 columns).

3. Portfolio Filter: a page layout which show filterable portfolio post. you can choose one of 3 layout we provide (2 columns, 3 columns, 4 columns).

2. All Sidebar Position :

1. Sidebar - Located at the right side of page templates.

2. Footer Upper1 Sidebar - Located at the upper footer column 1 of page templates.




6. Footer1 Sidebar - Located at the footer column 1 of page templates.




back to top

3. Blog

Please read the wordpress documentation regarding writing a post at http://codex.wordpress.org/Posts_Add_New_SubPanel

You also can follow this instruction below:

a) Adding a Post Category

Adding a categories for blog is similar:

1. Log in to your WordPress Administration Panel (Dashboard).

2. Click the 'Posts >> Categories' link on the left side.

3. You only need to enter the category name field, the other are optional.

4. Click the 'Add New Category' button and you are done!

5. You will see the category you just added in the right side area.

b) Writing a Post for Blog

Write your post as you normally would:


2. Click the 'Posts' tab.

3. Click the 'Add New' Sub Tab

4. Input the 'title' and your content in contentbox5. As needed, select a category, add tags, and make other selections from the sections below the post. Each of these sections is explained at at

http://codex.wordpress.org/Posts_Add_New_SubPanel.

6. The theme also provide some Post Options to use in this post type.

7. Below is the list of all Post Options that provided for the posts :

1. Sidebar Position : Select the layout you want on this specific post/page. Overrides default site layout.

2. Thumbnail Image URL : (optional) Input the image URL for the post's thumbnail image on this post. This URL will overrides featured image.


http://codex.wordpress.org/Posts_Add_New_SubPanel



http://codex.wordpress.org/Posts_Add_New_SubPanel

8. When you are ready, click Publish.

c) Adding a Blog Page


2. Click the 'Pages ' tab.


4. Enter the title 'Blog' in the title box.

5. Then go to SETTINGS >> READING, and set the 'Front page displays' to 'a static page '.

6. set the 'Posts page ' to 'Blog'.


back to top

4. Flexslider & Layerslider

Tutorial to add a Layerslider (You dont need to install the Layerslider WP Plugin anymore because it's already embedded):

1. Please go to Layerslider >> Add New. and click Documentation button on the top right of the page( just like the picture below ). you will get the video to getting started withlayerslider

Tutorial to add flexslider post and slider category.

Add Slider Category

1. Click the 'Slider >> Slider Categories'.

2. Input the category 'Name ' and 'Description'.

3. Click 'Add New Category' button if you finish.

Add Slider Posts

1. Click the 'Slider >> Add New' link on the left side menu.

2. Input the slider 'Title'.

3. Choose or add slider category in 'Slider Categories' box.

4. You can 'upload ' and 'set featured image ' for slider. This featured image will be used for slider image.

5. After the upload is finish, click 'Use As Featured Image' to use the image file you've just uploaded.

6. The theme also provide some customfields to use in slider post.

7. Below is the image of Slider Options that can be used for slider post :




9. You can add several slider post to make the animation works.

10. You can set the slider setting by going to APPEARANCE >> THEME OPTIONS and click SLIDER Tab.


back to top

5. Portfolio & Portfolio Filter

Tutorial to add Portfolio

Add Portfolio Category

1. Click the 'Portfolio >> Portfolio Categories' link on the left side menu.

2. Input your category name and the category description in the form.

3. Click the 'Add New Category' button when you are done!


Adding Portfolio posts

5. Click the 'Portfolio >> Add New' link on the left side menu.


7. Now input your title and content.

8. You can 'upload ' and 'set featured image ' for portfolio thumbnail. This featured image will be used for portfolio thumbnail.

9. You will see the wordpress media uploader window show up.

10. Select image to upload.

11. After upload you will see the image information.

12. Click the 'Use as fetured image ' link in the bottom.

13. You can upload the file as much as you want.


14. Below is the image of Portfolio Options that can be used for portfolio post :

15. You can add Custom Fields like the image below to set the lightbox or external link :

lightbox_img : put the full url of the image/video location to make the portfolio image show the lightbox. you can add this customfield as much as you want.

16. Select the Portfolio category in the right 'Portfolio Categories' section.


18. You can add as many display posts as needed.

Add Portfolio Page



21. Enter the title 'Portfolio' in the title box.

22. Select the 'Portfolio' template in the right 'Page Attribute' section.

23. after that you need to set the Page Portfolio Options in the page. here is the image of the page portfolio options:


Add Portfolio Filter Page



26. Enter the title 'Portfolio Filter' in the title box.

27. Select the 'Portfolio Filter' template in the right 'Page Attribute' section.

28. after that you need to set the Page Portfolio Options in the page. here is the image of the portfolio options :


back to top

6. Testimonial

Tutorial to add Testimonial post and Testimonial Category.

Add Testimonial Category

1. Click the 'Testimonials >> Testimonial Categories' link on the left side menu.




Adding Testimonial posts

1. Click the 'Testimonial' tab.

2. Click the 'Add New' Sub Tab.

3. You can put the name on the title and the testimonial on the content4. You can set the Testimonial Options like the image below to set the testimonial info and testimonial thumbnail :



Add Testimonial Page



9. Enter the title 'Testimonial' in the title box.

10. Input this shortcode in the content box : [testimonial class="{any-class-name}" cat="{your-testimonial-category}" showposts="5" showinfo="no"]

11. click 'Publish' button when you are done!

back to top

7. Brands

Tutorial to add Brand post and Brand Category.

Add Brand Category

1. Click the 'Brands >> Brand Categories' link on the left side menu.




Adding Brand posts

1. Click the 'Brands ' tab.


2. Click the 'Add New' Sub Tab.

3. You can put the brand name on the title4. You can set the Brand Options like the image below to set the brand thumbnail :



Add Brand Shortcode



9. Enter the title 'Brand' in the title box.

10. Input this shortcode in the content box : [brand_carousel class="{any-class-name}" cat="{your-testimonial-category}" showposts="5" title="{Your Title Text}"]

11. click 'Publish' button when you are done!

back to top

8. Pages Settings

Page are content such as 'About', 'Contact', etc... for more information about WordPress Page, please see the documentation at http://codex.wordpress.org/Pages_Add_New_SubPanel

a) Adding a Pages


2. Click the 'Pages >> Add New' link on the left side.

3. Input your Title in the title textbox.

4. Input your Content in the content textbox.


http://codex.wordpress.org/Pages_Add_New_SubPanel


5. As needed, you can set the 'Template ' and the 'Parent' for your page on 'Page Attribute' box in the right side box.

6. The theme also provide some Page Options to use in page.

7. Below is the image of the Page Options that you can set in the edit page :


Add slider in the page

8. You need to set the Page Slider Options to enable the slider in your page. Here is the options :



back to top

9. Home Page Settings

Tutorial to add the Home page.



3. You can name it 'Homepage ' or 'Welcome ' or any name that you want.

4. Select the 'No Sidebar ' template in the right 'Page Attribute' section.

5. Add the home page text in the content editor box.

6. Select the 'Sidebar ' for the page.


Set this home page as front page

8. In the left side menu, click the 'Settings' tab.

9. Click the 'Reading' sub tab.

10. Then change the "Front page displays" to "A static page" and choose the page that you just created.

11. Save the settings.


back to top

10. Menu Settings

The menu setting use the new WordPress 3.0 menu manager, please read the documentation athttp://codex.wordpress.org/Appearance_Menus_SubPanel

Setup menu guide:

1. click the 'Appearance' tab then 'Menus' Sub Tab

2. Add new menu, enter the menu name then click 'Save '

3. Assign the menu to the 'Main Menu' location (Just Main Menu for this theme)

4. Custom Link: enter your website url in the URL field and 'Home ' text in the Label field click then 'Add to Menu'

5. Pages: Select the pages that you want to add to menu then click 'Add to Menu'

6. Check the Screen Options (upper right) to insure CSS and Description modules are set to display

7. You can add custom css to each menu item, this theme first menu on the left use the 'home ' css classes. (Not used by this theme)

8. add a description to each main menu item. (Not used by this theme)

9. Don't forget to click the 'Save Menu' before you leave this page!


http://codex.wordpress.org/Appearance_Menus_SubPanel

back to top

11. Sidebar Generator

Tutorial to add Custom Sidebar


Add Sidebar in Theme Options

1. Go to the 'Appearance' tab.

2. Click the 'Sidebar Manager' Sub Tab.

3. Input the 'Sidebar Name ' in the Sidebar Generator Textbox!

4. Click 'Add' and in a second the sidebar name will appear in the bottom of the textbox.

5. The sidebar will appear in APPEARANCE >> WIDGETS

6. The sidebar will appear in your edit page too.

back to top


12. Plugins, Widget and Shortcode

a) Plugins

Install some plugins (listed below). Search for the plugin name from within wordpress admin, then add and activate it. Some plugins can conflict with the theme, but the ones listed below havebeen tested to work, and also extra styling for the plugins has been added. Only add those that are needed. Adding too many will slow down your website.

WoocommerceDownload: http://www.woothemes.com/woocommerce/Description: WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully.

Contact Form 7Download: http://wordpress.org/extend/plugins/contact-form-7/Description: 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-poweredsubmitting, CAPTCHA, Akismet spam filtering and so on.

Content Aware SidebarsDownload: http://wordpress.org/plugins/content-aware-sidebars/Description: Creating flexible, dynamic sidebars has never been easier, and no code is needed at all as everything is easily done in the administration panel. No extra database tables or tablecolumns will be added.

WP PageNavi Download: http://wordpress.org/extend/plugins/wp-pagenavi/Description: This plugin provides the wp_pagenavi() template tag which generates fancy pagination links.

Wordpress ImporterDownload: http://wordpress.org/extend/plugins/wordpress-importer/Description: Import posts, pages, comments, custom fields, categories, tags and more from a WordPress export file.

Flickr PhotosDownload: http://wordpress.org/extend/plugins/simple-flickr-plugin/ Description: Flickr Photos plugin is the perfect and easiest way to show your Flickr pictures on your site. You can also show any Flickr group or public photos too.

Really Simple CAPTCHADownload: http://ideasilo.wordpress.com/2009/03/14/really-simple-captcha/Description: Really Simple CAPTCHA is a CAPTCHA module intended to be called from other plugins. It is originally created for my Contact Form 7 plugin.

Yoast BreadcrumbsDownload: http://yoast.com/wordpress/breadcrumbs/Description: This plugin allows you to add breadcrumbs to your theme.

b) Custom Widget

1. Latest Post This widget is used for display recent post, blog, news in the left and the right sidebar position, you can activate this widget on any pages.

2. IF - Recent Comments This widget is an alternate of the default Recent Comments widget, it show the comments.

c) Shortcodes

1. Column Shortcodes

[one_half class=""] ...your text here... [/one_half]

[one_fourth class=""] ...your text here... [/one_fourth]

[one_third class=""] ...your text here... [/one_third]

[one_third class=""] ...your text here... [/one_third] [two_third class=""] ...your text here... [/two_third]

[one_fourth class=""] ...your text here... [/one_fourth] [three_fourth class=""] ...your text here... [/three_fourth]

class - [string]Specify the class for your column. To remove the margin-right you need to add "last".

2. Separator Shortcode

[separator line="yes"]

line : "yes" or "no"



http://wordpress.org/extend/plugins/contact-form-7/

http://wordpress.org/plugins/content-aware-sidebars/

http://wordpress.org/extend/plugins/wp-pagenavi/

http://wordpress.org/extend/plugins/wordpress-importer/

http://wordpress.org/extend/plugins/simple-flickr-plugin/

http://ideasilo.wordpress.com/2009/03/14/really-simple-captcha/

http://yoast.com/wordpress/breadcrumbs/

3. Tabs Shortcode

[tabs][tab title="title1"] ....your text here.... [/tab][tab title="title2"] ....your text here.... [/tab][/tabs]

4. Toggles Shortcode

[toggles][toggle title="toggle1"] ....your text here.... [/toggle][toggle title="toggle2"] ....your text here.... [/toggle][/toggles]

5. Pullquote Shortcode

[pullquote position=""] ....your text here.... [/pullquote]

position : "left" or "right"

6. Blockquote Shortcode

[blockquote] ....your text here.... [/blockquote]

7. Dropcap Shortcode

[dropcap type=""] ....your character here.... [/dropcap]

type : "circle", "square", "default"

8. Highlight Shortcode

[highlight type="grey"] ....your text here....[/highlight]

type : "grey", "black"

9. Content Title Shortcode

[content_title]...your text or html content here....[/content_title]

10. Portfolio Carousel Shortcode

[portfolio_carousel title="{Your Title in here}" cat="{portfolio-category-slug}" showposts="{number-of-post}"]

title - [string]Specify the title for your carousel.

cat - [string]Specify the portfolio category-slug for your carousel. You can get your category-slug on PORTFOLIO >> PORTFOLIO CATEGORIES.

showposts - [number]Specify the number of post that you want to show.

11. Recent Posts Shortcode

[recent_posts title="{Your Title in here}" cat="{post-category-slug}" showposts="{number-of-post}"]


cat - [string]Specify the portfolio category-slug for your carousel. You can get your category-slug on POSTS >> CATEGORIES.


12. Frameimg Shortcode

[frameimg src="{Your image URL}" alt="{Your Alternate Text}" class="{your custom class}"]

src - [string]Specify your image url.

alt - [string]Specify the alternate text of your image.


class - [string]Specify the class of your frame image.

13. Bigtext Shortcode

[bigtext]...your text or html content here....[/bigtext]

14. Secondarytext Shortcode

[secondarytext]...your text or html content here....[/secondarytext]

15. Custom Heading Shortcode

[heading level="{choose the level that you want to use}" align="{left/center/right}" class="{your custom class}"]...your text or html content here....[/heading]

level - [string]Specify the heading level in this parameter.Here is the level that you can put : 1,2,3,4,5,6.

class - [string]Specify the custom class in this parameter if you need it.

align - [string]Specify the align in this parameter.Here is the align that you can put : left, center, right.

16. Sliders Shortcode

[sliders][slide] ....your text/html here.... [/slide][slide] ....your text/html here.... [/slide][slide] ....your text/html here.... [/slide][/sliders]

17. Testimonial Shortcode

[testimonial id="{put your custom id in here}" class="{put your custom class in here}" cat="{testimonial-category-slug}" showposts="{number-of-post}" showtitle="{yes/no}"showinfo="{yes/no}"]

id - [string]Specify your custom id for your testimonial. (optional)

class - [string]Specify your custom class for your testimonial. (optional)

col - [number]Specify the column for your testimonial. You can set the column with : 1,2 and 3. (default value : 1)

cat - [string]Specify the testimonial category-slug for your testimonial. You can get your category-slug on TESTIMONIAL >> TESTIMONIAL CATEGORIES.


showtitle - [boolean]put 'yes' if you want to show the title.

showinfo - [boolean]put 'yes' if you want to show the info.

18. Featured Slider Shortcode

[featuredslider id="{put your any post id in here}" class="{put your custom class in here}" moreproperties='{put your another properties tag in here}']

id - [number]Specify your any Post ID to get all Featured Images. (optional)

class - [string]Specify your custom class in here.(optional)

moreproperties - [string]You can set another properties tag with this parameter. example : moreproperties='data-xrange="60" data-yrange="60" style="bottom:10px; left:50%;" '

19. Testimonial 360 Shortcode

[testimonial360 id="{put your any post id in here}" class="{put your custom class in here}" cat="{put your category -slug in here}" title="{Your Title Text}" showposts="{number of posts}"showtitle="{yes/no}" showinfo="{yes/no}" showthumb="{yes/no}"]


class - [string]


Specify your custom class in here.(optional)

cat - [string]Specify the category of testimonial post that you want to show.

title - [string]Specify the title for your shortcode.

showposts - [number]Put the number of testimonial posts that you wan to show.

showtitle - [boolean]put 'yes' if you want to show the title.

showinfo - [boolean]put 'yes' if you want to show the info.

showthumb - [boolean]put 'yes' if you want to show the thumbnail.

20. Product Filter Shortcode

[product_filter id="{put your any post id in here}" class="{put your custom class in here}" type="{best-selling/featured/top-rated}" title="{Your Title Text}" showposts="{number of posts}"col="{3/4}"]



type - [string]Specify the type of filter (best-selling / featured / top-rated) that you want to show.( default : featured)


showposts - [number]Put the number of testimonial posts that you wan to show. (default : 12)

col - [number]Specify the column for your testimonial. You can set the column with : 3 and 4. (default value : 4)

21. Product Carousel Shortcode

[product_carousel class="{put your custom class in here}" type="{best-selling/featured/top-rated}" title="{Your Title Text}" showposts="{number of posts}" col="{3/4}"]


type - [string]Specify the type of filter (best-selling / featured / top-rated) that you want to show.( default : featured)


showposts - [number]Put the number of testimonial posts that you wan to show. (default : 12)

22. Brand Carousel Shortcode

[brand_carousel title="{Your Title in here}" cat="{brand-category-slug}" showposts="{number-of-post}"]


cat - [string]Specify the brand category-slug for your carousel. You can get your category-slug on BRANDS >> BRAND CATEGORIES.


back to top

13. Other Settings

a) Theme Options

We provide Theme Options for the theme so the customer can set the theme easily. You can go to APPEARANCE >> THEME OPTIONS to set the theme. Theme Options has 5 partsin this theme :

1. General Settings. This part provide some general options like Sidebar Position, Responsive toggle, etc :



2. Style Settings. This section relates to style & layout option like container's width, changing font , etc : theme shared on wplocker.com

3. Social Network. This section relates to social network options. you can set the social network icon in here :


4. Slider Settings. This section relates to slider option :

5. Miscellaneous.


b) All Images Size

Images size used in this theme:

1. post-blog: 700px x 242px2. post-thumb-small: 60px x 60px3. portfolio two column : 547px x 340px4. portfolio three column : 349px x 260px5. portfolio four column : 251px x 191px6. brand-image : 234px x 150px

c) Featured Images

You can 'upload ' and 'set featured image ' for portfolio and slider. This featured image will be used as thumbail.

1. When adding a new post, you will see in the right side area the 'Featured Image' box.

2. Click the 'Set featured image ' link.

3. You will see the wordpress media uploader window show up.

4. Select image to upload.

5. After upload you will see the image information.

6. Click the 'Use as fetured image ' link in the bottom.

7. Done, just close the window.

8. If you want to use this image as post image, just click the 'Insert into Post' button.

back to top

14. Support


WeI will do my best to assist with questions directly related to the theme set up, however please note that theme support is completely voluntary for ThemeForest authors. Therefore beforeyou contact me, please consider finding an answer to your question in:

The relevant section of the documentation

WordPress Codex for general WordPress questions

Google for general questions

Send a ticket on the Interfeis Support Forum if your question doesnt get an answer

back to top


http://codex.wordpress.org/Main_Page

http://google.com/

http://interfeis.ticksy.com/

Documents

Documentation mugen woocommerce