Thank you for purchasing MightyMag. If you have any questions after reading the documentation, that are beyond the scope of this help file, please open a ticket on the dedicated support site, it'll be processed as soon as possible!
Method 1: To upload the theme you need to extract the downloaded zip file. Once extracted you'll see a file named mightymag.zip. Go to Appearances > Themes and click upload. Select the "mightymag.zip" file on your hard disk.
Also check out Wordpress Codex: http://codex.wordpress.org/Using_Themes
If you are migrating from another theme, you need to resize all the images and thumbnails to the right size. Fastest way to do this is by using the Regenerate Thumbnails plugin, simply install, navigate to Settings → Regen. Thumbnails and run it. Job done.
Before you attempt any customization please get familiar with one of the web inspectors. In the end you will save a huge amount of time. If you are on Chrome it is already installed, simply right-click on the element you want to change and select "Inspect Element" or press F12. If you are using Firefox you can install the Firebug addon.
When you open it you will see two panes. The markup is on the left with the css on the right. Once you target the element you want to change, you have access to all css right there in the browser. Once you change a css property you can see the results instantly.
Once you've figured out what elements you want to change, you can paste those changes into the "Custom CSS" box in the theme options. If you edit the actual css files then you might have some issues when you upgrade the theme. Keeping your css customizations in the theme options will keep them nice and safe.


To add your menus you go to Appearances > Menus and you can create the menus there.
There are three menu locations: Primary (main navigation), Utilities and Footer. To learn more about creating menus please refer to the WordPress Codex.
To add a color to the bottom line on hover/active state of your menu item, you simply paste in the hexidecimal value into the description field (enable descriptions at the top right of the screen via "Screen Options").
For example if you wanted red you would paste in #FF0000.

Also CSS color names like hotpink and orange are supported, for the full list check out this URL: http://www.w3schools.com/cssref/css_colornames.asp
Go to Appearances > Theme Options > Basic Settings > Header Logo Upload. Click upload and navigate to the file on your hard disk.
You can add an additional logo at the bottom of the page by uploading it in Appearances > Theme Options > Basic Settings > Footer Logo Upload.
You have quite a few options for customizing the categories. All the options are in there when you edit the category.
Note: any parent category customization will also affect its sub-categories.
Color: This is the main category skin color.
Background Color: If you want a solid color as page background, select it here
Background Image or Pattern: Add a background. Simply upload the file and save.
Background Position: Select wheather you want a full screen background or a tiled one. Usually the first one is suitable for big pictiures, the second for patterns.
Header Background Image: Optionally you can upload a background for the category header. This will override any header background you set globally through the Theme Options.
Custom CSS: Enter here any custom CSS for the specific category.
Enable Featured Slider: Check the box if you want the slider to appear and bring in featured posts from that category.
Show Posts Preview in Main Menu: Check the box if you want to show post previews when you add a category to the menu.
There are quite a few options for the single post. Let's get through them:

<iframe width="560" height="315" src="http://www.youtube.com/embed/5zFWVXr-LHY" frameborder="0" allowfullscreen></iframe>
Comment Type
Select wheather to use FaceBook Comment or Regular (Ajaxified) WP Comments for the post.
The advantage of using Facebook comments is that you will get more reach on social media networks. However, keep in mind that user anonymity is gone and that could stop people voicing their opinion if the subject matter elicits strong opinions or is controversial. There are plenty of well written articles on the web dealing with WP vs. FB comments so a little research may be in order to figure out what is most appropriate for your website.

Enable Review?
Here you mark the post as a review so that the various loops in the theme will recognize it, look for a score and show the stars or percentage it was rated
Enable User Rating?
Adds the possibility for your users to give a rate too on the subject.
Criteria Name
Here you can break down the various parts of the review e.g., Graphics, Value, Sound and so on. Give each one a description and a score by dragging the slider. Leave the name field empty if you don't need it.

Avarage
An avarage value will be automatically calculated from the criteria sliders, and this will be you final overall score. You can change it at the end and save the post if you don't want a mathematic avarage. Watch out not to drag the sliders after that or the value will be overridden with the mathematic average again.
Rating Type
Select Stars or Percentage rating. For Stars Type rating the total value will be outputted in a 0 - 5 form. For the Percentage Type rating the 0 - 100 scale will be kept instead.
Criteria Header/Rating Tag/Longer Summary
These options are used to control how the criteria headers and summaries will appear on the post.
Affiliate Link
Use this space to enter a link to some product or service you may sell or promote.
Affiliate Catch Phrase
Some catching words for the affiliate link. (e.g "Buy it here to have a 40% discount!"
Affiliate Button Text
The text inside the button (e.g. "Buy Now!")
Cart Icon on button
Check this box if you want a cart icon to prepend the button text.

Full-width Layout
Disable the sidebar if you want this post to have a full-width layout.
Sidebars
If you previously created some extra sidebars through the Sidebar Generator in the Theme Options, then you can select them here.

Small Featured Image
Select this option if you need to display a smaller featured image in front-end, useful when you have to deal with low quality images.
Hide Featured Image
Select this option to completely hide the featured image inside the post, the thumbnail preview will still be visible throughout the site.
To access the theme options go to Appearance > Theme Options. There are plenty of options that will help you setting up your Blog without touching any code. Let's loop through most of them:
Header Logo Upload
This is an important option for your Blog. Selecting Widgetized Home will transform your homepage in a fully widgetized area divided in three sections:
You can then move to Appearance > Widgets to set up your widgets on those sidebars.
For best results and to replicate the live demo, drag the widgets which name starts with HP on the homepage 'sidebars'. Those widgets are especially designed to fit the homepage.

If you select the Classic Blog option, your front page will act as a normale blog page, displaying latest posts and the regular default sidebar.
Post Excerpts
Notice: Please be aware that using Auto Trim will not output shortcodes in post excerpts.
Retina Support
Enable this if you want the Retina Support to be activated.
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.
For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />
The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"
Custom Favicon
Upload a 16px x 16px Png/Gif image to represent your website, this will be displayed right next to your address URL and as a bookmark icon.
Footer Logo Upload
Select the image to use as logo for the footer. The PowerMag footer logo size is 100x22 px.
Footer Credits
Write here your copyright credits or other footer stuff.
Display Breadcrumb
Enable/Disable breadcrumbs.
Breadcrumbs appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.
Typical breadcrumbs look like this:
Home page > Section page > Subsection page
Display Related Posts
Enable/Disable related post. If enabled you can chose how many related posts to display. Related posts are picked by tags similarities.
Show/Hide author box with biography, avatar and social icons.
To display the avatar you need to add a gravatar image. Go to http://www.gravatar.com and signup with the exact same e-mail address in your wp user profile. Upload your photo or image and save it. This will then automatically appear in the author page and in your comments around the web.
To get the biography to appear you need to simply fill out the "bio" box in your user profile page in the wp dashboard > users.
To get the social network icons to appear you need to put in your links into the relevant boxes.
Back to Top
Show/Hide the back to top arrow that appears on the bottom left of the browser window and on sticky navigation.
Sidebar Position
Move the sidebar left or right
Sidebar Generator
In this block you can generate new sidebars to attach to singular posts or pages. Click on Add SIdebar, type a name, and that's it. Now move to the Widgets page and drag your widgets in the sidebar you just created.
To attach the sidebars to posts or pages select them through the meta box in the single post options.

Home Page Sidebar
Decide wheather to use the default Sidebar or the HomePage Right on the homepage when the Widgetized homepage is selected.
On this tab you can activate the homepage slider(s) and the optional grid. Drag the sliders to select how many posts you want to display for each slider, and the animation settings.
To feature a post or page on a particular slider see the Single Post section of this very documentation
Here's a few options regarding the live ajax search on header section.
Minimum Characters to Begin Search
Set the minimum characters needed for the search engine to begin its job.
Elements to display
Check the information you wish to display in ajax search results
Post Excerpt Chars Count
Set how many chars to show in the post excerpt.
Enable Post Sharing Buttons
Enable this to show social sharing icons on every post, select which ones to display, and the position inside the article.
Social Icons in Header
Enter your profile URLs for the desired social media, icons will display on the top toolbar. Leave empty not to show the icon.
Facebook Comment Moderation
If you set up a Facebook app, enter here your USER ID and APP ID in order to allow Facebook comments moderation.
Top Ad Code
Middle Ad Code
Bottom Ad Code
There are three fixed ads locations beside Ads widgets. Enter your ad code (e.g. Google AdSense) or image source into the desired text areas.
Hide on small devices?
For each location you have the choice to hide the advert on small screens, not to break the layout.
Show On:
For the Middle and Bottom locations, you also have the possibility to set the advert to display on all pages, only on the homepages or only on internal pages.
Set a Background color or Pattern
If you wish to have a solid color or a repeated pattern as your blog background, upload it here.
Full Page Background
If you wish to have fullscreen image as your blog background, upload it here. The image will be stretched to fit the entire screen, so please make sure you're uploading pretty big images here to avoid quality loss.
Make the Background an Ad
If you wish to have a clickable background, for advertising purposes for instance, enter the target link here. The whole background will automatically be clickable.
Header Background
The image uploaded here will be your header background or pattern. If you only select a color, it will override the skin color for the header.
Layout Style
A stylstic choice, choose whether to dislpay container borders and shadow or not.
On this tab you can select all the color background and text colors of your website. The options are pretty self-explanatory.
If you wish to change default theme fonts, this is the way to go. Headings are automatically sized, you can select the base font size for the body copy, all other sizes will change accordingly whenever possible.
To preview the available fonts check out the Google Webfonts resource.
Enable Header Buttons

Mailchimp newsletter
If you have a MailChimp account managing your newsletter, you can dedicate the hidden space to a newsletter subscription form. In order to do this you need to enable the Insert Newsletter Info checkbox. Fill in the Info Box with any additional information you might want to give to your users, then paste your target URL in the MailChimp URL field.

MailChimp URL Example:
http://yourdomain.us5.list-manage.com/subscribe/post?u=f05978bb168246549b07542d68&id=7acf9edf41
To find your MailChimp target URL, login to your MailChimp account, then navigate to Lists → For your Website → Sign up Form Embed Code. You will see something like this:

Insert Login / Register Box
Insert Custom Content
Sticky Navigation
Enable/disable sticky navigation upon scrolling
Remove WP Top Bar
Disables the default Wordpress top bar for all users except admins
Animate Content In
Enable content animations as they load and enter the viewport
Enable Ajax Comments
Ajaxifies native WP comments, that means they'll be posted and browsed without the need of a page refresh.
Enable Jackbox Lightbox
Disable this in case you are using some other solution to open images throughout the site and don't want the Jackbox plugin to handle images and galleries.

Enable the Home Tabs to display posts according to the desired criterias, you can display latest posts or base them on tags an categories. Empty tabs will be ignored.
If you know what your are doing, you can pass custom CSS rules or Javascript code in this area, and have them outputted in the head section of your pages.
It's always the best choice to override existing styles through this Tab (or through Child Themes), so you can safely update MightyMag without losing your customizations.
MightyMag comes with the awesome Premium Plugin from CodeCanyon Visual Composer for Wordpress specifically customized for the theme.
The plugin is pre-packaged in inc/tgm-plugin-activation/js_composer.zip
When you install MightyMag, you'll see several notices about recommended plugins, otherwise you can see and install them in Apperarance > Install Plugins
The following chapter is an extract of the official documentation of the parts you need to know in order to master its use. Also check out this very helpful video tutorial:
After installing and enabling Visual Composer plugin you can start creating your layouts. There's one concept/design pattern you should know.
In the Visual Composer editor mode you'll have two menu sections with content elements to place on the working canvas.
Popular Layout (Columns)
This is set of "empty" columns (grid) which you can place on your working canvas. After placing it to the working canvas you can drop-and-drop elements from "Content Elements" section to fill those columns with content blocks.
That way you can group elements in logical groups and then drag them around with your mouse (to re-position).
Content Elements
This is a list of available content elements that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.
List of avalaible content items:
After placing this content elements to the working canvas, click pencil icon to see options available for this particular shortcode.
- Can I insert 3rd party shortcodes?
Yes. In the WYSIWYG editor you can insert [shortcodes] as usual. Basic scenario: Insert Text Block from Content Elements section, click Edit button and in the editor, enter your shortcode or place it between existing text content.
- I have a layout that I built with Visual Composer and now I want to "clone" for the other page/post, how can I do that?
Great question! Starting from 3.0 version you can create a "Template" and then insert it on any other page. Here's how:
Another way. Switch to Classic mode and copy shortcodes that Visual Composer generated for you, create new page and paste them and switch to Visual Composer mode. You should see your layout copied.
- How can change background color for Tabs, Tours and Accordion elements?
To do that you will need to override default CSS rules. This is easy, open your theme style.css file (or another file wherr your css rules located) and place this snippet in it:
|
1
|
div.wpb_content_element .ui-tabs .ui-tabs-nav li, div.wpb_content_element .ui-accordion .ui-accordion-header, div.wpb_tabs .ui-tabs .ui-tabs-panel { background-color: #ff0000; } |
This will re-color background to red color, change hex value to your color.
- Can I add my own shortcodes sets?
In short - Yes. Please check advanced documentation file (this is something that should be done by php developer).
- I can't switch to Visual Composer, Erro messag: "Please switch default WordPress editor to ‘Visual’ mode first"
Please take a look at this video demo http://www.screenr.com/ash8 how to switch to "Visual" mode.
- There are no content in third tab/tour section or accordion, what should I do?
Please take a look at the video demo: http://www.screenr.com/v4x8
Make sure you are running latest WordPress version.
MightyMag comes with several built-in custom widgets. To setup a widgetized area, navigate to Appearance -> Widgets and use the WordPress drag and drop interface to drop widgets into the desired widgetized areas.
HP Category - Magazine HomePage Widget
This widget lets you place in the main content a widget containing the latest posts and reviews for a specific category (or all categories). You can set a group title, that represents the content you are displaying, and set the maximum number of posts to show.
Side Posts - Magazine, Sidebar
Displays posts filtered by Recent / Popular / Best Reviews. Great to show off posts in sidebars.
Ads Widget - Magazine, Sidebar, Footer, HomePage Right
The Ads widget lets you place Ads in your pages. You can display ads through an Ad code, such as Google AdSense, or upload and link an image yourself.
Advice: best results come with: 2x125px, or 1x300px banners. In this last case just leave the second banner block empty.
Best Reviews - Sidebar, Footer, HomePage Right
This widget will display the latest reviews. Just set a name, category, and maximum reviews to display at most.
Recent Posts - Sidebar, Footer, HomePage Right
This widget will display the latest posts. You only need to set the maximum posts to show at most.
Popular Posts - Sidebar, Footer, HomePage Right
This widget will display the most popular posts based on comments and views. You only need to set the maximum posts to show at most.
Twitter feeds - Sidebar, Footer, HomePage Right
This widget will show your latest tweets. Just enter a title, your Twitter ID, and the number of tweets to show.
Facebook Page - Sidebar, Footer, HomePage Right
This widget adds the official Facebook Like box in your sidebar. You only need to enter your Facebook page URL. (e.g. http://www.facebook.com/facebookuser)
Flickr - Sidebar, Footer, HomePage Right
This widget grabs the latest pics from a Flickr account. Enter the User ID of the desired account, if you don't know it just hit the Find it here link and follow the instructions. You also need to set how many pics you want to display.
Video Embed - Sidebar, Footer, HomePage Right
This widget lets you embed videos from YouTube, DailyMotion or Vimeo directly into your sidebar. Just enter the desired Video ID.
Example link: http://www.youtube.com/watch?v=UxpWpv3_pNc
Enter: UxpWpv3_pNc
MightyMag supports several plugins, that means that they will look nice and integrated right after installation without further hassles. Let's have a more in-depth look on how to get started with main supported plugins.
WooCommerce is the most popular WordPress eCommerce plugin. And best of all is that it's available for free!
Installation
Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t even need to leave your web browser. To do an automatic install of WooCommerce, log in to your WordPress dashboard and navigate to: Plugins > Add New.

In the search field type “WooCommerce” and click Search Plugins. You can install it by simply clicking Install Now. After clicking that link you will be asked if you’re sure you want to install the plugin. Click “yes” and WordPress will automatically complete the installation.

Once the plugin is installed, you'll be prompted with a message that will ask you if you want to install WooCommerce pages, go ahead and click on the install button.

Install WooCommerce demo content
The dummy data for WooCommerce is located in a file called dummy_data.xml which is located in the WooCommerce plugin directory. It's the same dummy data imported on MightyMag live demo.
Once WooCommerce is installed go to ‘wp-content/plugins/woocommerce’ and locate the dummy_data.xml file.


Click Submit and your dummy data will now be installed, and you now have a working copy of WooCommerce with the same data loaded as MightyMag live demo.
Products Image Sizes
This theme uses image sizes other than WooCommerce normal sizes. Go to WooCommerce > Settings > Products and change sizes to these:

For further detailed information on how WooCommerce works in-depth, regardless the theme used, please refer to the default WooCommerce documentation.
Installation
The process is the same as installing any other Wordpress plugin:
Basic Settings
Buddypress settings are accessible by moving to Settings > BuddyPress
Components

Each component has a unique purpose, and your community may not need each one.
Account Settings
Friend Connections
Private Messaging
Activity Streams
User Groups
Site Tracking
BuddyPress Pages
By default you shouldn't have to touch this when installing MightyMag, all pages should be assigned already. Depending on the components activated, make sure they have a corresponding page assigned to each in this panel.

Buddypress Settings

Account Deletion: Allow registered members to delete their own accounts (default: yes)
Profile Syncing: Enable BuddyPress to WordPress profile syncing (default: yes)
For further detailed information on how BuddyPress works in-depth, regardless the theme used, please refer to the default BuddyPress Codex.
bbPress is a forum software, that integrates nicely along with BuddyPress since it's made by the same development team.
Installation
bbPress Settings
To access bbPress settings, move to Settings > Forums

Here you have an assortment of settings for your forums, such as whether to allow anonymous posts, how long posters should be able to edit their posts, and how many topics to show per page.
The “Archive” and “Single Slugs” settings are important. These define the URLs of your forums, the posts, and the tags for posts. Choose something that fits your set-up; if you’re running an English-language website, then the default settings will probably do, but you can fine tune to your needs.
Remember to go to Settings > Permalinks after making any change to the slugs, and rebuild the permalink structure by clicking the “Save Changes” button on that page. If you ever have problems viewing the forums, give this a shot because it might be an issue with the permalinks, and rebuilding them might help. Also, make sure to press the “Save” button in Settings > Forums.
Managing bbPress Forums
Now it's time to create our forums so we can allow some action by our members.

This is easily done under “Forums” in the admin area. Just click “New Forum”, and you’ll get a familiar-looking screen to create a forum.

This is pretty self-explanatory. The one thing you’ll need to be careful with is the box in the top-right corner. These are the settings that enable you to control whether a forum is open or closed, whether it is a forum or a category (check out the screenshot above to learn the difference), and who should see it.
Here's the final result of the above forum tree:

For further detailed information on how bbPress works, regardless the theme used, please refer to the default bbPress documentation.
Thanks to:
Thank you for purchasing MightyMag. If you have any questions that are beyond the scope of this help file, please feel free to open a ticket on the dedicated support site and we'll be glad to help!
Thank you.
djwd