1. Installation - top

If you don't have a Wordpress installed, please check the url http://codex.wordpress.org/Installing_WordPress to learn how to install it.

Installing the Theme

  1. Place the pictree folder from the main download to the themes folder, which is in the wp-content folder in your wordpress installation (eg. /wordpress/themes). Upload the theme to your webserver.
  2. Login to your WordPress Admin-Panel.
  3. Go to the appearance tab on the main menu to the left. Click on Themes and activate the PicTree-Theme.
  4. When the theme has been activated come back to this documentation and read the following instructions.
  5. Alle Theme specific Changes will be made in our own PicTree Settings Panel.

2. Troubleshooting

Images or Thumbnails are not shown

Please check, if there is a folder named "/cache" in your WordPress theme folder for PicTree theme and its chmod is set to 777. If not, please create this folder on your server and set its permissions to 777. If your web-hoster doesn´t allow 777 permissions or if 777 doesn´t work, try 755 which sometimes solves the issue.

If this not fixes the problem, please open your timbthumb.php file and look for “MAX_FILE_SIZE” and increase this value.

Also see this link for further informations: http://www.der-prinz.com/images-displaying-solving-issues-timthumb-948

My navigation menu is not displaying and only "pages" is visible

Unfortunately, you have installed your theme incorrectly, this is why your navigation menu does not work as expected.

  1. Do not use WordPress Zip-Uploader. Themes from ThemeForest will not work with it.
  2. Do not upload all folders from your downloaded Zip-Package. Only the /pictree folder inside your downloaded zip Package is needed
  3. Only upload the /pictree folder from your downloaded zip direct to your /themes folder of your WordPress Installation
  4. Please take a closer look to this video how to install your WordPress Theme in a correct way: http://wiki.envato.com/buying/support-buying/solving-broken-theme-issues/

2. Galleries

As you can imaginge, this is the important part of your Theme. This is, why you bought it. So now lets go and add some Photos and Galleries with your greatest Images. We will create those Galleries with our custom post panel Photos on the left site.

I. Photography/Portfolio Page

First we need to create the Parent Page for our Galleries. We will need this page for our Navigation Menu later on. If there is a auto generated page called "Sample Page" or "About" delete this page.

  1. Search for "Add New" under the Pages tab.
  2. Add a new page with the title "Photography" or "Portfolio" or whatever you want to call this page. You can leave the content blank.
  3. Click on the Update/Publish button on the right top to save your page and make it visible on the front.

II. Create the Galleries

  1. Search for the Photos Tab in your Wordpress Admin Navigation and choose "Galleries".
  2. Add a Gallery called Portfolio or Photography or whatever you like to name your parent Gallery.
  3. Add more Galleries like Shootings, People, Cities or Traveling with the Gallery created before as Parent Gallery. Dont forget to add a description for your Galleries. It will be shown on the page as well.

After you are done, you should have a Gallery tree like below (you can see this at "Galleries" in the Wordpress Admin"):

III. Adding Photos to your Gallery

Now we are ready to add some Photos to your created Galleries.

  1. Go to Photos Tab in the Wordpress Admin Navigation
  2. Click on Add new
  3. Enter your title, description and a small excerpt for your Photo. The excerpt will be displayed as image caption in your slider or gallery. If you do not set a excerpt, the caption will automatically be hidden.
  4. Choose your Gallery on the right side. Allways remeber to choose the "Photography" or other parent Galleries as parent Gallery to ensure a clean sorting of your Photos.
  5. Now click on the link Set featured image on the right menu "Featured Image" and the Wordpress Media Gallery will open in a popup.
  6. Upload your images or choose an image, that you have uploaded before.
  7. Open the images details with a Click on the "Show" Link if the details are not visible and search for the link "Use as featured image" like shown below. Close the Media Gallery. Now the choosen image appeares on the right menu "Featured Image".
  8. Add some tags on the right side at Post Tags to your Photo post, which describes the Photo best.
  9. Now choose your Image Detail Settings for this Photo. Perhabs you want to open the Photo only in a Lightbox, or you want a detailed Page for this Photo, where your Description is visible and Visitors can leave some Comments? You can adjust this setting for each photo individually.
  10. Save/Publish your Image.

Your Image should now be shown on your homepage in the Image Scroller.

But remember: The Image-Scroller will only work with full features if the minimum number of images are added for the Scroller. So check your settings for the Scroller in the PicTree Settings Menu and add a minimum of images.

Goon and post some of your images like above. We will need them later for our Scroller.

IV. Adding Videos to your Gallery

You can also add Videos to your Gallery. Simple add the a Photo to your Gallery as explained in the step before. You only have to change the Type of the Media to display at the Image Details Settings to YouTube-Video oder Vimeo Video

V. Creating the Gallery Page

Now that we have created several galleries and photos, we now create the pages to display them.

  1. Search for "Add New" under the Pages tab.
  2. Create a Page for a Gallery you want to add to your Theme. For the proper, it is advantageous to name the page same as the galleries created before. So you can keep an overview. But you can also call the pages as you want. That's up to you.
  3. Add a description and a excerpt for this page, which describes the Gallery best.
  4. Go to the right panel and choose one of the Portfolio Templates as page template under the tab "Page Attributes".
  5. Perhabs you have noticed the "Gallery Options" settings below the "Description" Textarea on the left side. This will now be our friend to add a Gallery to this page. As you can see, there is acutally no Gallery available.
  6. You have to save your Page with a Portfolio Template before you can choose a Gallery. Save your Page now!
  7. Now if you take a look at our "Gallery Options" again, there is a Select-Field with our previously created Galleries. Choose the Gallery you want to Display on this Page.
  8. Save your work!

Your Gallery is now bind to the created Page and available for the Theme.

VI. Homepage Image Scroller settings

Have you created a few image posts? If so, then we can configure the Scroller.

  1. Go to PicTree Settings Menu
  2. Choose the Scroller Settings tab.
  3. Choose your categories to be displayed
  4. Setup your Image dimensions.
  5. Save your changes

VII. Adding additional Information

With update 1.1 you can add additional information to your photos like copyright, location and date.

These settings are made on the photo post option page under the description box. But remember, you have to activate the additional informations for a specific gallery on the page template itself.

VIII. Show additional Information for a gallery

The new update brings you additional Information fields for your photos as mentioned above. Now to have this informations display on a gallery page you have to activate them in the page template options.

  1. Go to Pages and choose the gallery page you want to edit.
  2. Activate the checkbox "Show additional informations like copyright and location for this gallery"
  3. Save your changes

Now your additional informations are shown on the choosen gallery portfolio page.

IX. Linking images to an external link

To link an image to an external page instead of linking to a lightbox or a project page your only have to choose "External Link" from your photo option page at "Image Detail Settings" and enter the URL of the external link.

A Click on the image now referes to the entered URL in a new Window.

4. Blog - top

You need to create a category and a Blog page to make the Blog on your Theme working.

If you do not want to create a Blog for Website, skip this point and continue to the next one.

I. Blog Page

  1. Search for "Add New" under the Pages tab.
  2. Add a new page with the title "Blog" or whatever you want to call your blog. Its your choice. But "Blog" as title for now should meet the claims.
  3. Go to the right panel and choose the "Blog Overview Template" as page template under the tab "Page Attributes". Without this setting, your blog page will not work correctly!
  4. Click on the Update/Publish button on the right top to save your page and make it visible on the front.

II. Creating the Blog Category

We need a Blog Category for Wordpress to know, where your Posts are related to.

  1. Go to the Categories page under the Posts tab
  2. Add a category called "Blog" as a main category without a parent category.

III. Setup your Blog category

Go to your PicTree Settings Menu and look for the General tab. Now choose your new Blog Category in the field Blog Category. Save your changes.

Important note: This is needed to ensure a correct display of some functions on your page.

Allways have in mind that while you are publishing your Blog-Posts, you should select category for the Blog. Otherwise your Blog-Post is not shown in your Blog.

IV. Adding a Blog Post

Adding a Blog post is nearly the same, as posting an image. The only thing is, that we do this at another place.

  1. Go to Posts Tab in the Wordpress Admin Navigation
  2. Theres a autogenerated post called "Hello World". Delete this one.
  3. Click on Add new
  4. Enter your title, description and a small excerpt for your Blog post.
  5. Choose the Blog Category and add a Featured Image like we did before at "Adding Photos to your Gallery".
  6. Save your Blog Post.

Your blog post will be displayed in the blog category on your page.

5. Theme Features - top

I. Contact Us page

PicTree brings you a "Ready to use" contact page Template. You only have to create the Page with the Contact Template and setup some Options.

  1. Search for "Add New" under the Pages tab.
  2. Add a new page with the title "Contact us".
  3. Go to the right panel and choose the "Contact Template" as page template under the tab "Page Attributes". Without this setting, your Contact page will not work correctly!
  4. Add some text to your page, if you want. It will be displayed over the contact form and will have no influence to the form.
  5. Click on the Update/Publish button on the right top to save your page and make it visible on the front.
  6. Go to the Options Panel of your PicTree Settings Menu in the left Wordpress navigation. Look for the Contact Us tab and enter your email-adress in the "Contact form email" field. This is the email adress, where contact request will be send to. Fill out all other Information you need. If you leave one Information blank, it will not be displayed on your Contact Page.

After that, your Contact Form is ready to use.

II. Change Color Scheme

You can choose between two different Color Schemes, Black and White.

  1. Go to PicTree Settings Menu, click on the Colors & Layout tab.
  2. Choose the "White Theme" or "Black Theme".
  3. Save your work

If you want to show your own logo, follow the steps below:

  1. Go to your PicTree Settings Menu and select the "Colors & Layout" Tab
  2. Search for the option Custom Logo.
  3. Upload your own Logo with a maximum width of 300px and a maximum height of 50px.
  4. Search for the option Custom Footer Logo.
  5. Upload your own Logo with a maximum width of 100px and a maximum height of 40px.

Thats it, your done. Your PicTree Theme has now your brand.

IV. Homepage Twitter

The Twitter Feed on your Homepage is controlled by a custom Widget. You can setup this widget in your Appearance > Widget Menu. Simple drag and drop the "Custom Recent Tweets" widget to the "Homepage Twitter" widget area and set the settings to your needs.

V. Social Icons Management

You can set up your social icons on the footer easily.

  1. Go to PicTree Settings Menu, click on the "Social Management" tab.
  2. Choose the social networks you want to display.
  3. Enter the URL of the choosen networks and save your work.
  4. Your social icons will be displayed in the footer section.

Please note: Only icons with a link will be displayed! If the link is not set, the icon is invisible!

6. Widgets - top

PicTree comes with some custom widgets for different uses - they can be found under Appearance > Widgets.

I. Custom Recent Tweets Widget

This widget shows your latest Tweets on the Homepage or in any other widgetised area.

II. Custom Recent Photo Posts

This widget allows you to show your latest Photo Posts.

III. Custom Taxonomy Terms

This widget shows Terms by Taxonomies. You can select the Taxonomy, change the sort order and the display type.

IV. Custom Flickr Stream

This widget shows your latest Flickr Stream. You can select the Number of Photos, change the sort order, change the type and add a custom Title.

7. Theme Files - top

I. JavaScript

This theme imports few Javascript files.

  1. jQuery library and jQuery UI - jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. SuperFish for creating the Drop-Down Menu
  3. My custom scripts (js/custom.js and js/custom.scroller.js)
  4. Few JS-plugins for smooth animations and functionality
  5. Most of the animation in this site is carried out from the customs scripts.

In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. Most plugins are packed, so you won't need to manually edit anything in the files.

You do not need to change any of this files or call them directly. Needed changes can be made in the integrated Wordpress PicTree Settings Menu. Changing these files on your own risk.

For detailed information to some of the scripts feel free to ask me via my user page contact form here.

II. PSD Files

There are no PSD Files included because the theme doesn't have any graphics that where needed to change for the page layout.

The only images that are included are social icons, some background images and the icons for the different presentation. There are also included some graphics for javascripts.

III. CSS Files and Structure

I'm using different CSS files in this theme. Few of them are needed for some JS-Styles. So do not change them whitout knowing what to do. There are also some CSS files to fix IE bugs.

The most important one is main layout CSS file with all major styles, like positioning, width and alignments. It is called style.css and is located in the main theme folder. Any major changes of layout should be done here.

Color changes for your Black or White Theme can be made in your-theme-directory/css/black.css and your-theme-directory/css/white.css.

Here is a short overview for the main style.css file:

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

8. Sources and Credits - top

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

9. Conclusion - top

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Alle Images used in the Online-Preview are not included in this Theme.

Follow me on Themeforest!

Cheers, Dennis Osterkamp