Professional Documents
Culture Documents
Documentation Mugen Woocommerce PDF
Documentation Mugen Woocommerce PDF
Theme Documentation
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
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.
3. When the install is finished you will get a notification like this picture below :
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 in
there 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.
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'.
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 front
page and also choose the page that you want to set as a Posts Page. if you finish, click 'Save Changes' button.
19. Here is how we set for the 'Footer Upper 1 Sidebar'. we use simple flickr plugin :
20. Here is how we set the widget for the 'Footer Upper 2 Sidebar' :
23. Here is how we set the widget for the 'Footer2 Sidebar' :
24. Here is how we set the widget for the 'Footer3 Sidebar' :
25. Here is how we set the widget for the 'Footer4 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">ramayana@interfeis.com</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.
3. Footer Upper2 Sidebar - Located at the upper footer column 2 of page templates.
4. Footer Upper3 Sidebar - Located at the upper footer column 3 of page templates.
5. Footer Upper4 Sidebar - Located at the upper footer column 4 of page templates.
6. Footer1 Sidebar - Located at the footer column 1 of page templates.
7. Footer2 Sidebar - Located at the footer column 2 of page templates.
8. Footer3 Sidebar - Located at the footer column 3 of page templates.
9. Footer4 Sidebar - Located at the footer column 4 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:
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.
back to top
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 with
layerslider
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 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.
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.
2. Input your category name and the category description in the form.
3. Click the 'Add New Category' button when you are done!
4. You will see the category you just added in the right side area.
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 content
4. You can set the Testimonial Options like the image below to set the testimonial info and testimonial thumbnail :
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.
2. Input your category name and the category description in the form.
3. Click the 'Add New Category' button when you are done!
4. You will see the category you just added in the right side area.
Adding Brand posts
1. Click the 'Brands' tab.
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
5. As needed, you can set the 'Template' and the 'Parent' for your page on 'Page Attribute' box in the right side box.
back to top
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.
back to top
The menu setting use the new WordPress 3.0 menu manager, please read the documentation at
http://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!
back to top
back to top
Woocommerce
Download: http://www.woothemes.com/woocommerce/
Description: WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully.
Contact Form 7
Download: 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-powered
submitting, CAPTCHA, Akismet spam filtering and so on.
Content Aware Sidebars
Download: 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 table
columns 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 Importer
Download: http://wordpress.org/extend/plugins/wordpress-importer/
Description: Import posts, pages, comments, custom fields, categories, tags and more from a WordPress export file.
Flickr Photos
Download: 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 CAPTCHA
Download: 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 Breadcrumbs
Download: 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"
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]
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]
[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.
showposts - [number]
Specify the number of post that you want to show.
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}"]
id - [number]
Specify your any Post ID to get all Featured Images. (optional)
class - [string]
class - [string]
Specify your custom class in here.(optional)
type - [string]
Specify the type of filter (best-selling / featured / top-rated) that you want to show.( default : featured)
title - [string]
Specify the title for your shortcode.
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}"]
title - [string]
Specify the title for your carousel.
cat - [string]
Specify the brand category-slug for your carousel. You can get your category-slug on BRANDS >> BRAND CATEGORIES.
showposts - [number]
Specify the number of post that you want to show.
back to top
2. Style Settings. This section relates to style & layout option like container's width, changing font, etc :
3. Social Network. This section relates to social network options. you can set the social network icon in here :
5. Miscellaneous.
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 before
you 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