20script - All For WebMasters...

WARNING: This documentation might be outdated. Click Here to view the latest documentation.
Need more help or guidance? Register and use our Support Forums. For registered users: F.A.Q.·Known Issues x

# Welcome to Motive!

### Thanks for Buying

First of all, thank you for buying this theme. To make your experience pleasant, we've added as much info as needed in this documentation. If you're stuck with anything, please refer to support forums.

- Created By: ThemeSphere
- Support Site: ThemeSphere Forums
- Twitter Updates: @Theme_Sphere
- Version: 1.0.0

# GFXFree.net - Download Unique Web Templates And Scripts

There are two methods to install the theme. If the normal installation method (a) is not supported by your web host, you will have to use the alternate option (b).

### a. Normal Installation

1. Login to WordPress Admin and browse to Appearance > Themes.
2. Click on the Add New Theme (or "Install Themes" tab for older versions) and click Upload.
3. Browse your computer to select "motive.zip" (it's in the zip file you downloaded from ThemeForest). Click "Install Now" button.
4. Once it's uploaded, click the Activate link.

### b. FTP Installation (alternate method)

1. Use your FTP software to browse to wp-content/themes folder.
2. Extract motive.zip and upload the motive folder.
3. Once it's uploaded, go to your WordPress Admin, browse to Appearance > Themes.
4. Click the Activate link.

Important After activation, you will be presented with several plugins that you have to activate. Do not forget to activate them all or not all of the theme features will be available.

Note If you have existing content and featured images, you will have to install Regenerate Thumbnails plugin and run it from Tools > Regen. Thumbnails.

### Sample Content Import (optional)

We highly recommend against using this method in production. Please only use on a an extra copy for testing or experimenting. This method most likely will fail on shared web hosts. Uncheck "import attachments" option if it fails and try again.

Warning Please do not import content on a WordPress installation that already has a lot of content. Or the very least, make a backup first. A catastrophic mess can be created.

Using the new method, you can get sample content that's pretty close to the demo site. It will generate random images that are under public domain license (creative commons zero).

1. Enable all Bunyad plugins as recommended by the Theme.
2. Optional: Install WooCommerce and bbPress if you wish to use them.
3. Optional: Delete all your existing widgets from Appearance > Widgets from the "Main Sidebar".
4. Go to Theme Settings > Sample Import and click Import Sample Data. You might have to wait up to 5 minutes!
5. That's it.

Tip If it fails, you will have to request your webhost to increase your PHP max_execution_time (or any other webserver timeout to at least 300 secs) and memory_limit (to at least 196M) temporarily.

### Changing The Skin

Motive comes with 3 skins, Creative Magazine, News, and Classic Magazine. You can see these all in our demo. By default, News skin is active. To change the skin:

- Go to Appearance > Theme Settings > Skin & Color.
- Next to Pre-defined Skin, select your desired Skin. Click Ok on confirmation popup.
- Save Settings.

Colors & Typography You can change fonts and colors even after changing the skin. While their shown values may be the default skin values, they can still be changed.

Creative Skin Color If you want the color used in our demo, you can set the color to `#c32700` under General > Theme Color in Skin & Color settings.

# Homepage Setup

There are many different widgets/blocks that can be used to construct your homepage (or any page). To learn more about creating pages, please refer to Creating Pages section of the docs.

### Creating Your Homepage

The easiest way to get started is to use the pre-made templates in the Page Builder and then modify their settings.

- Go to Pages > Add New and click Backend Editor button.
- Now you should see the screen in the image below. Click on one of the Homepage templates to get started. Motive Default Home is a good start.

#### 1. Edit Your Page

Once the layout is loaded, you should see this:

- Hover over blocks and click the pencil icon to edit block settings. Set options like Main Category and others as necessary.
- You can add more rows and elements by clicking the + button.
- Learn more about the Page Builder (Visual Composer) with Videos.
- Finally, configure the Page Options to set Show Page Title? to No. (shown in image below)

#### 2. Enable A Slider

- While editing your homepage, in the Page Options (as shown in image above), select a slider next to Show Featured Slider?
- Sliders can be seen in the demo. Choose of the options.

  - Featured Posts Grid
  - Full-width Classic Slider
  - Split Slider
- Once you have selected a slider, you will be presented with more options. Next to Featured Slider Type, you have two options:

  - Use Posts Marked as "Featured Slider Post?": This option uses posts you manually marked as "Featured Slider Post?" (read Add Posts to Slider).
  - Use Latest Posts from Whole Site: This option will use your most recent posts.
- (Optional) You may limit the posts to a specific tag or if you're an advanced user, limit them to specific post ids (use latest posts option above).

#### 3. Select the Page Template

You have to select the correct page template for your page builder pages. It should be set to "Homepage & Blocks (Advanced)" template.

#### 4. All Done. Save Your Page.

Publish and save your page. Next, set it as your homepage as explained below.

### Setting Up Homepage

Once you have created a page that you would like to use as your homepage, follow these steps:

1. Go to Settings > Reading.
2. Choose "A static page" option for Front page displays.
3. Next to Front Page, select the page you created to be used as the homepage.
4. Save Changes.

### Pagebuilder Blocks For Homepage

While you can use any element from the page builder, we recommend using our Homepage Blocks for best results.

# Header Setup

### Custom Logo

By default, your site title will be used as a text-based logo. However, you can also use an image-based logo.

#### Multi-colored Text-based Logo

1. Go to Appearance > Theme Settings.
2. Under Logo Text, if you want the "Mag" part of Motive to use the theme's main color, input as follows: `[main-color text="M"/]otive`
3. Save Changes.

#### Using an Image-based Logo

To be retina friendly (look high quality on devices like iPad), you will have to create two images of your logo. One the normal size and the second exactly double the height and width.

1. Go to Appearances > Theme Settings.
2. Under Logo Image, click Upload button.
3. Upload your second logo (2x size) under Logo Image Retina (2x).
4. Click Save Settings.

### Top Bar

Top bar is the area above the header. It's enabled by default and has a News Ticker showing latest posts to the left, a widget area and a search box to the right. The widget area is useful for adding social icons.

#### Disabling Top Bar

1. Go to Appearance > Theme Settings.
2. Under Disable Top Bar, click the button.
3. Save Changes.

#### Adding Social Icons

You will use the social shortcode in a widget to add your social icons.

1. Go to Appearance > Widgets. Click on Top Bar (Above Header) to expand the box.
2. Drag and drop a Text widget from left into the box that was expanded in the step above.

3. Do not enter a title. Modify and enter this shortcode:

       [social]
       	[social_icon link="/?feed=rss2" title="RSS" type="rss" /]
       	[social_icon link="http://facebook.com/username" title="Facebook" type="facebook" /]
       	[social_icon link="http://twitter.com/username" title="Twitter" type="twitter" /]
       	[social_icon link="link to your google+ profile" title="Google+" type="google-plus" /]
       	[social_icon link="link to your linkedin profile" title="LinkedIn" type="linkedin" /]
       [/social]

4. Save.

Check Social Icons Shortcode section for more icons.

### Adding Advertisement

Motive has an ad spot at the right side of the header. To use it, simply create an advertisement widget in the Header Right widget area.

1. Go to Appearance > Widgets. Click on Header Right to expand the box.
2. Drag and drop an Advertisement widget from left into the box that was expanded in the step above.
3. Paste your advertisement code and Save.

# Setup Navigation & Menus

If you have imported demo content, follow (a) else follow (b) to create a new menu.

#### (a) Existing Menu

1. Go to to Appearance > Menus.
2. In the "Manage Locations" area, under Main Navigation, select Main Menu. Click Save.

#### (b) Creating a New Menu

1. Go to to Appearance > Menus.
2. Click on the + button or the create a new menu link. Enter a menu name and click Create Menu.
3. Using the Custom Links and Pages boxes at the left, add items to the menu and drag/drop to arrange them.
4. (optional) If you would like to use this menu in navigation, in the "Manage Locations" area, under Main Navigation, select your newly created menu. Click Save.
5. Click Save Menu and that is all.

### Mega Menus

There are two types of mega menus that Motive is equipped with.

#### Links Mega Menu

The first one is used to create an organized multi-column list of links. We call it the "Links Mega Menu".

#### Category Mega Menu

The category mega menu is a 2 column mega menu that shows sub-categories in first column and recent posts in the second.

#### Category Mega Menu — with featured & recent posts

The category mega menu with featured and recent posts is a 3 column mega menu that shows sub-categories in first column, the latest featured post in the second, and 2 recent posts in third.

### Add Mega Menu

To add mega menu to your menu item:

1. Go to to Appearance > Menus and select your menu.
2. Expand the item you wish to add mega menu to by clicking the arrow icon.
3. Under Mega Menu, select Mega Menu for Links or Category Mega Menu.
4. Save Menu. Next configure sub-items (below).

#### Configure Mega Menu Items

To make mega-menus work, you have one additional step of adding sub-items.

For Category Mega Menu, add a few sub-categories as sub-items (drag/drop them under a parent category in menu). Example:

Links Mega Menu is configured by adding Custom Links to be used as headings. You can use 4 of these headings. Then, a 3rd-level sub-items are added which are displayed as links, under each heading. Example:

### Navigation Breadcrumbs

Motive has breadcrumbs enabled by default on all pages but the homepage (they would be redundant on homepage). The navigation breadcrumbs not only aid in navigation but also are immensely valuable for Search Engine Optimization (SEO).

The default breadcrumbs have Rich Snippets built-in so more SEO is undesirable. If you use a SEO plugin like "WordPress SEO by Yoast", please do not enable the breadcrumb functionality of the plugin.

However, if you wish to disable the breadcrumbs: (NOT RECOMMENDED)

1. Go to Appearance > Theme Settings.
2. Under Header, click on the button under Disable Breadcrumbs.
3. Save Settings.

### Sticky Navigation

Motive has an option that can make your navigation menu stick to top of the browser when your users scroll. This ensures that your navigation menu is always accessible to the user, no matter how scrolled into the page.

To enable sticky navigation:

1. Go to Appearance > Theme Settings.
2. Under Header, click on the button under Sticky Navigation.
3. Save Settings.

# Creating Pages

You can create simpe WordPress pages normally. However, if you need more advanced pages, you can use Visual Composer that's included in the theme.

### The Page Builder - Visual Composer

Using the page builder is recommended to create homepages. But you can use it to setup any page you like using the combination of widgets available. You can even use shortcodes within the text widget within the page builder. The only limit is your creativity!

To use the page builder:

1. Considering you're at new page screen (Pages > Add New), click Backend Editor button above the post editor.
2. Click the + button and create a row. Rows and columns are the first things you have to create. And then within these rows, you can click the "+" button to add the other elements.
3. Under Page Attributes, select Homepage & Blocks as Template.
4. Don't forget to enter a page title. Preview and Publish.

#### Videos

Visual Composer has a collection of basic and advanced videos in their video academy. Few basic guides:

- Adding Rows & Columns
- Adding Text Blocks
- Dragging & Changing Order Of Elements

### About Shortcodes — Advanced & Optional

You can either use the pagebuilder or use advanced shortcodes for everything. Not only that, you may also use shortcodes within the pagebuilder widgets such as Text or Rich Text widget.

For more info, refer to the Shortcodes section of the docs.

### Page Templates

1. Default: The default page has a container.
2. Homepage & Blocks: This is a bare-bone template. Use it with page builder or when using advanced shortcodes to create the homepage.
3. Authors List: Use this template to create a list of blog authors.
4. Sitemap: This is a special template only to be used to create a Sitemap page as shown in the demo.

### Custom Sidebars

Details in Sidebars & Widgets section.

### Other Pages, Instructions and Samples

#### Contact Page

Setting up a contact page requires that you install the "Contact Form 7" (go to Appearance > Install Plugins if you have not already installed it).

First create a contact form:

1. Go to Contact and edit the default contact form (Contact Form 1).

2. Replace form content with this:

       <p>Your Name (required)<br />
           [text* your-name] </p>

       <p>Your Email (required)<br />
           [email* your-email] </p>

       <p>Subject<br />
           [text your-subject] </p>

       <p>Your Message<br />
           [textarea your-message] </p>

       <p>[submit "Send"]</p>

3. Edit the "Mail" settings to suit your needs and Save
4. For more information, refer to Contact Form 7's FAQ and Docs.

Once you have created your form:

1. Go to Contact again. Copy the code under Shortcode column.
2. Go to Pages > Add New. Add your page content and paste the shortcode where you would like your contact form to appear.

Adding Google Maps to Contact Page

To add Google Maps:

1. Go to Google Maps.
2. Find the desired location and in the left pane, click Link icon (it's to the right side of "My places" button, next to print icon).
3. Click customize and preview embedded map. Set settings as desired and the copy the HTML code.
4. Edit your page and go to Text editor (next to Visual). Paste your code and Publish.

#### Authors List

To create a page with the list of authors, simply create a normal page and use Authors List as Page Template.

# Posts & Categories

### Setup Categories

Setting up categories for this theme is no different than ordinary category setup in WordPress, but there are some additional layout settings.

Go to Posts > Categories and fill in the info required. To choose the correct layout, refer to the Demo.

#### Category Listing Style

There are 3 layout styles and 4 options to choose from: (click to view demo for more information on each style)

1. Default Style: This is the style you have chosen to be the default from Theme Settings. If you change the default from Theme Settings, the layout for this category will change too.
2. Grid - 2 Columns: Shows the listing with a 2 column grid format. Recommended!
3. Grid - 3 Columns: Shows the listing with a 3 column grid format.
4. Blog Style: Shows category listing in a typical traditional blog layout.
5. Class Large Blog Style: Shows category listing in a typical traditional blog layout.

##### Show Sidebar?

This option allows you to set whether you would like to show the sidebar in the category listing or not.

Note It does not affect the "single post" view in the category. You can modify whether to show sidebar for a post or not for each post.

##### Featured Slider?

Motive supports featured sliders for categories. There are two options here:

1. Show Posts Marked for Featured Slider: This will show posts that have "Featured Slider Post?" checked.
2. Show Latest Posts: Show most recent posts in slider, ignoring "Featured Slider Post?" setting.

##### Show More Stories

Motive shows random posts below category listing, on category page, if this setting is enabled.

##### Category Color — Optional

Motive uses the category color in several places such as main menu, home-page blocks headings, category listing image hover color.

##### Main Site Color — Optional

Setting this color is like setting the main theme color. When viewing this category, the theme's main color will be changed to the selected color.

### Adding Posts

Adding a new post is the same way as default WordPress installations, however, there are extra options that might need explaining.

#### Featured Image Size

While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.

To set the featured image, use the WordPress normal method.

Important If you have existing content and featured images, you will have to install Regenerate Thumbnails plugin and run it from Tools > Regen. Thumbnails. Skipping this will make your existing images look out of proportions or stretched.

#### Recommended Image Size

Image size (dimensions) will depend on what type of layout you're using throughout your WordPress installation or per individual post basis. This image will not only be used on the post, but also on the category listing pages.

- Compatible with all layouts and default slider: 1206x420 (width x height).
- If you don't use Full Width layout: 740x357 minimum.
- For posts that will only appears in homepage blocks and listings (no slider, no full-width): 359x201 minimum.

Note Motive uses WordPress's standard cropping and resizing method.

#### About Retina Images

Retina images are used for hi-definition / hight DPI screens such as iPad, Macbook Retina and so on. For these devices, you need to upload images twice the recommended dimensions above.

Motive, when activated, informs you to install a few plugins and one of them is WP Retina 2x. Assuming you had existing images that are large enough, you can convert them to retina images from Media > Retina, after activating the plugin.

### Supported Post Formats

#### Video Format

Setup your post normally and set a featured image. Copy the embed code of the video from YouTube, Vimeo or any other site that gives you video embed codes. Paste the code in the "Featured Video Code" box.

Note Videos will be resized to fit the container so you can choose a larger embed format if the video site allows you to specify size/dimensions.

#### Gallery Format

Motive will automatically convert the first gallery inserted into a post to a gallery slider - granted "gallery" post format is checked. To use the gallery post format, same as every other post, set a featured image first.

1. Click Add Media button.
2. Click Create Gallery. Upload images or select from Media Library. Click Create a new gallery.
3. Click "Insert gallery".
4. (optional) If you wish to show thumbnails or create a static/non-slider gallery, set image captions and click Insert Gallery. Change post format to Standard.

Note To create a tiled mosaic gallery, Slim Jetpacks plugin is required.

#### Audio Format

WordPress supports embedding into posts by default. An audio player will be inserted into the post.

1. Click Add Media button.
2. Select your audio file. Once uploaded, make sure embed option is selected.
3. Insert and Publish.

#### Image Format

Image format works very similar to a standard post. Just set a featured image of a recommend size and you're done.

### Post Settings & Options

You will see the following post options when adding a post.

- Featured Slider Post? - Check this to feature this post in the homepage/category sliders.
- Layout Style: You have the option of a layout with a sidebar on right or a full-width layout for this post.
- Disable Featured: You may choose to disable the featured area for this post. If you want to disable it for all posts, check Theme Settings > Posts & Reviews.
- Featured Video/Audio Code: As shown in the Video Format above, it's for setting a featured video for the post. It may also be used to place SoundCloud iFrame Embed code.
- Custom Background Image: Available when your layout is set to Boxed in Theme Settings. This allows you to change the background image of your site for only this post.

### Reviews System

The review system is pretty self-explanatory. You only have to enable it for posts that are supposed to contain to be a review.

- Enable Review? - Check this to enable review box for this post.
- Display Position: You can either display the review box at top being full width, or at bottom full width.
- Rating Type: You can use either percent or percentage format to display rating in the box.
- Heading: A heading text can be set for the review box. If no heading text is provided, the review box header is hidden.
- Verdict: Enter one word for verdict, such as "Awesome".
- Verdict Summary: Enter a few line summary of the review. You can use advanced shortcodes here too.
- Criteria: Click on Add More Criteria and fill in the Label and Rating for each Criterion that follows.

### Multi-page Content Slideshow

One of the unique features of Motive is a multi-page content slideshow. It's basically `<!--nextpage-->` feature of WordPress with enhanced functionality.

If you are new to WordPress nextpage feature, the only thing to know is that you can place a `<!--nextpage-->` in Text editor anywhere to split to content into multiple pages - More info here.

Once you have created a multi-page post normally, you will have to enable the slideshow feature. Follow the steps below:

1. Edit your post and look for Post Options.
2. Next to Multi-page Content Slideshow? select either "AJAX - No Refresh" or "Multi-page" option (explanation below).
3. Save your post. That's all. Your slidehow will be split based on `<!--nextpage-->`.

Note It's recommended to check "Disable Featured?" for posts of this type.

#### AJAX or Multi-Page?

There are two options available. AJAX option prevents a page refresh so the content will be loaded via AJAX. This may be good or bad depending on your personal usage.

A site looking for more advertising views will want to use the Multi-page option to register more views. Whereas, a dynamic website wishing to make things faster for users will want to use the AJAX option.

### Shortcodes

Most of the shortcodes you will need are added to the GUI Shortcode Generator. Click the "Shortcodes" button while adding a post to see a list of generator-based shortcodes. There are a few layout related shortcodes that will not be listed there.

For more info, refer to the Shortcodes section of the docs.

# Sidebars and Widgets

Motive comes equipped with several custom widgets but also styles many of the default widgets in several locations.

If you are unable to see these custom widgets, please activate the Bunyad Widgets plugin.

### Custom Widgets

Bunyad - About
  A widget to display an image/logo and a description of your site/blog. Recommended for footer.
Bunyad - Flickr
  Display a configurable number of flickr photos from your account with configurable sorting options. Recommended for footer.
Bunyad - Recent Posts
  An improvement over the default recent posts widget, including thumbnail. Suitable for main sidebar and footer.
Bunyad - Recent Tabs
  Display latest posts. First tab is Recent and other tabs can be any category. Recommend for main sidebar.
Bunyad - Latest Reviews
  Display the latest reviews.
Bunyad - Popular Posts
  Displays the overall popular posts, based on number of comments received, with thumbnails.
Bunyad - Twitter
  Can display the a configurable number of latest tweets from your twitter account. Recommended for footer.
Bunyad - Tabber Advanced
  Like Recent Tabs but allows you to select a sidebar to use widgets from. Thus allowing you to use any type of widget in tabs.

#### How to use widgets

1. Go to Appearance > Widgets.
2. Main Sidebar is the main right sidebar and Footer (3 widgets columns) is the large footer. Expand the box at right, where you would like to place your widget, by clicking on the arrow icon next to it.
3. Drag & drop the widget you wish to use, in the expanded area below the box (Main Sidebar for example).
4. Fill in the information necessary and click Save.

#### Twitter API Setup — for Twitter and Social Buttons widgets

First, setup a a twitter application:

1. Create an app at twitter.
2. Enter a Name, Description and link to your Website. Callback URL can be left empty.
3. Agree with the rules, enter the captcha code and click Create your Twitter Application.

Once you're on the next page (this page can also be accessed via going to your twitter apps and selecting your application):

1. Click Create my access token button under the Your access token section.
2. You should have your Consumer key, Consumer secret, Access token, and Access token secret.
3. Use this on the widgets that need this info.

#### About Tabber Advanced Widget

This widget relies on Custom Sidebars provided by the plugin. To use it:

1. Create a custom sidebar. You can use any name but use a descriptive name to remember it like Tabber Widgets.
2. Drag/drop widgets to newly created custom sidebar/widget area normally. Note that the widget title will be used as the tab title - so keep it short.
3. Drag/drop the Bunyad - Tabber Advanced widget in your Main Sidebar area.
4. Select the newly created custom sidebar from the drop down next to sidebar.
5. Save.

### The Right Sidebar

Motive's right sidebar uses the Main Sidebar widget area. Any widgets you drag/drop in this widget area will be displayed in the right sidebar.

#### Advertisement Setup

Setting up advertisements on the right side is pretty simple. You will create a Advertisement widget and paste your ad code in it.

For a normal ad, create the Advertisement widget as explained in section above, and paste the code in it. That's all.

If you would like to use custom ads in two columns, you can use the columns shortcode, for example:

    [columns]

    	[column size="1/2"]left ad code here[/column]
    	[column size="1/2" class="right"]right ad code here[/column]

    [/columns]

### Custom Sidebars

Motive relies on Custom Sidebars plugin to offer this functionality. This means your sidebars will be save even if you decide to switch the theme. It's recommended by the Theme to be installed but if you haven't installed it yet, install it from Appearance > Install Plugins (not visible if plugin already installed).

Go to Appearance > Widgets and Create a new sidebar.

Next, simply add/edit a post or page and you should have a Sidebars box at the right side where you can select your sidebar from a drop-down list. Generally, you only want to replace Main Sidebar.

#### Using on categories, tags archives, search, and other archives

1. Go to Appearance > Widgets. Click arrow to expand the sidebar you wish to use on a category.
2. Click Sidebar Location link. You should see this:
3. Click to expand For Archives.
4. For categories, click on Category Archive tab.
5. For other archives like custom taxonomies, search, tag archives etc. click on Archive Types.
6. Check "As Main Sidebar for selected"... and click on the input box to select your categories or archives types.
7. Save Changes.

# Footer Setup

Motive comes with a footer that's split into two sections, the larger (upper) footer and the lower footer. Both are widget areas that can be modified as you wish.

Please ensure that you have already acquainted yourself with general widget setup via the sections above. This section assumes you already know how to add widgets to widget areas.

### Large Footer

By default, you're supposed to use 3 widgets in the footer. However, should you wish to go advanced, you may add a Text widget and use Columns Shortcode to create as many columns as you want with your own content.

Recommended Widgets:

Bunyad - About
  Write a description and use an image/logo link - you can upload an image in Media Library and copy/pate the link. Full custom code and HTML supported.
Bunyad - Flickr
  Using this widget can show the latest photos from your flickr stream.
Bunyad - Recent Posts
  An improvement over the default recent posts widget, having thumbnails.
Bunyad - Popular Posts
  Another very good choice for footer widgets.

While the above is a recommended list, you are free to use many of the default widgets in the footer, like Calendar, Image widget etc.

#### FeedBurner Subscribe — In About Widget

The subscription option shown in the Demo is simply a Feedburner Shortcode. To setup, in your description box of About widget, enter the following shortcode:

    [feedburner user="FEEDBURNER USERNAME" heading="Subscribe to our newsletter:" label="Email Address" button_text="SUBMIT"]

### Lower Footer

Lower footer is best used for simple copyright message. For a simple copyright message, just drag & drop a Text widget and add your copyright.

If you wish to achieve the demo look, adding links to the lower footer on the right side, you need to do two things.

1. Add a Text widget into Lower Footer widget area and enter a copyright message in the text field, leaving the title empty.
2. Create a menu. Go back to Widgets and Drag & Drop a Custom Menu widget. Select your menu.

Note Hierarchical menus are NOT supported. Only use menus of single depth. Footer is not a place for drop down menus.

# Color, Style & Typography

Both the color/style and typography settings are located in Theme Settings.

### Color & Style

#### Using a Pre-defined Skin

1. Go to Appearance > Theme Settings. Click Style & Colors tab at left.
2. Select one of the pre-defined skins and click Save Settings.

Note Selecting a skin doesn't change color defaults but you can still change them using the same color customization method below.

#### Customizing the Colors & Backgrounds

1. Go to Appearance > Theme Settings. Click Style & Colors tab at left.
2. Usually you may wish to only change Main Color. This will effect links, background of special elements like slider and highlights module, and other relevant areas. Leave everything default and see if you like the result.
3. If the Main Color changes are not enough, customize and change colors as you please.
4. Save Settings.

Note In case you mess up, you can always click Reset Colors. DO NOT click Reset All Settings as that will erase all other settings too.

### Typography

For typography, we use Google Web Fonts. Many of the typography elements have suggested font families or fonts.

1. Go to Appearance > Theme Settings. Click Typography tab at left.
2. Select a font you like as the Main Font, Heading Font etc. and Save Settings.
3. Experiment to get the best effect.

#### Other Recommended Fonts

- Droid Sans
- Lato
- PT Sans
- Roboto
- Gudea
- Merriweather Sans
- Oxygen

#### About Character Sets — Advanced

Non-latin script based languages will not display correctly when using the default fonts. This is because, to limit size, only latin charset is included by default.

To get the fonts to display correctly, you will have to tick the character sets for your language. Some latin-based languages required Latin Extended.

Note If all else fails, you can use the System Fonts show towards the end of the drop down choices.

# Slider & Other Settings

To access these settings in question, go to Appearance > Theme Settings. Each setting includes relevant information on the right side about what it does making everything very self-explanatory.

### Add Posts to Slider

The featured content area in Motive consists of 6 posts (Grid), 7 (Split Slider), or 5 (Full-width). The posts are sorted by date.

The default option of slider is to display images you have marked as "Featured Slider Post?" manually. However, there's an option to automatically show the most latest posts in the slider (when using that option, the setting below does not apply). Read Setting the Slider section for more information.

To mark a post to be displayed in the featured area:

1. Go to Posts > Add New or Edit an existing post.
2. Under Post Options, check "Featured Slider Post?". This is covered in more details under Post Options section.
3. Save your post. That's all.

### Slider Settings

Slider Settings in the panel are only related to the effects used by all the featured sliders. To change the featured slider for a homepage/page, refer to the Setting A Slider sub-section.

### Other Settings

#### FavIcon and Mobile Icon

These favicons are good to have when someone bookmarks your site. Both of these settings are located in General Settings near the bottom.

Use a 32x32 .ico file for your favicon and 144x144 .png file for mobile icon. Mobile icon will be used when users add your website as a shortcut on mobile devices like iPhone, iPad, Android etc.

#### Post Tags

While we prefer categories over tags, some of our users might want to use both at the same time. To enable tags, go to Page / Post Settings and set Show Tags to Yes.

#### Custom CSS

Please do not edit .css files directly. When there is a theme upgrade, you will lose any custom edits you made. Rather, we recommend that you use the built-in custom CSS setting to extend the default style. This CSS will be preserved between upgrades.

Go to Custom CSS, enter your desired CSS and click Save Settings.

#### Settings Backup & Restore

Before you make any massive like in colors, you may wish to create a backup. Just click Download Backup to get a backup. You can later restore it using the Restore/Import feature.

# Translation & Internalization

### Install WordPress in your Language

After translating, you may wish to use the correct locale to translate and localize your WordPress installation completely. Refer to Installing WordPress In Your Language at WordPress Codex to learn how to.

### Translate Motive

Motive comes with .po and .pot file included under the languages folder. To translate:

1. Download and install Poedit.
2. Open motive.pot in Poedit. Translate as needed.
3. Save the file with the locale. If you have already setup WordPress in your language, you can get it from your wp-config.php file under, for example: `define('WPLANG', 'en_GB');`. In this case, you would save your file as en_GB.po.
4. Step above should have generated a .po and an .mo file. Copy both these files under the languages folder of motive.

### RTL Version

For languages that read from right-to-left unlike English which is left-to-right, Motive will automatically switch to an RTL style, as long as you it's in your language and uses the correct locale (as explained above).

### Multilingual Sites

For multilingual sites, the best way is to purchase the WPML Plugin. Motive is compatible with the plugin.

When using WPML, we recommend you use Display the language switcher in the WP Menu option and select Main Menu. This will display the languages drop down menu in the main navigation menu.

# Advanced Customizations

If you are looking for layout customizations beyond the Style & Typography settings built into the theme, it's important to judge the nature of customization.

If it's a simple layout change, it's very likely achievable by using different Shortcodes or Custom CSS. However, for something not possible using either of these, a child theme is recommended.

### Child Theme

WPBeginner has a great article on How to create a WordPress Child Theme. Use `Template: motive` instead of twentyeleven.

Also, use `@import url("../motive/style.css");` in the CSS file to import parent stylesheet.

# Shortcodes

Motive supports the usage of shortcodes in Pages, Posts, Page Builder Text/Rich Text widgets, Advertisement, About, and Text widgets. Thereby, giving your maximum flexibility. Please note when creating a post or a page, most of these shortcodes are accessible via the Shortcodes button in the Visual editor.

### Posts Shortcodes

Post shortcodes are accessible via the GUI Shortcode Generator. Simply click the Shortcodes drop-down in the editor (make sure you're on Visual editor) and select the relevant shortcode to be guided.

If you wish to manually use the shortcodes (advanced users only), the guide below offers some insight into each.

#### PullQuote

    [pullquote]quote here[/pullquote]

#### Dropcap

    [dropcap]A[/dropcap]

To use the square version:

    [dropcap style="square"]A[/dropcap]

#### Buttons

    [button link="http://somewhere.com" color="white, blue, black, green, red, yellow, or custom hex code"
    text_color="optional hex color" size="small, medium, or large"]Label[/button]

#### Tabs

You can either use horizontal tabs (default) or add `type="vertical"` to get vertical tabs.

    [tabs type="vertical"]
    	[tab title="Title 1"]Content 1[/tab]
    	[tab title="Title 2"]Content 2[/tab]
    [/tabs]

#### Accordions

    [accordions]
    	[accordion title="Title 1" load="show"]Content 1[/accordion]
    	[accordion title="Title 2" load="hide"]Content 2[/accordion]
    [/accordions]

Tip `load="show"` defines to show this accordion (expanded) by default.

#### Toggles

    [toggle title="Title 1" load="show"]Content 1[/toggle]
    [toggle title="Title 2" load="hide"]Content 2[/toggle]

Tip `load="show"` defines to show this accordion (expanded) by default.

#### Custom List

    [list style="arrow, check, edit, folder, file, or heart"]
    	[li]Item 1[/li]
    	[li]Item 2[/li]
    [/list]

Custom lists support all of the icons from FontAwesome. Simply type it in style argument without the fa- (ex. arrows for fa-arrows).

#### Separator

    [separator type="space" /]

type
  value: space, line, half-space, half-line. The separator can be either be a large empty space, line-based, small empty space, or line-based but with lesser space.

#### Social Icons

The social icons shortcode is mainly used for header top bar or footer widgets. These are the small icons you can see in top bar on demo. Example:

    [social]
    	[social_icon link="/?feed=rss2" title="RSS" type="rss" /]
    	[social_icon link="http://facebook.com/username" title="Facebook" type="facebook" /]
    	[social_icon link="http://twitter.com/username" title="Twitter" type="twitter" /]
    	[social_icon link="link to your google+ profile" title="Google+" type="google-plus" /]
    	[social_icon link="link to your linkedin profile" title="LinkedIn" type="linkedin" /]
    [/social]

link
  Link to your social profile.
title
  Mouse-over title to use for this social icon.
type
  value: facebook, twitter, google-plus, linkedin, twitter, rss, pinterest, instagram, youtube, tumblr.

#### Columns

Columns are a border-line layout shortcodes. While they're also often used in posts, they're covered below.

### Layout & Block Shortcodes — Advanced!

This section is only for advanced users. Use page builder if you are uncomfortable with using shortcodes.

1. Columns Shortcode
2. Blog/Listing Block
3. Highlights Blocks (Mini, Full-Split, Normal)
4. Spotlight Block
5. Newsbar Block
6. Multimedia Block
7. Latest Gallery (Carousel) Block

#### Column Shortcodes

The column shortcode is a special shortcode. Sample shortcode:

    [columns]

    	[column size="1/4"]Column 1 goes here[/column]
    	[column size="1/4"]Column 2 goes here[/column]
    	[column size="2/4"]Column 3 goes here[/column]

    [/columns]

The `[column]` shortcode has the following variables/options:

size
  5 columns are supported. Hence all combinations are supported up to 5 such as 1/2, 2/3, 1/4, 3/5 etc. Alternatively, English version of the numbers is also supported, such as half, one-third, three-fourth, four-fifth etc. Example: `size="one-fourth"`.
text_align
  left, center, and right are valid alignment values. left is used by default. Example: `text_align="right"`.
class
  Any of the custom CSS classes can be defined for the column using this attribute.

#### Blog Block

Blog block is used to list latest posts using the desired listing format. Sample:

    [blog type="alt" cat="entertainment" /]

type
  (optional) value: grid-2, grid-3, alt, classic, or leave empty. This setting defines the listing format. The listing styles were explained in Category Listing Styles. Default: Listing Format in Theme Settings.
posts
  Number of posts to display. Set to 0 or -1 for no limit.
cat
  value: id or category slug. The main category to use for this block. Will use title (unless overridden by title parameter) and color from this category.
title
  (optional) Enter a heading you wish to use for this block, for instance a category title.
title_type
  (optional) value: block, or leave empty. The default heading is in a post heading format. To get it to the home page section heading style, use block as value.
tags
  (optional) A comma separated list tag slugs you wish to limit the posts to a tag or multiple tags.
terms
  A comma separated list of category ids. If taxoomy is specified below, the ids will be considered for that taxonomy instead of category taxonomy.
pagination
  value: 1 (to enable), or 0 (to disable). If pagination is enabled, the "posts" number is used for limiting posts per page.
sort_by
  value: modified, random (leave empty for published date).
sort_order
  value: asc, desc (leave empty to use desc).
taxonomy
  (optional advanced) A custom taxonomy even registered with custom post types. Usually used with the categorization taxonomy of custom post types.
post_type
  (optional advanced) Define the post type to use. Defauls to post. Multiples can be defined separated with comma such as: post,my_cpt

#### Latest Gallery Block

The gallery block is used to either display a carousel or a slider of latest posts of a specific media such as galleries, videos etc. Sample:

    [latest_gallery title="Latest Videos" format="video" posts="5" /]

format
  (optional) value: all, gallery, video, audio, or leave empty. This defines the post format to use. For example, setting this value to video will use the featured images of the most recent posts in video post format.
posts
  Number of posts to display. Set to 0 or -1 for no limit.
cat
  value: id or category slug. The main category to use for this block. Will use title (unless overridden by title parameter) and color from this category.
title
  (optional) Enter a heading you wish to use for this block, for instance a category title.
title_type
  (optional) value: block, or leave empty. The default heading is in a post heading format. To get it to the home page section heading style, use block as value.
tags
  (optional) A comma separated list tag slugs you wish to limit the posts to a tag or multiple tags.
terms
  A comma separated list of category ids. If taxoomy is specified below, the ids will be considered for that taxonomy instead of category taxonomy.
sort_by
  value: modified, random (leave empty for published date).
sort_order
  value: asc, desc (leave empty to use desc).
taxonomy
  (optional advanced) A custom taxonomy even registered with custom post types. Usually used with the categorization taxonomy of custom post types.
post_type
  (optional advanced) Define the post type to use. Defauls to post. Multiples can be defined separated with comma such as: post,my_cpt
show_nav
  value: true, or false. Whether to show the navigation below or not.
per_slide
  Number of posts to display per page (per slide).

Note Gallery block uses the featured image of the selected post formats. It will not display videos or audio but simply the featured image of that post.

#### Highlights Block

The highlights block has three variations: full-split, mini, or normal. Sample:

    [highlights type="full-split" cat="entertainment" /]

type
  (optional) value: mini, full-split or empty. This setting defines the highlight block type.
no_thumbs
  value: 0 or 1. Set to 1 to disable small thumbnails in this block.
posts
  Number of posts to display. Set to 0 or -1 for no limit.
cat
  value: id or category slug. The main category to use for this block. Will use title (unless overridden by title parameter) and color from this category.
title
  (optional) Enter a heading you wish to use for this block, for instance a category title.
title_type
  (optional) value: block, or leave empty. The default heading is in a post heading format. To get it to the home page section heading style, use block as value.
tags
  (optional) A comma separated list tag slugs you wish to limit the posts to a tag or multiple tags.
terms
  A comma separated list of category ids. If taxoomy is specified below, the ids will be considered for that taxonomy instead of category taxonomy.
format
  (optional) value: all, gallery, video, audio, or leave empty. This defines the post format to use. For example, setting this value to video will use the featured images of the most recent posts in video post format.
sort_by
  value: modified, random (leave empty for published date).
sort_order
  value: asc, desc (leave empty to use desc).
taxonomy
  (optional advanced) A custom taxonomy even registered with custom post types. Usually used with the categorization taxonomy of custom post types.
post_type
  (optional advanced) Define the post type to use. Defauls to post. Multiples can be defined separated with comma such as: post,my_cpt

#### Spotlight Block — also known as Main Highlights

Spotlight block is used for larger listing as, generally, the first block on homepage. Example:

    [main_highlights cat="business" /]

posts
  Number of posts to display. Set to 0 or -1 for no limit.
cat
  value: id or category slug. The main category to use for this block. Will use title (unless overridden by title parameter) and color from this category.
title
  (optional) Enter a heading you wish to use for this block, for instance a category title.
title_type
  (optional) value: block, or leave empty. The default heading is in a post heading format. To get it to the home page section heading style, use block as value.
tags
  (optional) A comma separated list tag slugs you wish to limit the posts to a tag or multiple tags.
terms
  A comma separated list of category ids. If taxoomy is specified below, the ids will be considered for that taxonomy instead of category taxonomy.
sort_by
  value: modified, random (leave empty for published date).
sort_order
  value: asc, desc (leave empty to use desc).
format
  (optional) value: all, gallery, video, audio, or leave empty. This defines the post format to use. For example, setting this value to video will use the featured images of the most recent posts in video post format.
taxonomy
  (optional advanced) A custom taxonomy even registered with custom post types. Usually used with the categorization taxonomy of custom post types.
post_type
  (optional advanced) Define the post type to use. Defauls to post. Multiples can be defined separated with comma such as: post,my_cpt

#### Newsbar Block

Newsbar block is usually used as a small column strip to show recent posts. Sample:

    [news_bar title="Recent Posts" posts="10" /]

type
  (optional) value: mini, full-split or empty. This setting defines the highlight block type.
no_thumbs
  value: 0 or 1. Set to 1 to disable small thumbnails in this block.
posts
  Number of posts to display. Set to 0 or -1 for no limit.
cat
  value: id or category slug. The main category to use for this block. Will use title (unless overridden by title parameter) and color from this category.
title
  (optional) Enter a heading you wish to use for this block, for instance a category title.
title_type
  (optional) value: block, or leave empty. The default heading is in a post heading format. To get it to the home page section heading style, use block as value.
tags
  (optional) A comma separated list tag slugs you wish to limit the posts to a tag or multiple tags.
terms
  A comma separated list of category ids. If taxoomy is specified below, the ids will be considered for that taxonomy instead of category taxonomy.
format
  (optional) value: all, gallery, video, audio, or leave empty. This defines the post format to use. For example, setting this value to video will use the featured images of the most recent posts in video post format.
sort_by
  value: modified, random (leave empty for published date).
sort_order
  value: asc, desc (leave empty to use desc).
taxonomy
  (optional advanced) A custom taxonomy even registered with custom post types. Usually used with the categorization taxonomy of custom post types.
post_type
  (optional advanced) Define the post type to use. Defauls to post. Multiples can be defined separated with comma such as: post,my_cpt

#### Multimedia Block

Multimedia is another gallery type block but displays the first post as better highlighted. Sample:

    [multimedia format="video" posts="5" title="Latest In Videos" /]

type
  (optional) value: mini, full-split or empty. This setting defines the highlight block type.
no_thumbs
  value: 0 or 1. Set to 1 to disable small thumbnails in this block.
posts
  Number of posts to display. Set to 0 or -1 for no limit.
cat
  value: id or category slug. The main category to use for this block. Will use title (unless overridden by title parameter) and color from this category.
title
  (optional) Enter a heading you wish to use for this block, for instance a category title.
title_type
  (optional) value: block, or leave empty. The default heading is in a post heading format. To get it to the home page section heading style, use block as value.
tags
  (optional) A comma separated list tag slugs you wish to limit the posts to a tag or multiple tags.
terms
  A comma separated list of category ids. If taxoomy is specified below, the ids will be considered for that taxonomy instead of category taxonomy.
format
  (optional) value: all, gallery, video, audio, or leave empty. This defines the post format to use. For example, setting this value to video will use the featured images of the most recent posts in video post format.
sort_by
  value: modified, random (leave empty for published date).
sort_order
  value: asc, desc (leave empty to use desc).
taxonomy
  (optional advanced) A custom taxonomy even registered with custom post types. Usually used with the categorization taxonomy of custom post types.
post_type
  (optional advanced) Define the post type to use. Defauls to post. Multiples can be defined separated with comma such as: post,my_cpt

### Media Shortcodes

WordPress core supports embedding much of media out of the box.

#### Galleries

Galleries were already covered in Gallery Post Format section. For advanced usage, refer to Gallery Shortcode section in WordPress docs.

#### Embedding Videos & Audio

To show a video from YouTube or Vimeo for example, you would just copy the link and paste it into your post content.

Checkout the Embeds section of WordPress's docs to find the supported sites.

Should that fail, you can use the embed shortcode as `[embed]http://www.youtube.com/watch?v=dQw4w9WgXcQ[/embed]`.

#### Self-hosted Audio & Video

Starting WordPress 3.6, you can self-host audio or video easily. However, not many webhosts will allow you to upload files of large size.

1. While adding a post, click Add Media. Go to Insert Media > Upload Files.
2. Select and upload your audio or video file.
3. Make sure Embed Media Player is selected in "Embed or Link" option.
4. Click Insert into post.

For advanced usage, check out the Audio and Video sections of the WordPress docs.

# Copyright & Credits

### Demo Images Authors not included

- Demo Images were bought from DollarPhotoClub and DeathToStockPhoto.
- Few images on demo are CC licensed from Flickr: Lucas Zallio, Johan Larsson, Ginny.

### Other Resources Used

- FitVids
- OwlCarousel
- Bootstrap ToolTip
- Magnific Popup
- FontAwesome
- Entypo Font