Photoshoot Documentation

PhotoShoot is a fullscreen Wordpress one page theme, best fit for creative and corporate portfolio websites.
The theme has a unique design, there are no third party galleries or widgets, all sections have been designed and coded for this template.

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: 1.0.0
Documentation Version 1.0.0
Created: 2012-11-01
Modified: 2012-11-01

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

Stylesheets

List of the stylesheet 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: home, portfolio)
reset.css Generic reset file.

JavaScript Files

Main JavaScript files for this theme:

Tag Description
main.js Main javascript file, handles the main functions of the theme (ex: menu behavior, AJAX page loading)
sections.js Handles all theme's sections behavior (ex: home section, portfolio).
PagesUtils.js Helper file to determine which section to initialize.

The theme comes with a graphics PSD file included which contains PSD sources for the theme graphic elements.

Please note that you can change thems's text color from Admin>Theme Options, however the theme also contains graphics (Ex: arrow buttons, ), 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/photoshoot/images

Preloader

You can generate a different color preloader here: Preloaders.net
Website main preloader ('preloader.gif') is located under the folder /wp-content/themes/photoshoot/images/
Lightbox preloader ('preloader.gif') is located under the folder /wp-content/themes/photoshoot/photoshootlightbox/

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 photoshoot.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/photoshoot/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 Photoshoot.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

Photoshoot 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 use the following plugin in order to regenerate the thumbnails according to Photoshoot needs: Regenerate Thumbnails
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).

Add Pages

In order to add content to your website first you have to add Pages, pages can be added from the Main Menu > Pages > Add new.
Each page must be assigned to a specific page template. You can choose a page template while you add a new page from the right menu (@see figure bellow).

Add Menu

After you have added pages you add the website menu, go to Main Menu > 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.

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 Photoshoot does not support multilevel menu.

Home Page

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Home Page' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add Homepage content through its page HTML editor (Please see shortcodes section to find out more about available shortcodes).

Content example (the following code will render the content as in the image above ):
[sk-italic-header]Lorem ipsum dolor sit amet consectetur adipsicing elit[/sk-italic-header]
Quisque at odio et metus molestie luctus non quis tellus. Pellentesque sed ante id tellus commodo cursus. Sed euismod auctor ligula vel dignissim. Nunc auctor erat sodales elit sagittis vitae ornare arcu accumsan. Aliquam orci arcu, rutrum cursus molestie ut, aliquam ac ipsum. Quisque at odio et metus molestie luctus non quis tellus. Pellentesque sed ante id tellus commodo cursus. Sed euismod auctor ligula vel dignissim. Pellentesque sed ante id tellus commodo cursus.
[sk-button url="http://showcase.sakurapixel.com/photoshoot_wp/site/#!/photoshoot_wp/site/?page_id=29" target="_self" align="alignright"]Portfolio[/sk-button]

5. Homepage also supports to add latest images from the galleries, in order to add galleries (recent work) on the hompage go to Main Menu > Homepage Options and select gallery settings for homepage

6. Add this page to the menu:
Go to Main Menu > 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

About Page

1. Create a regular page under pages (This page does not require a page template).
2. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
3. Add content (text/images) through the page HTML editor (Please see shortcodes section to find out more about available shortcodes).
4. Add this page to the menu:
Go to Main Menu > 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

Portfolio

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Portfolio' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add Portfolio content (small description) through its page HTML editor. The page title will show as the section title, the content will show as a small description above the portfolio items. Please see shortcodes section to find out more about available shortcodes.

5. In order to add portfolio items go to Main Menu > Portfolio > Add new. You will add portfolio groups, each group can have multiple images with description.

6. The title of each new portfolio post you add will be the title of the group. Ex: (Beauty & Fashion Gallery) See image bellow:

7. Add this page to the menu:
Go to Main Menu > 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

One Column Gallery

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'One Column Gallery' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. In order to add gallery items go to Main Menu > One Column Gallery > Add new.
5. Set the image by setting a featured image from the "Featured Image" panel on the right.
6. Add small description to the 'small description' field. This text will be displayed within the lightbox.
7. The title is displayed on the selected image.

8. Add this page to the menu:
Go to Main Menu > 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

Two Columns Gallery

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Two Column Gallery' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. In order to add gallery items go to Main Menu > Two Column Gallery > Add new.
5. Set the image by setting a featured image from the "Featured Image" panel on the right.
6. Add small description to the 'small description' field. This text will be displayed within the lightbox.
7. Add this page to the menu:
Go to Main Menu > 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

iGallery

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'iGallery' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. In order to add iGallery items go to Main Menu > iGallery > Add new. You will add images groups, each group can have multiple images with description.
5. Add this page to the menu:
Go to Main Menu > 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

Demo Reel

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Reel' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add Reel content (small description) through its page HTML editor. The page title will show as the section title, the content will show as a small description above the video.

5. In order to add the embedded video go to Main Menu > Reel Page Options.

6. Add this page to the menu:
Go to Main Menu > 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

News

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'News' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. In order to add news posts go to Main Menu > News > Add new.
5. Add this page to the menu:
Go to Main Menu > 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

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select 'Contact' as a Template.
3. From the right panel ('Featured image') set the featured image for this page (the featured image will be the page background).
4. Add Contact content through its page HTML editor (Please see shortcodes section to find out more about available shortcodes).

Content example (the following code will render the content as in the image above ):
[sk-medium-text]John Doe[/sk-medium-text]
[sk-small-text]professional photographer[/sk-small-text]

[sk-phone-text]012 345 6789[/sk-phone-text]
[sk-address-text]contact@photoshoot.com[/sk-address-text]

[sk-address-text]Address line 1, str. Generic, no.10,
LoremIpsum, CA[/sk-address-text]

5. In order to set contact page options (google maps, social links...) go to Main Menu > Contact Page Options.

6. Add this page to the menu:
Go to Main Menu > 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

Theme General Options

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

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

Button

Usage example: [sk-button url="http://themeforest.net" target="_self" align="alignright"]Button label[/sk-button]

Italic header

Usage example: [sk-italic-header]Header Label[/sk-italic-header]

Bold header

Usage example: [sk-bold-header]Header Label[/sk-bold-header]

Medium text

Usage example: [sk-medium-text]Text Label[/sk-medium-text]

Small text

Usage example: [sk-small-text]Text Label[/sk-small-text]

Phone text

Usage example: [sk-phone-text]Phone Label[/sk-phone-text]

Address text

Usage example: [sk-address-text]Text Label[/sk-address-text]

Youtube video

Usage example: [sk-youtube id="0zG_lckuzbo" width="650" height="360"][/sk-youtube]

Vimeo video

Usage example: [sk-vimeo id="40831614" width="650" height="360"][/sk-vimeo]

Soundcloud

Usage example: [sk-soundcloud url="http://...url" auto_play="false" color="fff79a"][/sk-soundcloud]

Shordcode usage example (home page)
Shordcode usage example (contact page)