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


Photography template

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


Photoes V 1.2 update


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


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:

    /* ----------------------------------------------------------------------------


    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.


    The slider shortcode

    [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]

    [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/