REWORK

USER GUIDE

Rework WordPress Theme User Guide 1

Contents

Contents Shortcodes
14 [gr-accordions]
Import DEMO Site 15 [gr-blog]
15 [gr-button]
How to update theme to newer version 16 [gr-carousel] – projects carousel
16 [gr-carousel] – images carousel
Metaboxes 17 [gr-imagegrid]
5 Page 17 [gr-googlemap]
5 Post 18 [gr-portfolio]
5 Post/Project Format - Image 18 [gr-post]
5 Post/Project Format - Gallery 19 [gr-pricetable]
6 Post/Project Format - Link 19 [gr-project]
6 Post/Project Format - Quote 19 [gr-slider]
6 Post/Project Format - Audio 20 [gr-tabs]
6 Post/Project Format - Video 20 [gr-title]
6 Common 20 [gr-teammember]
7 Blog Grid 21 [gr-tooltip]
7 Team 21 [gr-section]
7 Price Table 22 [gr-icon]
7 Project 23 [gr-iconbox]
8 Page Title 23 gr-columns] & [gr-column]
8 Portfolio 23 [gr-gap]
24 [gr-hr]
Theme Options
24 [gr-wpml]
10 Common 25 Standard media shortcodes [embed],
10 Logo and Favicon [video], [audio]
10 Sidebars
11 Header JavaScript , CSS, Credits
11 Footer 26 Javascript Files
11 Custom JS/CSS 26 Fonts
11 Import/Export
12 Fonts Thank you.
12 Pages Layout
12 BB Press

Theme Specific Options

13 Search button in Main Menu
13 Fonts Editor

Rework WordPress Theme User Guide 2

Import DEMO Site

DEMO site contains a set of basic elements introduced in the theme, shows the ways how
these elements can be used. That’s a good way to learn how things are working. Theme has a
unique and very easy way to import DEMO site, it contains from the following steps:

1. Import DEMO site – imports the content of DEMO site together with all necessary
settings (widgets, menus). This step should be done via administration – Appearance –
Theme Options – Import/Export click the button “Import DEMO site”. Note, importing
DEMO site may overwrite the current site content.

2. Import Revolution Slider, go to administration – Revolution Slider and click Import Slider
button. Select the import template file from the theme archive and process it.

That’s all!

Note: DEMO site may contain different images and video files than shown on the theme preview.

Rework WordPress Theme User Guide 3

How to update theme to newer version

To update the theme, you have to do the following:

1. Download the latest version of theme archive from the market

2. Extract the theme file “rework.zip” from the downloaded archive

3. Delete currently installed theme in Wordpress

4. Install new theme from the file “rework.zip”

Note, while theme update, no any information will be deleted from your Wordpress installation.

Since version of Wordpress 3.8, to delete the theme the following steps should be done:

1. Go to Appearance - Themes

2. Activate any other theme apart Rework, Rework has to be deactivated

3. Hover mouse under Rework theme and click Theme Details button

4. In the right bottom corner of the page find the link “Delete”, click it to delete the theme.

Rework WordPress Theme User Guide 4

Metaboxes

Metaboxes allow to customize specific page parameters. Metaboxes appears when you edit
the Post, Page, Project or Team member. If necessary metabox is not shown, but expected to
be shown, make sure it is enabled in the Screen Options menu (find it in the top of the editor
page).

Page
Metabox contains settings for pages only.

Show Breadcrumb – shows the breadcrumb links in the header below the page title. Option
takes effect only if the current page has the parent page. Breadcrumb structure can be set by
assigning Parent page in the Page Attributes metabox;

Breadcrumb Alignment – specify the alignment of the breadcrumb links on the page, can be
the following:

• Align Left – breadcrumbs are aligned to the left;

• Align Center – breadcrumbs are aligned to the center;

• Align Right – breadcrumbs are aligned to the right.

Post
Metabox contains settings for posts only.

Show Post Icon in Blog – show an icon for the post in the classic blog. Option has the following
values:

• Always Show – post icon is always shown in the blog;

• Show if no Sidebar on the Page – post icon is shown in the blog only if there is no sidebar
on the blog page;

• Never Show – never show a post icon.

Disable Post Title – do not show post title in the blog and single post. The option is useful for
posts of quote and link formats, where the post title may be useless and look overloaded.

Post/Project Format - Image

Metabox is used on the project pages.

Overwrite Featured Image – select the image to overwrite the featured image or galley or
video used in portfolio blocks (portfolio pages, [gr-portfolio] and [gr-project] shortcodes) to
show the current project.

Post/Project Format - Gallery

Metabox is used on the project and post pages. It determines the featured content of the
current project or post as slider (gallery, the set of images). Metabox appears only if the
Featured Content is selected to Gallery in Portfolio Item metabox for projects, or post Format
is set to Gallery for posts.

Rework WordPress Theme User Guide 5

Gallery Images – create a gallery of images for slider.

Post/Project Format - Link

Metabox is used in the posts, it appears only if the post Format is set to Link.

Url of the Link – enter the URL of the link.

Post/Project Format - Quote

Metabox is used in the posts, it appears only if the post Format is set to Quote.

Quote Text – enter the text of the quote;

Quote Cite – text of cite section of the quote block.

Post/Project Format - Audio

Metabox is used in the posts, it appears only if the post Format is set to Audio.

Audio Files – select Audio Files from the Media Library.

Post/Project Format - Video

Metabox is used on the project and post pages. It determines the featured content of the
current project or post as video. Metabox appears only if the Featured Content is selected to
Video in Portfolio Item metabox for projects, or post Format is set to Video for posts.

Video can be specified using following methods:

• Url to remote video – the video URL to youtube or vimeo video;

• Custom HTML – through the custom HTML code, usually used for remote video inserted
through <iframe> tag;

• Selfhosted video files – video files are located under Media Library and hosted on the
same server.

Url to External Video – URL to the video like YouTube or Vimeo. Note, URL should be started
from http:// or https://;

Custom HTML – custom HTML code of the video (using <iframe src=”video_url” />; for e.g.);

Video Files – select Video Files from the Media Library (not used if “Url to External Video” is
specified);

Preview Image – select an image to be shown instead of “Video Files” if the browser does not
support video on the page.

Common
Metabox contains common page settings.

Sidebar Position – select a sidebar position on the page, can be the following:

• No Sidebar – no sidebar on the page;

• Left Sidebar – sidebar from the left of the page content;

Rework WordPress Theme User Guide 6

• Right Sidebar – sidebar from the right of the page content;

• Both Sidebars – combines left and right sidebars on the page.

Footer Style – specify the footer style on the page:

• No Footer – no footer on the page;

• Collapsed Footer – footer exists, but footer widgets area is collapsed, the special button
expands the footer sidebar on the user behalf;

• Full Footer – classic footer with footer widget area;

• Small Footer – small footer type, similar to full footer but excluding the footer sidebar.

Blog Grid
Metabox contains settings for blog grid page template. Metabox activates only if the Template
it set to Blog Grid in the Page Attributes metabox.

Columns Layout – specifies how many columns the blog page will have;

Show Categories Box – select if you would like to show categories box at the top of the page;

Select Post Categories – select the categories of the posts to show in blog.

Team
Metabox contains settings for team custom post type.

Social Icons – define the list of social icons, which appears over the team member image.

Price Table
Metabox contains settings for price table custom post type.

Table Type – select how the price table will be looking. Our theme supports 2 kinds of price
tables: Simple and Extended, please view theme preview for more details;

Price Table – enter the price table data for the corresponding fields.

Project
Metabox contains settings for project custom post type.

Project Type – select the type of the project, i.e. how the single project page will look. Check
the site DEMO or theme preview for detailed look of the available types;

Portfolio Button – select to what portfolio page the button on the page will point;

Featured Content – the featured content for the project. Select the featured content in the
corresponding metabox. Note, featured content is being shown in the single project pages
and portfolio page, however, the featured content image shown in the portfolio may be
overwritten with the image selected in Post/Project Format – Image metabox. Such case you
may control the image shown for portfolio page and for single project page. Available values:

• Featured Image – select the image in the Featured Image metabox;

• Galley (Slider) – featured content is a gallery of images shown as a slider, slider images
should be selected in Post/Project Format - Gallery;

Rework WordPress Theme User Guide 7

• Video – featured content is a video, video preferences should be selected in Post/Project
Format - Video.

Feature Text – feature text appears in the portfolio page at the top right corner of the
project’s featured image.

Page Title
Contains settings of the page title area of the page.

Subtitle – a line of text that appears under Pagetitle Text, recommended to use for page/post
title that can be shown using [gr-title] shortcoderesize the height of the header to browser
window height;

Pagetitle Text – text of the page title. Note, text editor for this field is configured to provide
easiest way to manipulate text parameters. Embedded editor features for text alignment, text
color etc. should be used for text configuration;

Header Height – enter height of header (menu + pagetitle) in pixels. Keep value empty to set
the height automatically;

Header Bottom Margin – enter the margin from the bottom of the header to begin of the
page content in pixels;

Background Content – select the type of the header background. Available values:

• No Background – no header background;

• Background Color (select a color below) – sets a header background color;

• Background Image (specify image below) – header background is an image;

• Background HTML (specify HTML code below) – header background is a custom HTML
code, for e.g., this can be a video (use [video] shortcode), Google Map (use [gr-googlemap]
shortcode), Revolution Slider (insert it via shortcode) and any other custom HTML code
and shortcodes combination.

Overwrite Main Menu Styles – overwrite the main menu style selected for all pages in Theme
Options;

Main Menu Style – please check Theme Options – Header – Main Menu Style;

Main Menu - Sub Menu Style – please check Theme Options – Header – Main Menu –
Submenu Style.

Portfolio
Contains settings for Portfolio pages. Metabox shows when Template is selected to Portfolio in
Page Attributes metabox.

Dotted Image Mask – show a dotted image mask over the project images;

Grayscale Filter – applies grayscale filter to the portfolio image;

No space between projects – turn it on to eliminate space between projects;

Hover Effect – select the hover effect for portfolio image;

Rework WordPress Theme User Guide 8

Navigation Type – set the type of navigation (pagination) box for a page. Available values:

• No Navigation;

• Normal Navigation – dark navigation buttons, used with the light background;

• Projects Auto-loading – new projects are being automatically loaded when the page is
scrolled to the bottom.

Columns Layout – specify how many columns the portfolio page will have;

Number of Portfolio Items per Page – select how many projects show on this page;

Specify how to Order Portfolio Items – specify how projects are ordered on the page, can be
the following:

• From Newer to Older;

• From Older to Newer.

Show Categories Box – show or hide the box with the categories;

Select Project Categories – select the filter by categories of the projects to show in the
portfolio page.

Rework WordPress Theme User Guide 9

Theme Options

Common
Retina Ready – allows to optimize theme for a better support for retina displays. Note, if
the feature is enabled, then the images used on web site will be send to client browser with
doubled size than they are required by the theme content, this may cause more server loading
and increase of traffic bandwidth;

Accent Theme Color - allows to set the accent theme color;

Default Blog Page Template - select the page from which the settings for default blog page
will be taken (Common and Page Title metaboxes etc). Default blog page means the page of
search results, filters by tags, authors and categories etc;

Custom 404 Page - select the page which you would like to show as Error 404 page (instead
of standard one). To it to (no template) to show standard Error 404 page made by theme
developers.

Default Single Post page template - select the page from which the settings for single post
pages will be taken (Common and Page Title metaboxes etc). This function overwrites the
metabox values entered on the post page;

Logo and Favicon

Favicon image – set the image to use it as a site favicon (images of small size are
recommended);

Logo – specify the sources of the logo box. Logo box is being shown on the page header. Could
be the following:

• Do not show a logo – no logo for the site;

• Logo is a pure text – logo is a text, no html/shortcodes are allowed. Enter the text in the
Logo text field;

• Logo is HTML – logo is a custom HTML, shortcodes are allowed. Enter the HTML code in
the Logo HTML field;

• Logo is an image – logo is an image. Specify the images for a logo in Logo Image field. For
support of retina displays, there is an ability to set the sizes of the logo image in the Logo
Image Height and Logo Image Width fields in pixels. For example, if you would like the logo
image to be 200x300 pixels, to make sure this image is shown in the best quality on the
retina displays, the original image file should be at least 400x600 pixels (in two times more
than the size settings you entered). If the retina functionality is not required for a site logo,
keep size parameters empty.

Sidebars
Dynamic Sidebars – allows to add unlimited number of additional sidebars to the site.
Sidebars can be used on any page of the theme, specific sidebar(s) for every page can

Rework WordPress Theme User Guide 10

be changed in the Common metabox. Sidebars should be filled out with widgets on the
Appearance – Widgets page.

Header
Sticky Header – specify if the top navigation menu should be sticky, i.e. glued to the top of
page when scrolling;

Header Style – specify the style (position of main menu and logo) of the pages header;

Show Optional Header – allows to show an optional header. Optional header is an additional
line with any information above the main menu. Optional header contains from any custom
information aligned to left, and a set of social icons aligned to right;

• Optional Header Text – custom text aligned to left in optional header, shortcodes are
allowed;

• Optional Header Social Icons – set of social icons in the optional header aligned to right.
Note, URL of the social icons must be started with http:// or https:// prefixes.

Main Menu Style – style of the root level items of main menu. Main Menu Style can be
overwritten in the Common metabox for the particular page. It can be:

• Light Menu – menu color is white (light) and menu text is black (dark);

• Dark Menu – menu color is black (dark) and menu text is white (light).

Main Menu – Sub Menu Style – style of the sub level items of main menu. Value can be
overwritten in the Common metabox for the particular page. It can be:

• Light Sub Menu – menu color is white (light) and menu text is black (dark);

• Dark Sub Menu – menu color is black (dark) and menu text is white (light).

Menu styles can be overwritten for a particular page in the Page Title metabox.

Footer
Footer Sidebar – Widgets per Line – allows to set the number of widgets shown per line in the
footer sidebar;

Footer Color – color of the footer block;

Footer Copyrights – copyrights text shown in the footer.

Custom JS/CSS
Custom JS – custom JavaScript code to be added in the page footer;

Custom CSS – custom CSS code to be added to the page header.

Import/Export
Import Site – allows to import site content from XML file made by Exporting Site Content
feature;

Import DEMO Site – imports the demonstration site create by theme developers;

Rework WordPress Theme User Guide 11

Export Site Content – exports the content of the site into XML file. This feature is more
advanced than the standard WordPress – Tools – Export because it also allows to export
menus, widgets, sidebars and some WordPress settings. It is recommended to use this feature
to copy/move existing site to new installation.

Fonts
Contains settings that allow to customize the main fonts used in the theme. The core blocks
that fonts feature handles are following: BODY element (site text), headers from H1 to H6, text
of Page Title, text of main menu. See more about Font Editor.

Pages Layout
Layout – common layout for all site pages, can be the following:

• Boxed Style 1 – bordered pages layout;

• Boxed Style 2 – boxed style with, for e.g., image on background;

• Wide Style 1 – classic wide layout.

Layout Boxed Style 1 – Border Color – border color for Boxed Style 1 layout;

Layout Boxed Style 2 – Background Texture – sets the type of background for the page Layout
of Boxed Style 2, can be either color, either picture (repeated picture, or fullscreen);

BB Press
Page Layout Settings – select the page from which the settings for every BB Press page will be
taken (Common, Page Title metaboxes etc).

Rework WordPress Theme User Guide 12

Theme Specific Options

Search button in Main Menu

Search Button can be added to the Main Menu only, and only in the most top menu level. To
add it to menu, go to Appearance – Menus, select the Main Menu in the menu list, add a root
element of “Links” type and set the item “Link Text” to text [search].

Fonts Editor
Theme is using smart Fonts Editor that allows to assign many different fonts to the theme,
including Google Fonts, change the font parameters like font size and font color.

Font Editor allows to select the font from a list of standard fonts, or from a list of Google Fonts
or keep the font specified by theme developers.

To overwrite the size and color of the font specified by theme developers, select necessary size
and color parameters in the Overwrite Size/Color fields, make the text of the font uppercase.

Font Editor contains a unique feature that allows to update the list of the Google Fonts which
you may use in the theme. This feature is important if you would like to use new Google Fonts
which are not included in the DEMO theme pack. To update the list of Google Fonts click on the
link “Update the list of Google Fonts”, the appeared form will ask to enter personal Google API
key. This tutorial describes how to acquire such key https://developers.google.com/fonts/docs/
developer_api#APIKey Once the key is entered, click Update Fonts button. Note, it may take
up to a minute to update the fonts, the time depends on the server speed/loading. In case of
successful updating, the message with the number of updated Google Fonts appears. To apply
the changes just refresh the page in the browser (note, it may discard the changes in the theme
options you made before in case they are not saved).

Rework WordPress Theme User Guide 13

Shortcodes

[gr-accordions]
Allows to create accordions box. Accordions contains from a combination of two shortcodes
– [gr-accordions] and [gr-accordion]. [gr-accordions] is a container for accordion items. [gr-
accordion] – describes each item in the accordion. The text of the particular accordion item
should be entered between opening and closing [gr-accordion] tags.

Parameters ([gr-accordions] only):

• active – zero based index of the active accordion item. For example, if there are 2 items in
the accordion and you would like the second one to be opened by default, then the active
parameter value should be 1 (and 0 if the first item should be active instead).

• title – the title of accordion item.

Example:

[gr-accordions active=”0”]
[gr-accordion title=”Accordion 1”]
Text of Accordion 1
[/gr-accordion]
[gr-accordion title=”Accordion 2”]
Text of Accordion 2
[/gr-accordion]
[/gr-accordions]

[gr-alert]

Produces an alert box. Note, the text to be shown inside the alert box should be entered
between opening and closing tags of shortcode. Shortcode is available in the shortcode
generator.

Parameters:

• type – defines the type/color of the alert box.

• icon – icon to show in the alert box. See [gr-icon] shortcode for available icon classes, or
use built in Shortcode Generator.

Example:

[gr-alert type=”yellow”]Yellow Alert[/gr-alert]

Produces yellow alert box with text “Yellow Alert” inside.

[gr-alert type=”green” icon=”fa fa-heart”]Green Alert[/gr-alert]

Produces green alert box with text “Green Alert” inside and hear t icon.

Rework WordPress Theme User Guide 14

FAQ:

Q: Can I use other shortcodes and custom HTML inside alert shortcode?

A: Yes, sure, you can do that.

[gr-blog]
Generates a line with the recent posts. Shortcode generator is available in the menu of visual
editor.

Parameters:

• perline – determines the number of posts shown in shortcode per line;

• categories – select the particular categories of posts to show in shortcode. Keep this
parameter empty to show posts of any category. Note, the category slug should be
entered there. In case of multiple categories, the categories should be comma delimited,

• count - allows to set the number of posts shown in shortcode.

Example:

[gr-blog perline=”3”]
Displays 3 recent posts per line.

[gr-blog perline=”2” categories=”design,sport”]

Displays 2 recent posts of categories “design” or “sport” per line.

[gr-blog perline=”3” count=”6”]

Show a blog block with 6 posts, 3 posts per line (2 lines).

FAQ:

Q: I would like to show particular posts in the portfolio line, how to do that?

A: This case you may use [gr-columns] shortcode to set up necessary gird of columns and
inside each column place a [gr-post] shortcode with the id of particular post.

[gr-button]
Produces a button. Shortcode is available in the shortcode generator.

Parameters:

• size – size of the button, possible values are:

• small - determines the small size of the button;

• normal - determines the normal size of the button;

• large - determines the large size of the button;

• color – color of the button, possible values are:

• red, orange, yellow, green, seagreen, aqua, blue, purple, violet, white, lightgrey,
mediumgrey, darkgrey – value determine the color of the button;

• theme – button color is same as theme Accent Color (see Theme Options - Common);

Rework WordPress Theme User Guide 15

• icon – the icon appeared on the button, see [gr-icon] shortcode for allowed icon classes;

• url - enter the URL to the web page to which the button will point;

Enter title of the button between the opening and closing shortcode tags.

Example:

[gr-button size=”normal” color=”red” url=”http://thegravity.net/”]Button[/gr-button]

Shows a button with the normal size, red color and text “Button” inside.

[gr-carousel] – projects carousel

Produces a carousel of the projects. Shortcode is available in the shortcode generator.

Parameters:

• mask – specify this attribute to apply a dotted mask to the project image;

• grayscale – sets the grayscale effect to the project image;

• hover – set the specified hover effect to the project images, possible values are 1, 2, 3 or 4;

• ids – comma delimited ids of the project to show in carousel (to find the project id go to
wordpress administration page, select Portfolio from the navigation menu);

• columns – the number of visible items in the carousel, can be value from 2 to 6. Note,
carousel is responsive, the number of visible items may change depending on window
size. Parameter expects to show specified number of projects if the carousel is placed to
the container of default theme width.

Example:

[gr-carousel mask grayscale hover=”1” ids=”10,11,12,13” columns=”4”]

Shows a carousel of projects, with dotted mask and grayscale effect, with hover effect of style 1, projects
with ids 10, 11, 12, 13, 4 columns in carousel.

[gr-carousel] – images carousel

Produces a carousel of the images. Shortcode is available in the shortcode generator.

Parameters:

• ids – comma delimited ids of the images to show in carousel (to find the image id go to
wordpress administration page, select Media from the navigation menu);

• columns – the number of visible items in the carousel, can be value from 2 to 6. Note,
carousel is responsive, the number of visible items may change depending on window
size. Parameter expects to show specified number of images if the carousel is placed to
the container of default theme width;

Rework WordPress Theme User Guide 16

Example:

[gr-carousel ids=”10,11,12,13” columns=”4”]

Shows a carousel of images, images ids 10, 11, 12, 13, 4 columns in carousel.

[gr-imagegrid]
Produces a carousel of the images. Shortcode is available in the shortcode generator.

Parameters:

• images – comma delimited ids of the images to show in image grid (to find the image id go
to wordpress administration page, select Media from the navigation menu);

• columns – the number of columns per line to show images, extra images will flow to next
line;

• borders – specify this attribute to show borders in the grid.

[gr-googlemap]
Shows a Google Map.

Parameters:

• lat - latitude of the location shown in Google map;

• lng – longitude of the location shown in Google map;

• zoom – zoom parameter for the Google map;

• title – Google map title, text of the map marker;

• color – select the accent color for the map;

• saturation – accent color saturation in the map;

• height – height of the Google map element shown on the page in pixels. Keep it empty to
make height variable, depending on the width of the map (if this case is used the height of
the map will be 3/8 of it width).

Example:

[gr-googlemap lat=”10” lng=”0” zoom=”5” height=”100”]

Shows a Google map with the height of 100 pixels.

FAQ:

Q: How do I show a Google map fullwidth in header?

A: Go to edit the necessary page and find a Page Title metabox. Set the parameter Background
Content to HTML and in the Background HTML field enter the googlemap shortcode.

Rework WordPress Theme User Guide 17

[gr-portfolio]
Generates a line with the set of projects. Use the administration – Portfolio menu to set up
projects. Shortcode generator is available in the menu of visual editor.

Parameters:

• perline – determines the number of projects shown in shortcode. Note, the latest projects
are being shown there;

• categories – select the particular categories of projects to show in shortcode. Keep this
parameter empty to show projects of any category. Note, the category slug should be
entered there. In case of multiple categories, the categories should be comma delimited;

• count - allows to set the number of projects shown in portfolio;

• mask – specify this attribute to apply a dotted mask to the project image;

• grayscale – sets the grayscale effect to the project image;

• hover – set the specified hover effect to the project images, possible values are 1, 2, 3 or 4;

• nogutter – use this attribute to eliminate the space/margins between the project images.

Example:

[gr-portfolio mask grayscale hover=”2” perline=”3”]

Displays 3 recent projects per line, dotted mask and grayscale effects applied to the project images,
hover effect of style 2 applied to projects.

[gr-portfolio perline=”2” categories=”design,sport”]

Displays 2 recent projects of categories “design” or “sport” per line.

[gr-portfolio perline=”3” count=”6”]

Show a portfolio block with 6 projects, 3 project per line (2 lines).

FAQ:

Q: I would like to show particular projects in the portfolio line, how to do that?

A: This case you may use [gr-columns] shortcode to set up necessary gird of columns and
inside each column place a [gr-project] shortcode with the id of particular project.

[gr-post]
Shows a post with the particular id. Set up posts in the administration – Posts menu.

Parameters:

id – id of the post to show.

Example:

[post id=”100”]
Show the post with id = 100.

Rework WordPress Theme User Guide 18

FAQ:

Q: How do I show a few posts per line?

A: You may use [blog] shortcode, or combine few [posts] shortcodes with the [columns]

[gr-pricetable]
Shows a price table of the particular id. Set up posts in the administration – Price Tables menu.

Parameters:

• id – id of the price table to show.

[gr-project]
Shows a particular project. Set up projects in the administration – Portfolio menu.

Parameters:

• id – id of the particular project to show. Take id from the list of projects in administration –
Portfolio menu;

• mask – specify this attribute to apply a dotted mask to the project image;

• grayscale – sets the grayscale effect to the project image;

• hover – set the specified hover effect to the project images, possible values are 1, 2, 3 or 4.

Example:

[gr-project id=”100” mask]

Show the project with id = 100, project image has a dotted mask.

FAQ:

Q: How do I show a few projects per line?

A: You may use [gr-portfolio] shortcode, or combine few [gr-project] shortcodes with the [gr-
columns]

[gr-slider]
Produces a slider with images. The shortcode generator exists in the post editor.

Parameters:

ids – comma delimited ids of the slider images. Take the id of the necessary image from the
administration - Media menu, or use the slider shortcode generator in the visual post editor;

Example:

[gr-project id=”100” mask]

Show the project with id = 100, project image has a dotted mask;

Rework WordPress Theme User Guide 19

FAQ:

Q: Where do I take an image id?

A: Go to administration – Media menu, the image id is shown in the Id column.

[gr-tabs]
Allows to create tabs box. Tabs contains from a combination of two shortcodes – [gr-tabs] and
[gr-tab]. [gr-tabs] is a container for tab items. [gr-tab] – describes each item in the tabs box.
The text of the particular tab item should be entered between opening and closing [gr-tab]
tags.

Parameters [gr-tabs]:

• active – zero based index of the active tab item. For example, if there are 2 items in the
tab box and you would like the second one to be opened by default, then the active
parameter value should be 1 (and 0 if the first item should be active instead);

• position – specifies position of the tab titles relative to tabs content. Possible values are:

• top – tab titles above the content;

• left – tab titles from left at content;

• right - tab titles from right at content.

Parameters [gr-tab]:

• title – the title of tab item;

• icon – specifies the icon class to be shown in the tag title.

Example:

[gr-tabs position=”left” active=”0”]

[gr-tab title=”Tab 1” icon=”fa fa-heart”]
Text of Tab 1
[/gr-tab]
[gr-tab title=”Tab 2”]
Text of Tab 2
[/gr-tab]
[/gr-tabs]

[gr-title]
Shows a title of the current page. It is recommended to use inside Subtitle field of the Page
Title metabox.

[gr-teammember]
Draws a box with the team member. To set up the team member use administration – Team
menu.

Parameters:

id – id of the team member, take it from administration – Team table.

Rework WordPress Theme User Guide 20

Example:

[gr-teammember id=”100”]

FAQ:

Q: Where do I take a member id?

A: Go to administration – Team menu, the member id is shown in the Id column.

[gr-tooltip]
Produces a tooltip pop-up near with the selected text/element when mouse is over it.

Parameters:

• position – position of the tooltip window relative to the element. Can be the following:

• top – tooltip window under the element;

• left – tooltip window at left of element;

• right – tooltip window at right of element;

• bottom – tooltip window under the element;

• title – text of the tooltip window.

The tooltip text/element should be entered between opening and closing shortcode tags.

Example:

[gr-tooltip position=”top” title=”Tooltip”]Text with tooltip[/gr-tooltip]

Produces a text “Text with tooltip” with the tooltip window at top with text “Tooltip”.

FAQ:

Q: Can I use other shortcodes inside tooltip?

A: Yes, you can.

[gr-section]
Basic and most complex shortcode element of the theme. It produces a content with the
custom background (the content part always appears over the background part). This
shortcode should include 2 another shortcodes that build the element structure, they are:

• [gr-section-background]– contains parameters and elements which describes the

background part of the section shortcode;

• [gr-section-content] – contains parameters and elements of the section content.

Parameters [gr-section]:

• fullwidth – makes the section fullwidth. Parameters works only if the section is placed at
the top of the page content, i.e. if it is not included into any other HTML element;

Rework WordPress Theme User Guide 21

• height – height of the section in pixels. Keep this parameter empty to make the height of
the section automatic, ti fix the section content;

• paddingtop, paddingbottom, paddingright, paddingleft – paddings of the section content

in pixels;

Parameters [gr-section-background]:

• image – url of the image to be a section background;

• color – section background color;

• parallax – specify this parameter to apply a parallax effect to the section background. The
value of this parameter specifies the parallax ratio, usually it is value from 0 to 1;

• overlaymaskcolor – color of the transparent mask applied to the section background;

• overlaymaskopacity – opacity of the overlay mask, it is a value from 0 to 1;

Section background may contain any custom content, like video, Google map, Revolution
slider and so on. To specify custom content, enter it between closing and opening gr-section-
background tags.

Parameters [gr-section-content]:

• container – specify this element to put the section content into container of theme default
width.

Example:

[gr-section fullwidth height=”400”]

[gr-section-background image=”http://thegravity.net/myimage.png” parallax=”0.5”
overlaymaskcolor=”#ff00ff” overlaymaskopacity=”0.8”]
[/gr-section-background]
[gr-section-content container]
This is a text inside the section!
[/gr-section-content]
[/gr-section]

FAQ:

Q: How do I put section background as video?

A: Just put the video shortcode inside [gr-section-background] and [/gr-section-background]

tags.

[gr-icon]
Shows just an icon.

Parameters:

• class – class represented an icon. Due to large amount of available icons, we recommend
to use built in Shortcode Generator to generate this shortcode.

Rework WordPress Theme User Guide 22

The following classes are available for the icons: http://fortawesome.github.io/Font-Awesome/
icons/ (please note, the icon class from this page should be used with the “fa ” prefix, like “fa
fa-upload”).

Example:

[gr-icon class=”fa fa-heart”]

[gr-iconbox]
Draws an Icon Box. Use build the shortcode use shortcode generator in visual editor.

Parameters:

• type – type of the icon box, it can be value from 1 to 4. Please check our DEMO site or
theme preview to check how each class is looking;

• icon – class of an icon to show in icon box, see [gr-icon] shortcode for more icon classes;

• iconcolor – specify the color of an icon in the icon box;

• title – enter the title of icon box.

The content of the icon box should be specified between opening and closing shortcode tags.

Example:

[gr-iconbox icon=”fa fa-heart” title=”Icon Box” type=”2”]Hello, I’m Icon Box[/gr-iconbox]

gr-columns] & [gr-column]

Makes a row with the columns inside.

Parameters for [column] ([columns] shortcode does not have parameters):

• type – specifies the size of column as a part of the row (columns of one-second, one-third,
one-fourth and one-sixth minimum column size are supported);

• borders – specify this attribute to show borders for the columns.

Example (a row with two columns):

[gr-columns]
[gr-column type=”1/2”]1st column content here[/gr-column]
[gr-column type=”1/2”]2nd column content here[/gr-column]
[/gr-columns]

[gr-gap]
Put a separator with the specified height.

Parameters:

Rework WordPress Theme User Guide 23

• h – height of the separator in pixels.

Example:

[gr-gap h=”100”]
Separator with the height of 100 pixels.

[gr-hr]
Put a horizontal separator line.

Parameters:

• type – type of the horizontal line, can be the following:

• any value – solid line;

• double – double solid line;

• dotted – dotted line;

• dotted double – dotted double line;

• width – width of the line in percent. Keep it empty to make the line fullwidth;

• align – align of the line, should be used if width parameter is not fullwidth. Can be the
following:

• left – line is left aligned;

• any value – line is centered;

• right – line is right aligned.

Example:

[gr-hr type=”” width=”50”]

Prints a solid horizontal line, 50% width of the container where it is located.

[gr-wpml]
Puts a list of languages that the current site/page supports via WPML plug-in. Note, shortcode
works only if the WPML Wordpress plug-in is installed and activated.

Parameters:

• type – type of the languages list, can be the following:

• dropdown – drop down list;

• horzlist – horizontal list;

• vertlist – vertical list;

• skipmissing – add this attribute to skip the languages that the current page is not
translated (otherwise all languages added to WPML plug-in will be shown);

• flag – specify this attribute to include images of the country flag for the languages;

• nativename – specify this attribute to include the name of the language in the native
language;

Rework WordPress Theme User Guide 24

• name – specify this attribute to include the name of the language on the currently
selected language.

Example:

[gr-wpml type=”dropdown” flag nativename]

Prints dropdown list with the languages, each language includes the country flag image and language
name in native language.

Standard media shortcodes [embed], [video], [audio]

Theme supports these standard Wordpress shortcodes as well, they can also be used as a part
of our shortcodes. For example, putting the video shortcode inside [gr-section-background]
allows to make a section with video background. Embed shortcode is mostly used to embed
the vimeo and youtube videos.

For more information check these links:

[embed] - https://codex.wordpress.org/Embeds

[video] - http://codex.wordpress.org/Video_Shortcode

[audio] - http://codex.wordpress.org/Audio_Shortcode

Rework WordPress Theme User Guide 25

JavaScript , CSS, Credits

bbPress - http://bbpress.org/
wooCommerce - http://www.woothemes.com/woocommerce/

Javascript Files
• jquery.caroufredsel.min.js - jQuery carouFredSel 6.2.1 - http://frebsite.nl/

• jquery.cookie.js - jQuery Cookie Plugin v1.4.0 - https://github.com/carhartl/jquery-cookie/

• jquery.fancybox.pack.js - fancyBox v2.1.5 - http://fancyapps.com/

• jquery.infinitescroll.min.js - Infinite Scroll - https://github.com/paulirish/infinite-scroll

• jquery.stellar.min.js - Stellar.js v0.6.2 - http://markdalgleish.com/projects/stellar.js

• classie.js - classie v1.0.0 - https://github.com/ded/bonzo

• imagesloaded.pkgd.min.js - imagesLoaded PACKAGED v3.1.4 - https://github.com/

desandro/imagesloaded
• isotope.pkgd.min.js - Isotope PACKAGED v2.0.0-beta.10 - http://isotope.metafizzy.co

• jquery.easing.1.3.js - jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

• jquery.fitvids.js - FitVids 1.1 - http://fitvidsjs.com/

• jquery.flexslider.min.js - jQuery FlexSlider v2.1 - http://www.woothemes.com/flexslider/

• superfish.min.js - jQuery Superfish Menu Plugin - v1.7.4 - http://users.tpg.com.au/j_birch/

plugins/superfish/

Fonts
Font Awesome - http://fortawesome.github.io/Font-Awesome/

Rework WordPress Theme User Guide 26

 Thank you.

Rework WordPress Theme User Guide 27