TheRoad Documentation

The Road – a carefully crafted theme that lets you display your work the clean, fancy way. Some of the theme’s strong points are the awesome parallax effect, the sortable masonry gallery, the clean designed sections . The responsive behavior allows the content to easily adjust for any screen resolution in order to produce the optimal user experience for different use cases and environments, all built into one website.

If you have any questions, please use our profile contact form on Envato ( SakuraPixel ).
We will try to answer all questions within 24 hours.Thank you for purchasing our theme.


Author: SakuraPixel
Contact: SakuraPixel
Author URL: SakuraPixel
Item URL: SakuraPixel/Portfolio
Current Version: 2.3.0
Documentation Version 1.1.0
Created: 2013-01-31
Modified: 2013-04-29

NOTE!
You can change theme text's color from Admin > Theme Options.
In order to change theme's graphics please see Photoshop section.

Stylesheets

Main stylesheet files used for this template, you can find more information opening each file:

File Name Description
main.css Styles for general elements for the template (ex: logo, menu).
sections.css Styles for specific theme sections (ex: portfolio)
reset.css Generic reset file.
buttons_style.css Theme's buttons style.
wp_utils.css Handles blog pagination and comment's style.

JavaScript Files

Main JavaScript files for this theme:

Tag Description
js/main.js Main javascript file, handles the main functions of the theme (ex: menu behavior, AJAX page loading)
js/webisite/sections/* Files for handling theme's sections (ex: Portfolio, Contact).
js/menu/MenuHandler.js Handles menu behavior.
js/main_preloader/main_preloader.js Handles preloading assets at start.
js/logo_controler/LogoControler.js Handles responsive logo behavior.

The theme comes with a graphics PSD file included, which contains PSD sources for the graphic elements that you may need to customize.

Please note that you can change thems's colors from Admin>Theme Options, however the theme also contains graphics (Ex: arrows), you can chnage these graphics colors to fit your needs. You can save the new graphics within images folder (please use the same names - override existing icons).
If you already have installed the theme the images folder can be found within the theme's folder.
Ex: yourdomain.com/wp-content/themes/theme_name/images

Preloader

You can generate a different color preloader here: Preloaders.net. The preloader that the theme is using is 25x25px.
Lightbox preloader ('preloader.gif') is located under the folder /wp-content/themes/theme_name/images/,

1. Install Theme

Brief information about how to install your WordPress theme from scratch

Unzip the main files (the file that you have downloaded when you have purchased the theme). The theme installer is 'theme_name'_installer.zip. NOTE! - This is the only file that you should use to install the theme.

Log in to your Wordpress Admin Panel, go to Appearence > Themes > Install Themes > Upload. Upload the zip file that was discussed in the above topic.

Once you have uploaded the theme, it automatically installs to your wordpress. Click the Activate button to activate the theme.
Please read the usage documentation below.

2. General Usage

Information about adding pages and different content type.

× Important!
Reading settings
Before adding content, go to Settings > Reading and make sure you have checked 'Front page displays' as a 'Your latest posts'. In order to change pages order/set up home page please read bellow @Add Pages.


How to translate

The translation file is located within languages folder (/wp-content/themes/theme_name/languages). You can edit the .po file using POEdit - use the translation field to make replacements.

After you have installed PoEdit double click on the default_textdomain.mo (it should open with Poedit). From the file menu, save file with your language name e.g nl_NL.po. It will generate both a .po and .mo file for your translation. Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

Thumbnails size

TheRoad uses thumbnails of different sizes for different sections. The theme creates these thumbnails when you upload photos to Library from your computer.
If you already have photos within your library from a previous theme you can regenerate the thumbnails according to TheRoad needs with Regenerate Thumbnails Plugin.
After you have installed 'Regenerate Thumbnails' plugin go to Tools > Regen Thumbnails and click Regenerate (this could take a while depending of your library content).

Theme options

Before adding content make sure you edit the theme's options. Go to Admin > Theme options

Add Pages

In order to add content to your website first you have to add Pages, pages can be added from the Admin > Pages > Add new.

Page template

Some pages must be assigned a specific page template (ex: Portfolio), regular pages don't.
You can choose a page template while you add a new page from the right menu (@see figure bellow).

NOTE! Click on the image to see the full size

You can set specific options for each page (@see figure bellow).


Add Menu

Create the menu

After you have added at least one page you can start add it to the website's menu, go to Admin > Appearence > Menus
Add a new menu from the menu panel, save it, than select the created menu from the "Theme Location" panel and save it.


Add pages to the menu

You can add pages to menu from the Pages panel, than you can change menu items labels or order from the menu panel.
Please note that this theme does not support multilevel menu.

NOTE! Click on the image to see the full size

Home page

The Road is a parallax theme which handles the home page a little bit different, therefore the home page is predefined (it is not added from the admin>add page). You can edit homepage settings from the Admin>Theme Options, you can also add social widgets to the "Homepage Social Sidebar".

NOTE! Click on the image to see the full size

Portfolio

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Portfolio Template' as a Template.
3. Edit page specific settings (ex: colors, background if needed, overlay...).

4. In order to add portfolio items go to Admin > Portfolio > Add new.
5. Portfolio items are grouped into categories, each portfolio item must be assigned to at least one category, you can add or assign a category from the right menu (@see image bellow)

NOTE! Click on the image to see the full size

6. Set a featured image for the item, see image above (Featured image will be used as portfolio preview and portfolio thumbnail). 7. Add Additional images to the portfolio item (it will be displayed on the item's page @see images bellow)

NOTE! Click on the image to see the full size

8. Each portfolio item has extra settings on it's page, you can edit those to fit your needs (@see image bellow).

NOTE! Click on the image to see the full size

9. Add this page to the menu:
Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Blog page

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Blog Template' as a Template.
3. You can add Blog posts from Admin>Posts>Add new.
4. You can set blog settings from the Theme Options page.
5. Add this page to the menu:
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Contact page

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Contact Template' as a Template.
3. Add Contact content through its page HTML editor.
4. You can set contact page's settings from the Theme Options page (@see bellow).
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

NOTE! Click on the image to see the full size

Recent projects page

Recent projects page is presented in an interactive way, so we decided not to include it as shortcode but as a page.

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Recent Projects Template' as a Template.
3. Add this page to the menu:
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

Please note that first you need to add projects to the portfolio.

NOTE! Click on the image to see the full size

Theme General Options

In order to set theme general options (logo, lightbox behavior, colors...) go to Admin > Theme Options.

NOTE! Click on the image to see the full size

Shortcodes

Shortcodes allows you to easily add specific content on your website through the editor.
Ex: The following shortcode will generate a theme specific button: [button]Button Label[/button]
The following shortcodes are available for this theme:

Full width column

Usage example:
[full_width]Your content here[/full_width]

One half column

Usage example:
[one_half]Your content here[/one_half]
[one_half last="yes"]Your content here[/one_half]

One third column

Usage example:
[one_third]Your content here[/one_third]
[one_third]Your content here[/one_third]
[one_third last="yes"]Your content here[/one_third]

Two thirds column

Usage example:
[one_third]Your content here[/one_third]
[two_thirds last="yes"]Your content here[/two_thirds]

Header/Title

Usage example:
[header color="#EF00FF"]Header title here[/header]
or
[full_width][header]Header title here[/header][/full_width]

Phone

Usage example:
[phone tel="+60302248094" color="#ec761a"]phone number[/phone]

Email

Usage example:
[email mailto="your.email@yourdomain.com"]Email me[/email]

Button

Usage example:
[button color="orange" href="http://someurl.com"]Button label[/email]
or
[button href="http://someurl.com" target="_blank"]Button label[/email]
or
[button href="http://someurl.com" target="_blank" align="alignright"]Button label[/email]

Please note that the following button colors are available: orange, red, blue, green, black, grey

Youtube

Usage example:
[youtube id="videoID"]
or
[youtube id="videoID" width="100%" height="400"]

Vimeo

Usage example:
[vimeo id="videoID"]
or
[vimeo id="videoID" width="100%" height="400"]

Soundcloud

Usage example:
[soundcloud url="http://audiourl"]
or
[soundcloud url="http://audiourl" width="100%" height="75" color="ec1c4d"]

Skills box

Usage example:

[one_third]
                                                                                                        
[skillsContainer height="400px"]
                                                    
[skill percent="62" color="#e2c7d5" left="-20px" top="-10px"]brand & identity[/skill]
                                                    
[skill percent="95" color="#c3c08b" left="85px" top="80px"]web design[/skill]
                                                    
[skill percent="70" color="#abd9e6" left="-20px" top="140px"]interface design[/skill]
                                                    
[/skillsContainer]
                                                    
[/one_third]                                                    
                                                

Pricing box

Usage example:

[one_third]
                                                    
[pricing_table_box title="consulting" price="75" currency="$" plan="month" buttonText="Choose Plan" buttonColor="orange" buttonurl="http://themeforest.net/user/SakuraPixel/portfolio"]
Lorem Ipsum, text content here.
[/pricing_table_box]
                                                    
[/one_third]                                                   
                                                

Team member box

Usage example:

[one_third]                                                    
"image here"[team_member_name color="#5e5a62"]Laila Doe[/team_member_name]
[team_member_position color="#5e5a62"]29,  Art Director[/team_member_position]
[team_member_about color="#5e5a62"]Lorem ipsum, about...[/team_member_about]
[/one_third]                                                  
                                                

NOTE! Insert a team member image from within the editor (on the left of team_member_name and align it to the left).

Landing page text

Usage example:

[landingPageHeader1 align="center"]typography[/landingPageHeader1]

[landingPageDefaultText align="center"]- at its best -[/landingPageDefaultText]

[landingPageHeader2 align="center"]is a visual form of language[/landingPageHeader2]

[landingPageHeader3 align="center"]linking timelessness and time[/landingPageHeader3]                                                 
                                                

Client box

Usage example:

[clientbox]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[/clientbox]                                                
                                                

Inner link

Please note that page 0 is the homepage

Usage example:

[sk_inner_link page="3"]Go to page 4[/sk_inner_link]