“MAZINE” Documentation v1.0


“MAZINE”

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Uploading and installing the theme
  2. Installing, configuring and using plugins
    1. NextGen gallery
    2. Recent posts Dated
    3. Wordpress Newsletter
    4. Social Widget
    5. Contact Form 7
    6. Wordpress E-Commerce
  3. Managing menus
  4. Creating Sliders
  5. Changing color scheme
  6. Google analytics
  7. Building pages
    1. Building Home Page
    2. Building Store Page
    3. Building Portfolio Page
    4. Building Contacts Page
  8. PSD Files
  9. Sources and Credits

A) Uploading and installing the theme - top

The theme is compatible with Wordpress 3.x, to use it you must have Wordpress 3.x

Important: Make sure you unzip the downloaded file from ThemeForest first (DON'T upload it to your server yet). The content of this file contains the actual theme and plugins.

After unzipping the downloaded theme file you should see 3 items: Plugins Folder, where all plugins used in theme are stored, Documentation Folder, where the current document is stored and the Theme Folder, where wordpress(mazine.zip) theme is stored.

To install the wordpress theme first upload the mazine.zip file to your server, then copy the zip file to path_to_your_wordpress/wp-content/themes, unzip it there. Next you have to go to your wordpress admin (your_wordpress_url/wp-admin), log in as an Administrator, go to "Appearance" -> "Themes", if everything went right you should be able to see your newly installed MAZINE theme among other wordrpess themes. Next you can go and click "activate" under MAZINE theme's thumbnail.

Activate Mazine

B) Installing, configuring and using plugins - top

It is advised to install all supplied plugins for the theme to be complete, as it is on our live demo.
You can find plugins in the "Plugins" folder upload them to your server, copy plugins to path_to_your_wordpress/wp-content/plugins, unzip all of them (or one you selected). Now go to your wordrepss admin(your_wordpress_url/wp-admin), log in as an Administrator, go to "Plugins". At this point you should see something like this: Activate Plugins

1) NextGen gallery - top

If you have installed and activated NextGen gallery plugin and everything went ok, then you should be able to see a new wordpress admin menu Item called "Gallery". The NextGen gallery gives you total control over images that you can use on your wordpress sites it also empowers "mazine" theme's extensions like sliders, and gallery. NextGen Gallery

Now, when you have installed and activated NextGen Gallery plugin lets see what can you do with "Mazine" theme and NextGen gallery combined:

Important: The "wp-content" folder of your wordpress should be writable in order to let NextGen gallery plugin add and manage galleries that you create!
First, lets create a gallery page! To do that go to "Gallery"->"Add Gallery / Images". When page opens you will be asked to name the gallery you are about to create. Fill in "New Gallery" field with a desired name and hit "Add Gallery" button. Next screen you see is where you can upload images for your gallery. You can upload multiple at once. Pick images that you would like to see on your site. Click "browse" button and select all of the images you picked, once it's done you will see them in an "upload list" that shows what images you are about to upload. It should look similar to this: NextGen gallery upload list
Underneath the list there is a drop down with galleries that you have, as you have made only one so far, there will be only one item in the list with the gallery name that you entered in the previous step. Pick it and hit "upload images". You will see uploading progress bar.
When the uploading process is done go to "Manage Gallery" submenu item. The resulting page will show you the contents of the gallery that you have created and all images that belong to that gallery. Take a look and the images list. It allows you to edit Image titles, add description and tags. Lets go through all of these images we added and give them names and small descriptions as well as categorize our images with tags, you can (and should) add multiple tags to one image, separated with commas. Tags will work as filters once the gallery page is ready!.
The result should look similar to this: Ready Gallery Images
...
Now lets resize thumbnails of our images. To do that select all of the gallery's images and select "Create new thumbnails" from "bulk actions" drop down that one can locate above the images list. After selecting click "apply", the result of that action will be a window prompting you to set thumbnail's size. Set width to 214 and height to 165. Click OK. Thats it, you have new thumbnails for your gallery. Make sure "Set fix dimension" check box is checked!
The next thing to do is to actually show our gallery on the site.
Go to "Pages" of your wordpress admin menu. Hit "add new" button to create a new page. Name it whatever you want, gallery for instance. Switch to HTML editing mode. And add the following "shortcode"

[gallery id=x]
, where "x" is the gallery id. Now, the Mazine theme has some pre defined page templates, those page template allow you to build different pages with different types of layout. For the gallery (portfolio) page it is suggested to use "Blank Page - 1 Col" template, select it from the drop down in the "page attribute" section. Now hit "Publish" button. Go to "Appearance" -> "Menus" and add Gallery page (the page that you have created) to the "Main Menu".
Go to your site front, open the gallery page, the result should look similar to this: Gallery page Now if your click on filter buttons at the top of the page, you will get real time filtering.
If you wish to resize thumbnails for images in a gallery go to the gallery you would like to change thumbnails for by going to "Manage Gallery" section of the "Gallery" menu
Change Gallery
Once you click "Manage Galleries" you will see the list of the galleries you have in NextGen.
List of Galeries
Select the gallery you wish to resize thumbnails for from the list by clicking the gallery. Once the page opens you will see the gallery's settings. Under the "Gallery settings" section you will see the list of all images gallery contains
The Gallery
Now, select either all images or the images which thumbs you want to resize by checking checkbox field under the id column and select create new thumbnails from the "bulk actions" dropdown list it should look something like this:
Bulk Actions
Now, press Apply button, once you press it you will see "Create new thumbnails" window
Resize Dialog
Set "Width" and "Height" field's values to whatever you want, you can also "Set fix dimension", then click "Ok".
This will resize thumbnails of your galleries images.

The NextGen gallery is a powerfull tool for managing images please check following tutorials on how to use it
Make sure you understand everything in this section as you will use NextGen Gallery to control and set 3 more Sliders!


3) Recent Posts Dated - top

Once the plugin is activated you will be able to find "Recent Posts Dated" widget under "Appearence"->"Widgets" menu. It is better to have this widget located in Footer's sidebar, just drag and drop it there. The widget is just like the wordpess's original one but adds date to each post title.

4) Wysija Newsletter - top

Once the plugin is activated there will appear a new admin menu item "Newsletter" under "Setings". The plugin allows you to send newsletters to your visitors who sing up for newsletter. Detailed information on how to work with plugin can be found here: http://wordpress.org/extend/plugins/wysija-newsletters/
To show the "Ajaxy newsletter sign up" form go to "Appearance" -> "Widgets", find "Newsletter" widget and drag and drop it to "Footer" sidebar. Once you drop it, you will be prompt to give this widget a title fill in the title with some kind of "call to action" text and click save

5) Share and Follow - top

Once the plugin is activated you will be able to find "Share and Follow" menu item under "Settings", The plugin lets you configure and show your social profiles icons on the site. More detailed information on the plugin can be found here: Share and Follow Plugin. To show your social profiles in the Footer sidebar go to "Appearance" -> "Widgets" find "Share widget" and drag and drop it to the Footer sidebar. Upon dropping the widget you will be prompt to enter widget's title and tweak some settings. Best practice for Mazine theme is to have size of 32x32 px, style set to icon only, and direction set to row. Once that is done select your social icons and hit save.

6) Contact Form 7 - top

After activating the plugin you should be able to see a new menu item "Contact"
Contact Form 7
The plugin allows you to create contact forms, easily add/remove fields of forms and place forms on any page using shortcodes. Detailed information on the plugin can be found here
We will use the plugin while building contacts page

6) Wordpress E-Commerce - top

When you activate the E-Commerce plugin, the "Products" menu item appears in your wordpress site's admin panel.
E-Commerce
This plugins turns your wordpress site into an e-commerce platform. It is known to be the best e-commerce plugin for wordpress. Detailed documentation on how to use the plugin can be found here. It is important to go through quick start guides to begin using the plugin.
It is recommended to set following "presentation" options to following values:

Show Product Ratings:
to NO, but you can leave it as is it will be displayed correctly
Display Fancy Purchase Notifications:
to YES
Show breadcrumbs:
to YES
Default Product Thumbnail Size:
height to 151 width to 173
Default Product Group Thumbnail Size:
height to 151 width to 173
Default Product Group Thumbnail Size:
height to 302 width to 341
Use Pagination:
to Yes number of products to show per page 6
Page Number position:
to Bottom
Hit "Update" button. Now, you can go to "Store" -> "Categories" and add some categories and brands. Make sure you submit categories and brands with their images and descriptions!.
After you add categories and brands add some products. Make some products with discounted price, you will use them in "Special Products" widget.
The next what you have to do is to assign specific e-commerce pages to special page templates that Mazine theme contains. To do that go to your wordpress admin, open "Pages" menu, you will find 4 new pages there that you didn't add, whose pages were created by e-commerce plugin. Open each of those 4 pages and assign theme page templates by following order:
Checkout page
Template - Store Page Checkout
Transaction Results
Template - Store Page Account
Your Account
Template - Store Page Account
*Remember to click update after each page modification. The last thing to do is to enable Mazine Shopping cart widget, that was specially designed to fit in header "rollout" sidebar. Go to "Appearance" -> "Widgets", find "Shopping Cart" widget and drag and drop it to "Header Cart" sidebar, leave title empty and hit "Save" button. When you reload the home page the "Shopping cart" should look similar to this: Header Cart
Mazine theme extends wp-e-commerce plugin with some useful widgets like "Special Products" widget and "Category Slider" widget. You can find out how to use them in building home page section of this guide.
Please use following links to learn how to use wp-e-commerce plugin, it is important for you to know how to use it to be able to successfully use Mazine wordpress theme


C) Creating Sliders - top

Mazine theme comes with 3 Sliders:

Let's go through simple steps of creating each of these sliders and showing them on the site.

Creating Flashmo or Coin Slider
Using "Flashmo" or "Coin" slider requires NextGen Gallery plugin installed (the plugin can be found in "plugins" folder of the theme package), you can read about setting the plugin up here
Step one: Create a new gallery. To do that go to "Gallery" menu of your wordpress admin. Upon clicking on "Gallery" menu item you should be able to see "Gallery" submenu. Go to "Add Gallery / Images"
Add Gallery
Once you click "Add Gallery / Images", you should see a page that lets you create new gallery and images to it, right way after the page is opened go to "Add new gallery" tab
Add New Images
Once the "Add new gallery" tab is opened you will be able to name the gallery you are about to create. Fill in the Gallery name and click "Add gallery" button like it is shown below
Gallery
After you hit "Add new gallery" button you should see a message similar to this:
Message
Notice the gallery ID, we will use it later when showing the slider on front end of your wordpress site.
Next what we have to do is upload images for the slider. To do that click "Browser" button, this action will open a widows that allows you to select images from your computer. You can select and upload multiple images at once. Once you select images click "Open", this action will add images you have selected to the upload list. After that select the gallery you want to upload images to. In our case select the gallery we just added. Next, click "Upload Images" button.
Added Images
After you hit "Upload Images" you will see uploading progress, once uploading is done go to "Manage Gallery" submenu
Manage Gallery
Click on Gallery's Name of the gallery that you have created and uploaded images to. The galleries list should look something similar to this:
Gallery Name
Once you click, the gallery page will be opened with the list of images you have uploaded. You can optionally add some descriptions and appropriate names to each image in the list. The Images list should look similar to this:
List of images

Step two: Show Flashmo or Coin slider in front end of your wordpress site. To do that you have two options, the first one is to use shortcode [flashmo_slider id="X"] if you want to use "Flashmo" slider or [coin_slider id="X"], where X is the gallery ID that you have created in previous step. In case you don't know the ID of the gallery you want to use, you can always find it out by going to "Gallery" -> "Manage Gallery" menu of your wordpress admin panel and looking for ID value of the Gallery you created, see image below
Find ID
So once you create a gallery with images you want to use for the slider and you know it's ID all you have to do is to place [flashmo_slider id="X"] (if you want to use Flashmo slider) or [coin_slider id="X"] (if you want to use Coin slider), in the content of either page or post, where X is the gallery ID.
The second option is to use "Sliders widget". To use it go to "Appearance" -> "Widgets" of your wordpress admin panel. Find "Slider Widget" and drag and drop it to "Sliders" sidebar. Upon dropping you will be able to set up widget's settings. It will look like this:
Slider Widget
All you have to do now is to set the "Gallery ID" field with the ID of the gallery you created and select Flashmo slider or Coin slider from "Which slider" list. Click save afterwords. That's it, if you have used shortcode you will see the slider on the page or post you have created for it and if you have used widget you will see it on the home page of your wordpress site.


D) Changing color scheme - top

Mazine theme comes with 5 additional color schemes:

To switch between color schemes go to "Appearance" -> "Mazine settings", open "Color Schemes" tab and select the color scheme you want. Hit save, reload the site.


E) Google analytics - top

In order to use "Google analytics" you have to setup your analytics snipet. To do that go to "Appearance" -> "Mazine settings" and enter your analytics ID under Google analytics tab. Hit save.

In order to set up two separate menus in header you have to go to “Appearance” – > “Menus” and add two menus, Main Menu and Secondary Header Menu. After Menus are created add items to each menu, The Secondary Header Menu is the one between logo and shopping cart, so it should contain 3 – 4 items. The Main Menu is the sites main menu that is located under the logo, add items there also. Save both menus. After that turn to “Theme Location” box and assign Main Menu to Header Menu location and Secondary Header Menu to Secondary Header Menu Location.


G) Building Pages - top

Mazine theme provides you with very flexible way to build custom pages. First of all there are 7 page templates that you can use depending on the layout you wish to have.
Page templates are:

1 Col
The template with 1 column 940px long, can be used to build any custom pages.
2 Cols Right
The template with 2 columns, content column and sidebar column on the right side, can be used to build and custom page.
2 Cols Right
The template with 2 columns, content column and sidebar column on the right side, can be used to build and custom page.
2 Cols Right (for containers)
The template with 2 columns, content column (but with out "chrome" around content column) and sidebar column on the right side, can be used to build and custom page.
2 Cols Right with content container
The template with 2 columns, can be used to build simple pages with out additional containers in the content column
2 Cols Right with wide sidebar
The template with 2 columns and wide side bar, can be used in case you need wider sidebar container
Contacts Page
The template with 2 columns and wide side bar column, the template has "Contacts page" side bar, can be used if you wish to use specific sidebar widgets on a certain page.
Home Page
1 column page template, but with number of dynamic sidebar containers. More on how to build a home page can be found here
On each of those pages you can use theme specific shortcodes, the shortcodes are:
					[wrapper width="x"]your_content_here[/wrapper]
				
where x is the number of columns, can be from 1 to 12, as MAZINE theme is based on 12 columns 960 grid system.
					[container width="x" chrome="fance/box"]your_content_here[/container]
				
where x is the number of columns and chrome is the type of container that you can use. The "box" container looks like this
Box Container
Fance container looks like this:
Fance Container These containers can be of any width up to 940px (or 12 columns)

1)Building Home Page - top

Once you have set up and activated all plugins you are ready to build the home page. First open "Appearance" -> "Widgets" and move "Sliders" widget to "Sliders" sidebar, once you drop the widget to the sidebar set Slider to, lets say, Flashmo slider and gallery id to the id of the gallery you have created with NextGen gallery. Hit "Save".
Next what you can do is to show gallery of the e-commerce plugin in a slider. To do that go to "Appearence" -> "Widgets" and Drag and Drop "Categories Slider" to "Categories" sidebar. Hit "Save". When you reload your home page you should be able to see the slider.Use small categories icons of the same size!
Now, go to Pages and add a new page, you can entitle it - Home Page, add content that you wish to display on home page, save the page. Now go to Settings -> Reading and set the Home page to Static page, form the drop down list chose "Home Page", also select one of the empty pages to display blog posts.
Hit save!
The rest of configuration is optional and is up to you how sidebars and widgets are used
Following instruction will guide you through the process of making your home page look like on Mazine theme live demo. You can use Nextgen Mazine widget to show images from any of your NextGen galleries. Just drop it to "Home Sidebar" and configure it like you want.

2) Building Store Page - top

While setting up wp-e-commerce plugin you have done almost all work for creating "Store page". All that's left to do is to add e-commerce specific widgets and optionally add a banner at the top of the store page.
To add e-commerce specific widgets go to "Appearance" -> "Widgets" and drop e-commerce specific widgets to "Store page sidebar".
E-Commerce specific widgets are:

To add a banner at the top of the product page you can use "Banner Holder" sidebar, you can simply drop a text widget to "Banner holder" sidebar with banner's html.

3) Building Portfolio/Gallery Page - top

Building Gallery page has be fully covered in Using Nextge gallery plugin section.

4) Building Contacts Page - top

To build contacts page you have to be familiar with Contact Form 7 section.
First, open "Contact" menu section. Once the page is opened you should be able to see default contact form settings, something like this:

Your Name (required)
[text* your-name]

Your Email (required)
[email* your-email]

Subject
[text your-subject]

Your Message
[textarea your-message]

[submit "Send"]

, lets tweak it a little bit, change labels, add some additional fields, and change
[submit "Send"]
to
[submit_chrome "Send"]
, the last action will make submit button on our contact form look like any other button on the site. Save the form. Now, if you look above form editor you will find the the shortcode that you need to place into your "Contacts" page. Copy the short code. Now create a page and name it "Contacts" (you can give any name you want). Assign "Contacts Page" template to it. Switch editing mode to "HTML" and paste the shortcode that you have copied. Save the page. To complete the page lets add "Address with Google maps" widget to Contacts sidebar, but before that you have to go to "Appearance" -> "Mazine settings" and set your address, phone, fax and email under "Contacts Page" tab.
Once you're done click "save".
We have made "Address with Google maps" in such a way that all you have to do is to submit your address, the widget will then ask Google maps API for coordinates of your address and show it on the map for you. You do not need to find our your longitude and latitude.


H) PSD Files - top

There are 6 Photoshop sources included with the theme:

  1. Home page
  2. Blog page
  3. Blog page detailed
  4. Store page
  5. Gallery page
  6. Contacts page

I) Sources and Credits - top

All of images that were used either our own or distributed and creative commons licence.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Mark

Go To Table of Contents