1. Start
  2. Installation
  3. Recomanded Wordpress plugins
  4. Importing the data (make your site look like the demo site)
  5. Setting up the home page
  6. How to use the theme
  7. Customize the theme via the Theme Customizer - NEW
  8. Custom Sidebars
  9. HTML Structure
  10. CSS Files and Structure
  11. JavaScript
  12. PSD Files
  13. Sources and Credits
  14. Shortcodes

Photoes

Photography template


Created: 10/30/2012
latest Update: 10/30/2012
By: tagDiv
Email: contact@tagdiv.com

 

Photoes V 1.2 update




FAQ

What image sizes can I add to the galleries?

Depending on the image orientation you select, the images have to be the following size:
for landscape: 800×500 px
for portrait: 370×500 px
for square: 500×500 px



Can I upload custom sized images?

The theme only supports the three sizes mentioned above, to upload custom sizes, please consider adding some padding to the picture, check out our demo: http://tagdiv.com/theme/photoes4/category/photoes-galleries/cropped-photos/



Quick start guide















Installation


Upload the theme

Upload the theme folder (photoes) via FTP to your wp-content/themes folder.

You can also install the theme via WordPress admin. Go to the Appearance -> Themes panel, choose Install Themes, click Upload and choose the photoes.zip file.

Activate the theme

Once you have uploaded the theme, you have to activate it in Appearance -> Themes panel.

If you have any troubles with the theme installation, try to read the WordPress documentation.

Recomanded Wordpress plugins


  • Contact Form 7 - download (this one is usefull if you want to integrate the contact forms)
  • jQuery Lightbox For Native Galleries - download
  • SyntaxHighlighter Evolved - download (if you need sourcecode areas )
  • Importing the data (make your site look like the demo site)


    You can load our sample content into your new website, which will help you to learn how to do certain things with Photoes Theme. The sample content file resides in the 'sample content' folder. To load it into your WordPress installation you have to install the WordPress Importer plugin. You can do this by going to the Tools -> Import WordPress panel and clicking WordPress. Once you have this plugin installed, go again to the Tools -> Import panel, click WordPress, choose the sample content file and click Upload file and import.

    Once you have imported the content file, you have to set some options which can't be imported into the WordPress. Go to the Appearance -> Menus panel, pick the Header from the Header Menu dropdown list and click Save Menu button.

    Setting up the home page


    Video tutorial:

    quick steps:

    The homepage is a simple page that has the following structure:

     

    Seting the new created homepage as the wordpress index page

    By default the Photoes Theme home page contains the latest blog posts. You must to set up a static page, under Front page select your homepage page, for more information please read the Creating a Static Front Page article in the official WordPress documentation.

    How to use the theme


    Video tutorial

    A. How to make a image gallery:

    1. Create a new post.
       
    2. The title of the post is the title that apears on the photo on gallery.

       
    3. Select a category.

       
    4. Make sure the gallery is a child of photoes-gallery (only then the theme will load the gallery skin)

       
    5. Picture format settings. Here we have three options. (Landscape, Square, Portrait)

       
    6. Title color. Here is the color of the title that apears on the photo.

       
    7. 3d object. From here you can select from a defined library a 3d object to apears on the floor underneath the picture.



       
    8. On the featured image is the photo you like to put on gallery.

    B. How to make a video gallery:

    To make a video gallery or if you want to put a video on a photo gallery, just make a new post like above and in body of the post just paste a youtube link.

    Change the post format to video.

    Customize the theme via the Theme Customizer


    How to open the theme customizer:






    Blog settings:






    Customizing the floor:






    Global frames (you can also change them per image):






    Setting up the lights:






    Upload your custom logo:






    Change the global color (lines, logo, links, buttons etc):






    Uploading custom wallpapers:

    Custom Sidebars


    You can create a custom sidebar for every page or post. Click on Sidebars from Photoes menu.


    Here you can create custom sidebars.

    Go to edit a post or page and under the Post settings select the sidebar you want to use.

    To add content to the sidebar go to Appearance -> Widgets.

    HTML Structure


    This theme is a fixed layout with two columns. The theme is based on bootstrap so it's compatible with the twitter bootstrap grid.

    HTML Structure

     

    CSS Files and Structure


    All the photoes css is located in photoes/css. Each section of the file is well documentated.

    A main section is marked like this:

    /* =======================================================================================================

    Name : Homepage template
    File : page-home.css

    ======================================================================================================= */

    A subsection is marked like this:

    /* ----------------------------------------------------------------------------
    lighting
    */

    JavaScript


    1. jQuery - imported from wordpress
    2. All the library that the theme uses are in /external - js and css
    3. site.js - the themes custom js

    PSD Files


    I've included the following psds with this theme:

    1. gallery.psd - PDS layout of the gallery page

    Sources and Credits


    I've used the following images, icons or other files as listed.

    Shortcodes


    The slider shortcode

    [slides]
    [slide caption="Commercial photography" url="category/commercial/"]http://path to image[/slide]
    [slide caption="Art gallery" url="category/art/"]http://path to image[/slide]
    [slide caption="Architecture photography" url="category/architecture/"]http://path to image[/slide]
    [/slides]

    [slides] [/slides]

    [slide caption="" url=""]path to image[/slide]

    See more details about this shortcode on the online doc.

    More shortcode

    plase visit the online documentation and demo for all the shortcodes: http://tagdiv.com/theme/photoes/alerts/