iReview WordPress Theme - User Guide

Last update: February 14th, 2017

Copyright © 2010-2017 ClickFWD LLC

Chapter 1 iReview Theme Overview

The iReview WordPress Theme is built using the latest css techniques and features a clean, minimalistic design. iReview comes with powerful options, all of which can be adjusted using the WordPress Customizer with live preview. The theme includes powerful layout options and an improved responsive grid system which adapts to various resolutions of different devices (desktops, tablets, smartphones). There are more than 40 widget areas. Two sidebars are available, each can be placed left or right of the main content and they can use either grid based dimensions or any custom fixed dimension that you specify via settings.

1.1 Main features

WordPress 4.x compatible

Very light and very fast

Clean, minimalistic design

Uses HTML5 and CSS3

Responsive layout

Animate.css support

Two sidebars, both can have any custom width

Easy to customize, add custom styles and scripts via template parameters

Multilevel menu navigation, both horizontal and vertical

Slideout menu for mobile devices

Google Web Fonts (preselected best fonts from Google's font service)

Scroll to top option

32 color styles available in different variations

40 widget areas

Chapter 2 Installation & Upgrade

2.1 Installation Steps

Download the template installation file (iReviewWP_1.x.x.zip) from the Client Area: https://www.jreviews.com/client-area

In WordPress Dashboard of your site click Appearance -> Themes.

Click Add New button on top of the page.

Click Upload Theme button.

Click Choose File, select the downloaded theme zip file and click Install Now

After the theme is installed successfully, click Activate:

2.2 Upgrading

If you already use an early version of iReview theme and you want to upgrade to a the latest release, you can either:

a) Delete the /wp-content/themes/ireview-wp/ folder, then install the new version using the regular installation steps above

or

b) Extract the downloaded iReviewWP_1.x.x.zip package and replace the /wp-content/themes/ireview-wp/ folder with the ireview-wp folder from the extracted package.

If you modified any theme files, make sure you backup those files before the upgrade (copy them to a safe location and bring them back after the upgrade).

Chapter 3 Customizing Theme Settings

To start adjusting theme settings, click Customize next to the iReview theme in the admin area or in the frontend:

Template settings are split in 6 sections:

General Settings - Logo, favicons, copyright, 3rd party scripts, etc.

Layout - Responsive layout, mobile menu, sidebars

Syles - Styles of individual page wrappers

Social Media - Links to your site's social media pages

Customizations - CSS & javascript settings

Menu Styles - Styles of the horizontal menu positions

3.1 General Settings

3.1.1 Site Name & Logo

By default, iReview will display the name of your site as the logo until you upload a custom logo image. Select a default site logo image and optionally a mobile logo image (which will replace the default logo on small screen devices).

You can publish the logo to the Header area or the Topbar area. Choose the topbar only if your logo is small because topbar height is 40px and if the selected logo is larger, it will be scaled down.

If you choose to show the logo in the header area, select how many grid columns you want to reserve for the logo. The remainder will be used by the 'position-0' module position. For example, if you select 6/12, both the logo and the 'position-0' module position will take 50% of the available screen size.

If you show the logo in the topbar area or if you disable the logo, 'position-0' module position will display in the whole header row.

Favicons

The favicon is an image used by browsers to represent a web page. It is typically 16x16 pixels, but these days larger sizes are required due to browsers using them in a number of ways, especially as touch icons for mobile devices.

Instead of having to create 7-8 different favicon images manually, we recommend using a Favicon Generator. You need to prepare a single image file (preferably with square dimensions, at least 260x260 pixels), upload it to the generator and it will give you differently sized images for all platforms and the favicon code. Upload the images to the root folder of your site and paste the code to the Favicon code setting.

3.1.2 Copyright

iReview provides a simple way to add copyright text to the footer of your website. You can use any custom text and {current_year} tag which will be automatically replaced with the current year and {site_name} tag which will be automatically replaced with the site name (as defined in the Site Name section).

Select how many grid columns will be reserved for copyright text and the rest of the available space will be left for the Right of Copyright widget position. For example, if you select 6/12, both the copyright text and the widget position will use 50% of the screen size. If you select 12/12 for the copyright text, the Right of Copyright widget position will be disabled.

If you need some special content as the copyright text, set Show copyright text setting to No and instead publish a custom widget to the Right of Copyright widget position.

3.1.3 Web Fonts

iReview by default uses the Helvetica and Arial fonts, but you can choose a different font from a selected number of Google Fonts. The template has a separate font setting for the body text, headings and logo.

If your site isn't in English, select an appropriate Character Set.

3.1.4 3rd Party Scripts

3rd Party Scripts settings allow you to choose which scripts will be loaded and how. Examples of using 3rd party scripts are available in chapter 8.

3.1.5 Cookie Consent (EU Law Compliance)

If your site is EU based and you want to show the Cookie Consent message, you can enable it here. Once new site visitors click the "I agree!" button, they will no longer see the message. This is how the message looks like by default:

3.1.6 Google Analytics

If you want to use Google Analytics, you don't need to add the whole block of code generated by Google, it is already included in iReview and you only need to paste the UA code of your site from your Google Analytics account. The format of the UA code is usually UA-XXXXXX-X.

3.2 Layout

3.2.1 Responsive Layout

The layout of the iReview theme is responsive by default and main content is centered on the site with 1200px maximum width. If you want to reduce maximum width, enter the number of pixels to the Maximum width setting.

If you want the content to take 100% of the browser width on all devices, enable Content 100% width setting for individual page wrappers in the Styles section.

3.2.2 Slideout Menu

The main horizontal navigation menu of your site can be transformed to a Slideout menu on mobile devices. The theme allows you to choose at which breakpoint to convert the menu.

Use the Menu(s) to convert setting to specify which menus will be converted to the slideout menu.

There are two types of slideout menus:

OffCanvas - when the visitor clicks the menu icon, the slideout menu will appear and push the rest of the page outside the visible screen

Overlay - when the visitor clicks the menu icon, the slideout menu will appear as overlay above the rest of the page

The theme allows you to automatically move Topbar widgets or Topbar social media icons to the Slideout menu on small screens.

3.2.3 Sidebars

iReview provides two sidebars (primary and secondary) and both can be displayed on either left or right side of the main content.

The sidebars will appear only if you publish widgets to one of the sidebar widget positions. For more info on module positions check chapter 5.

For sidebar dimensions you can choose between:

Grid columns - the sidebars will use percentage width and its size will be narrower on smaller devices.

Fixed width - the sidebars will have the same width on all devices - recommended if you plan to have fixed size banners in the sidebar.

3.3 Styles

In the Styles section you can set a default link color and styles for different page wrappers.

Header, Content and Footer wrappers are displayed by default and other wrappers will appear only if you publish widgets to their widget positions.

For each wrapper you can choose a different background color and make its content take 100% page width.

To Topbar Wrapper can be optionaly made Always on top.

iReview provides 32 different color styles, but you can also choose a custom background color using a color picker. Even if you choose a custom background color using the color picker, also select the most similar default background color to make sure the correct font colors will be applied.

Examples of all 32 predefined color styles can be seen in chapter 4.

Besides choosing a custom background color, you can also upload a background image for any. You should use a large background image beause it will fill all available space of the individual wrapper. The image will be centered horinzontally and you can choose the vertical alignment (top, center, bottom). A scrolling mode setting is also available where you can choose the "fixed" scrolling mode where the background image won't scroll down with the rest of the page (parallax effect).

Example of a background image in a header wrapper:

3.4 Social Media

iReview provides an easy way to add buttons that link to your site's social media profiles. Enable individual social buttons, paste links to your site's profile pages and adjust the link titles. You can also choose where to show the social media buttons (topbar or footer).

Example of social media buttons in the topbar:

3.5 Customizations

3.5.1 CSS

There are two ways to add custom css code to the template:

Enable Load custom.css file and add your code to the /wp-content/ireview-wp/css/custom.css file. Use the Version override for custom.css setting to add a custom version number every time you update the custom.css on a live site for returning visitors to see new updates without clearing browser cache.

Paste the custom css code to the Custom CSS Code textarea - useful for small css customizations.

3.5.2 Javascript

Load custom head scripts from textarea below - any code that you add to below textarea will be included in the <head> part of the template, useful for scripts that need to be loaded from the head element like fonts from CDNs.

Load custom footer scripts from textarea below - any code that you add to below textarea will be included before the closing </body> tag, useful for custom scripts that don't need to be loaded from the template <head>. If you are using some other service for stats besides Google Analytics, the script can go here.

3.6 Menu Styles

In the Menu Styles section you can choose a background and set custom classes for each of the available horizontal menus. More info on how to use custom classes to style the menus is available in chapter 6.

Chapter 4 Color styles

iReview theme comes with 32 different color styles:

Any of these color styles can be selected as background of page wrappers in the Styles theme parameters.

Besides using those colors as wrapper backgrounds, you can also use them as backgrounds for specific widgets. To do that, enter color class name (i.e. bg-dark-green2) into the Custom Widget Classes widget parameter (more info about this in the next chapter).

Chapter 5 Widget positions

iReview theme has a large number of widget positions as shown on the above image, which you can use as a reference before publishing widgets.

Any of the iReview widget positions can be selected when creating a new widget in WP Appearance -> Widgets and you can also drag the widgets to widget positions:

Chapter 6 Widget & menu styles

6.1 Widget styles

By default, every widget looks like this:

The default stying can be changed based on your needs using the styling settings that iReview theme provides for every WordPress widget:

Use the Widget Background setting to select one of the available background colors (examples of all background colors can be seen in chapter 4). For example, if you select Green 2, the widget will look like this:

The Custom Widget Classes setting can be used to add additional classes to adjust the module appearance. Here is the list of classes that iReview provides:

Rounded border

rounded-xs - extra small border radius

rounded-sm - small border radius

rounded-md - medium border radius

rounded-lg - large border radius

Example of the widget using rounded-sm class:

Visible border

If you want the widget to have a visible border (slightly darker than the chosen backround color), you can add an extra bordered class name, for example:

Padding and margin

There are helper classes for extra margin or padding:

padding-5 - adds 5px padding

padding-10 - adds 10px padding

padding-15 - adds 15px padding

padding-20 - adds 20px padding

margin-5 - adds 5px margin

margin-10 - adds 10px margin

margin-15 - adds 15px margin

margin-20 - adds 20px margin

For example, to add an extra 10px padding to the module content, use the padding-10 class:

6.1.1 Widget title styles

The Widget Title Style allows you to choose how the widget title will appear. Available options are:

Default

Titlebar

Titlebar - outside

You've seen the default style in the above examples.

Titlebar looks like this:

It is also possible to choose a Widget Title Background, here is an example of a Red 2 background color and Titlebar - outside style:

6.1.2 Publishing multiple widgets to the same widget position

Whenever you publish more than one widget to the same widget position, they will be displayed one below the other.

If you want to display widgets side by side within a single widget position, you can use the Grid Columns settings.

Any combination is grid columns is possible, the important part is that the overall number of columns in a single row (widget position) is equal to 12.

For example, if you add 4 widgets to the same widget position and you want them to display in 4 colums, select 3/12 desktop columns in each widget (3 x 4 = 12 columns) and 6/12 smartphone columns so that on mobile devices they display as two widgets in two rows.

6.2 Menu styles

6.2.1 Vertical menus

If you publish a Custom Menu WP widget to any of the widget positions, the menu will be displayed vertically. Here is an example of the default style:

The menu widget supports the same styles as regular widgets. For example, this is how a menu with Light 2 background and Titlebar - outside style looks like:

6.2.2 Horizontal menus

If you want to have a horizontal menu on your site, you can't use the Custom Menu widget. Instead, go to the WP Appearance -> Menus page, create a new menu and choose one of the available horizontal menu positions in the Display location setting:

The horizontal menu will look like this by default:

You can apply any of the widget styles to the horizontal menus if you click Customize in iReview and adjust the settings in the Menu Styles section:

6.3 Utility classes

6.3.1 Hiding widgets on phones or tablets

If you want to hide a widget on phones or tables, you can use Bootstrap's utility clases:

For example, to hide the widget on very small devices (phones), enter "hidden-xs" to the Custom Widget Classes setting like this:

Chapter 7 Theme Customizations

If something isn't possible to do via theme parameters, the only solution is to customize the code of the theme.

It is recommended to do customizations using css and avoid changing other files if possible.

All css modifications should be added into /wp-content/themes/ireview-wp/css/custom.css file. The styles that you put there will override default styles. Keep in mind that loading custom.css file should be enabled in the Customization section of iReview parameters.

Always backup your customizations to avoid losing them when upgrading the template.

Chapter 8 Using 3rd Party Libraries

8.1 Using Bootstrap Tooltips

iReview template will automatically initialize Bootstrap tooltips when you add i-tooltip class name to an element.

For example, if you add a "i-tooltip" class name to a link element, the tooltip will display the text that you add to the "title" attribute:

<a href="#" class="i-tooltip" title="Some tooltip text!">Hover over me</a>

The title attribute is required for the tooltip to appear.

If you want to specify the placement of the tooltip, use the "data-placement" attribute with one of the 5 available values: auto, left, top, bottom, right, for example:

<a href="#" class="i-tooltip" title="Tooltip on right" data-placement="right">Hover over me</a>

8.2 Using Bootstrap Popovers

iReview template will automatically initialize Bootstrap popovers when you add i-popover class name to an element.

For example, if you add a "i-popover" class name to a button element, the popover will display the title from the "title" attribute and content from the "data-content" attribute:

<button type="button" class="btn btn-default i-popover" title="Popover title"
data-content="Content for the popover">Click to toggle popover</button>

If you want to specify the placement of the popover, use the "data-placement" attribute with one of the 5 available values: auto, left, top, bottom, right, for example:

<button type="button" class="btn btn-default i-popover" title="Popover title"
data-content="Content for the popover" data-placement="top">Click to toggle popover</button>

If you want to automatically hide the popover when visitors click anywhere, add data-trigger="focus" attribute:

<button type="button" class="btn btn-default i-popover" title="Popover title"
data-content="Content for the popover" data-placement="top"
data-trigger="focus">Click to toggle popover</button>

8.3 Using Bootstrap Tabs

To use bootstrap tabs, add this code to the template where you want the tabs to appear:

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Content of Tab 1</div>
  <div class="tab-pane" id="tab2">Content of Tab 2</div>
  <div class="tab-pane" id="tab3">Content of Tab 3</div>
</div>

The tabs will look like this by default:

The same code can be used in template files of extensions like JReviews.

8.4 Using Animate.css library for animations

In iReview General settings you can enable loading animate.css library to be able to easily apply CSS3 animations to elements using class names.

Examples of all available animation class names can be found on this page:

https://daneden.github.io/animate.css

To add a specific animation to a WP widget, add the name of the animation (i.e. "fadeInLeft") to the "Custom Widget Classes" parameter and an extra "animated" class name which starts the animation:

This widget animation will start as soon as the page is loaded.

Example of this animation can be seen on the JReviews demo site (sidebar modules):

http://wp-demo.jreviews.com

8.4.1 Delay animations until the element becomes visible

If you want to add animations to widgets that are outside the viewport on first page load, you can enable loading wow.js library in iReview General settings. This library allows you to start the animation when the visitor scrolls down and the widget appears.

To start the animation when the widget appears, use the "wow" class name instead of "animated":

Example of this animation can be seen on the JReviews demo site (scroll down to see the footer menu):

http://wp-demo.jreviews.com

8.4.2 Apply animations to WordPress plugins

Animations are not limited to widgets, you can add them to the content of any WP plugin if you customize its theme files.

For example, to animate the listing title on the JReviews listing detail page, edit its theme file (listings/detail.thtml), find the h1 heading code that contains the title:

<h1 class="contentheading">

and add animation classes:

<h1 class="contentheading bounceInRight animated">

8.4.3 Changing animation parameters

Default animation duration is set to 0.5s. If you want to change the duration, you can override it via the custom.css file, for example:

.animated {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
}

This will change the duration of all animations. If you want to change the duration of a specific animation, include its name in the css selector, for example:

.animated.fadeInLeft {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
}

You can also adjust the delay:

.animated.fadeInLeft {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

or make the animation repeat infinitely:

.animated.pulse {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}