Marroco | WordPress Magazine Theme - 20Script

# Marroco documentation v1.0

WordPress Magazine Theme, documentation by Bad Weather Themes.

# Overview

First of all, a big thanks for purchasing this theme. This document includes a guide and general information about the theme. Feel free to contact me if you have any questions that are beyond the scope of this document.

# System requirements

If you're planning to build a website using WordPress, you must first ensure your hosting provider meets WP's requirements.

### Database

- MySQL 5.0.15 or higher
- PostgreSQL 8.3 or higher
- SQLite 3.3.7 or higher

### PHP

- PHP 5.2.5 or higher (5.3 recommended)
- PHP5 GD library installed
- Disabled error_reporting flag on production server
- Enabled mod_rewrite in Apache for clean URLs
- Memory limit set up at least 64MB

# Installation Instructions

This theme requires the latest Wordpress version (3.5. +).
There are 2 different ways to upload the theme.

1. FTP: Unpack the Marroco.zip and upload the unpacked folder into the wp-content/themes/ folder
2. WordPress: Login into WordPress and go to Appearance > Add New Themes > Upload. Select the zipped theme file Marroco.zip and click Install Now.

### Enable theme

After copying theme into theme foldre you have to enable it. Please sign into WordPress administration and navigate into "Appearances -> Themes". Click on the "Activate" link.

### Enable theme plugins

This step is very important. After activating the theme, you will see a notice about installing plugins that the theme uses. Click on "Begin installing plugins", tick all of the plugins listed and then using the drop down underneath, select Install. Apply. Once they are all installed, click on "Return to Required Plugins installer" and tick all of the plugins once more, but this time, select "Activate" from the drop down and hit apply.

### Import demo content by theme

After activating the theme, you will be redirected to the "Theme Options" section of the page. At the top of the page you will see a green button "Import demo content". Click the button and wait until the import has finished. Done!

### Import demo content manually

1. How to Use the XML File to Import the Demo Site’s Content
2. Log into your site as an administrator.
3. Make sure you activated your new theme before proceeding.
4. Go to Tools > Import
5. Choose “WordPress” from the list.
6. Upload the demo content .xml using the form provided on that page.
7. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
8. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.
9. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus are imported. You will need assi
gn the menu a theme location & you’ll need to configure widgets. This is a limitation of WordPress’ import system.
10. Enjoy!

NOTE: The demo xml file is located in the "export" folter.

### Regenerate theme thumbnails

If you are installing Marroco on a website that already has images uploaded, please follow these important steps once Marroco is activated:

After logging into your admin Wordpress account:

1. Go to Plugins -> Add New and install a free plugin called "Force Regenerate Thumbnails"
2. After Installing and activating it, go to Tools -> Force Regenerate Thumbnails
3. Click on "Regenerate All Thumbnails" and wait until it is finished

This fixes all your existing images to work with Marroco. Any images uploaded after Marroco is active will have the appropriate thumbnails created automatically.

# Adding a logo and fav icon

After logging into your admin area:

1. Go to "Appearance > Theme Options > General"
2. Click the button in the section logo / favicon
3. Click "Select Files" and open the image you want to use.
4. Click "Send to OptionTree".
5. Save the changes.

# Homepage builder

Marroco cames with custom drag & drop page builder that does not use shortcodes or need any type of code to be inputted and allows you to quickly create or change complicated homepage layouts within a few clicks.

To build a unique homepage using the "Marroco Homepage Drag & Drop Builder":

1. Create a new page with suitable name.
2. In the "Page Attributes" box, set the template to "Custom Page Builder"
3. A new section will appear at the content of the page named "Blocks"
4. Click the button "Add Row" and choose one of the elements in the box.
5. Once your have added the modules you need, publish/update the page.
6. Go To "Settings > Reading".
7. In the "Front Page Displays" choose the "A static page (select below)" option and in the "Front Page" setting choose the homepage page you created earlier.

Drag & drop page builder elements:

1. Billboard slider - Main slider with autoplay options
2. Billboard posts - Posts in a grid layout
3. Posts grid - Masonry grid or list of posts
4. Heading title - Simple page title
5. Html editor - Html editor allowing you to add any images, html, text, embed code, etc ..
6. Papa grid - Posts grid with first main post
7. Latest articles - Masonry / List of posts with the option to add a sidebar.

# Megamenu

Marroco cames with very simple megamenu. How to use:

1. Go to "Appearance > Menus"
2. Setup the menu as normal ( Guide: http://codex.wordpress.org/WordPress_Menu_User_Guide )
3. Each category and format parent menu entry has an option called "Megamenu Layout" where you can select the type of megamenu:

There are two types of megamenu layout. The first one is "Latest posts" that shows the latest posts from the current category or post format. The second layout is "Slider + Latest posts". This layout displays the latest posts from the current category / post format and slider that shows only the posts with marked option "Enable category slider". You can find this option when creating/editing a post.

If you add a sub menus items to the current megamenu, it will appear as a menu at the left part, removing one article from the layout. This is an example structure of the menu:

And the output of this will be:

# Theme styling

To set the base global style for the entire website, including background images/colors and color for menu hovers, review colors, etc. You can change them in the theme options. These options are applied to the entire website, however, if a category has its own global color and/or background options, then they will override whatever is set in the global style options.

1. Go to "Appearance > Theme Options > Style"
2. Set "main color" and/or "background color / image"

If you want to override the main color / background for some of your categories:

1. Go to "Posts > Categories" and open the category you want to style
2. At the bottom you will see all the available styling options for particular category.
3. You can change the Main/Background color, add background image, container shadow, or even change the post layout ( grid or list ):

# Typography

Marroco can use any of the several hundreds of Google fonts available. You can select one font for the body text (often a clean, light font) and another font for everything else (menu font, titles, etc).
How to change the current theme font:

1. Go to "Appearance > Theme Options > Fonts".
2. Choose the font you want for body and headings. ( After selecting the font, a demo text will appear bellow the dropdown menu to show you how it looks like ).
3. After you have the font, save the changes.

# Post settings

### Review system

To add a review system to a particular post:

1. Add/Edit a post with a suitable name.
2. In the section "Post review", mark the checkbox "Enable post review".
3. In the section "Post review", mark the checkbox "Enable post review" and the criteria system will appear.
4. Insert "Label" and "Score" ( from 1 to 10 ).
5. If you want to add another criteria, just click the button "Add new criteria".
6. Also add some short note for the score in "Score note".
7. Update/Publish

### Parallax header

To enable the post parallax as header:

1. Add/Edit a post with a suitable name.
2. In the section "Post parallax header", mark the checkbox "Enable parallax header".
3. Click the button "Add image"
4. Select the image you want to use. ( Recommended image size: 1920 x 600 )
5. Update/Publish

### Image source

To enable image source:

1. Add/Edit a post with a suitable name.
2. In the section "Image source", mark the checkbox "Enable image source".
3. Enter your label and external url ( optional ).
4. Update/Publish
5. Important: Image source is visible only for image post formats with active featured image.

### Additional post settings

When adding a new post/article at the right part you will see additional settings for post layout and placement:

1. Featured post - If market, this post will appear in all the drag & drop modules, filtered by featured posts.
2. Enable category slider - This options will add your article to the slider at the megamenu and category archive page.
3. Full width featured image / video - will display your image / embed code in full width, without removing the sidebar.
4. Page layout - Enable / Disable the right sidebar of the post

### Video post type

To create a video article:

1. Add or edit post with suitable name.
2. In the "Format" box, select "Video"
3. Additional settings box will appear named "Embed code".
4. Paste your embed code into the textarea "Embed code".
5. Update/Publish

### Gallery post type

To create a gallery article:

1. Add or edit post with suitable name.
2. In the "Format" box, select "Gallery"
3. Additional settings box will appear named "Slider gallery".
4. Click the big camera icon.
5. Click "Add to gallery".
6. Upload new images and choose from library.
7. Click "Add to gallery".
8. Update/Publish

### Post comments

You can deactivate / activate or choose between Wordpress default comment system and Facebook comments, by going to "Appearance > Theme Options > Article > Comment type".

Additional post settings could be found in "Appearance > Theme Options > Article":

# Header

This theme is very flexible and easy to customize. Very important part of the page layout is the header. Marroco allows you to change the layout of the header by going to "Appearance > Theme Options > Header":

Some header variations:

# Contact page

To have a contact page like the one seen on the Marroco demo:

1. Go to Plugins > Add New
2. Search for "Contact Form 7" and install it
3. After activating the plugin, there will be a new option in your Wordpress bankend. Go to Contact
4. There will be a default contact form created, simply copy the code of it under "Shortcode" (should be similar to: [contact-form-7 id="2841" title="Contact form 1"])
5. Add/Edit a page with a suitable name
6. Paste the shortcode code of the contact form
7. Publish/Update the page

# SEO

Marroco does not force a website to have a specific format to show the title at the top of the browser, this is to provide the freedom to set them up as you wish. It is recommended to install a free SEO plugin such as: All-In-One Seo or SEO by Yoast. Both these plugins will allow you to set the titles as you wish to show them and at the same time improve your SEO.

# Shortcodes

You can use the shortcodes provided with this theme when creating a post or page:

1. Diferent table elements ..
2. Titles
3. Dropcaps
4. Bar Graphs
5. Toggles
6. Dividers
7. Buttons

# Translation

Marroco comes with everything setup to easily translate it into any language. To translate into a different language:

1. Go to the theme translation folder, which is located in "marroco/lang/"
2. Make a copy of the file 'default.pot' and rename the file to the locale of your language, example: Spanish would be 'es_ES.po'
3. Open Poedit (can be downloaded for free from http://www.poedit.net/) and open the file you have created in it
4. Translate all the strings and save your changes. After you save, you will have two files, exaple: Spanish would have 'es_ES.po' and 'es_ES.mo'
5. Upload these files to "marroco/lang/"
6. Make sure your WordPress config file (located in the root of your website "yoursite/wp-config.php") has the following line set to your locale: "define ('WPLANG', 'es_ES');"

# Theme updates

### Recommended theme update method:

When Marroco is activated it recommends several plugins. One of them is called "Envato Wordpress Toolkit" which when enabled and setup, will automatically alert you on your Dashboard when a new version of the theme is available and allows you to install it with only a few clicks. If you did not install the plugin when you first installed Marroco, and wish to install it now, please follow these steps:

1. Go to "Appearance > Install Plugins"
2. Hover over "Envato Wordpress Toolkit" and click on "install plugin"
3. Go to "Plugins > Installed Plugins" and activate "Envato Wordpress Toolkit"
4. A very good tutorial on how to use this plugin can be found at: http://wpmu.org/envato-wordpress-toolkit-a-themeforest-auto-updater/

All your settings should remain intact after updating the theme (menu settings, theme option settings, etc).

### Alternative theme update method:

You can also update the theme manually by going to Themeforest.net, logging into your account and downloading the latest Marroco version. For users who are not using a Child Theme:

1. Deactivate your current Marroco version in the Theme section (This can be done by activating any other theme)
2. Delete the Old Marroco theme from your website
3. Upload the new version of Marroco as normal and activate it

For users who are using a Child Theme:

1. Delete the Old Parent Marroco theme from your website
2. Upload the new Parent version of Marroco as normal and activate it