“Morph, by Bonfire” Plugin Documentation by “Bonfire Themes”


“Morph, by Bonfire”

Hi there and thank you for purchasing 'Morph'! This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get you started!


Table of Contents

  1. Installation
  2. Building your menu(s)
  3. Customization
  4. Custom activator
  5. Widgets
  6. Have a question?

A) Installation - top

Installing the plugin couldn't be simpler.

  1. In your WordPress installation, go to Plugins > Add New
  2. Click on Upload
  3. Use the form there to upload the morph-by-bonfire.zip file
  4. On the next screen, activate the plugin.

Once you've activated the plugin, you need to build and attach one or more menus to Morph. Read the next step for instructions on how to go about that.


B) Building your menu(s) - top

To attach a menu, you'll first need to build it through the standard WordPress menu editor:

  1. In your WordPress installation, head to Appearance > Menus, create a new menu, give it any title you'd like and populate it with menu items as you normally would
  2. Then, simply add your newly-created menu to either the "Morph plugin (primary)" or "Morph plugin (secondary)" locations.
  3. That's it!

To add some extra flavor to the main menu, you can also separate menu items with a border. To do so, add the "border" class to into a menu item's "CSS Classes" field. NOTE: If you're not seeing the "CSS Classes (optional)" textfield, enable it by clicking on "Screen Options" in the top-right corner of the screen, and ticking "CSS Classes".

Please note: The primary menu is a multi-level menu, while the secondary menu is single-level.

Adding icons:

As of version 1.1, you can add a wide variety of icons to your menu. To do so, you simply need to insert the icon code infront of the actual menu item's Navigation Label. The icon code is <i class="fa fa-iconname"></i>, where "fa-iconname" can be replaced with an icon name available on this cheat sheet here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

For example, let's say you want to link to your Twitter account. In that case, the full Navigation Label can be: <i class="fa fa-twitter"></i>Twitter
Or perhaps you'd like to link to page that lists your podcasts. In case, this would work: <i class="fa fa-microphone"></i>Podcasts
Or, as a final example, you wish to link to a gallery page: <i class="fa fa-camera-retro"></i>Image gallery


C) Customization - top

We've put quite a lot of effort into making sure that Morph can be customized to great extent. Whether you just wish to change a few colors here or there and change a few minor settings, or make it essentially unrecognizable from the default appearance, the goal was to give you easy-to-use tools that would allow you to extensively modify the plugin's appearance.

Modifications can be made under "Appearance > Customize > Morph Plugin". Each item here comes with an explanation to make sure everything is as straightforward as possible.


D) Custom Activator - top

If you'd like to use a custom element to activate the menu (a custom menu button, perhaps), you can do so by just giving the element the "morph-main-menu-activator" class. This can be added to a text link, menu button, image etc. You can also hide the default menu button on the plugin's settings page at "Appearance > Customize > Morph Plugin > Menu Button"


E) Widgets - top

To add widgets to the menu slide, head to Appearanc > Widgets and drag widgets into the "Morph Widgets" widget area.


F) Have a question? - top

Should you find something unclear about this documentation and have a question, then you can easily reach us through our CodeCanyon profile here (use the bottom-right contact form): http://codecanyon.net/user/BonfireThemes


 

Go To Table of Contents