“PureVISION” WordPress Theme Documentation by “Andon” for theme v1.8.0

PureVISION Theme Logo

Created: 27/01/2011
By: Andon
Email: use my ThemeForest profile page

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my ThemeForest profile page here. Thanks so much!

Licensing Terms: Please be advised, in order to use this theme in a legal manner, you need to purchase a separate license for each domain you are going to use the theme on. A single license is limited to a single domain/application.
For more information please refer to the license included with the theme or Licensing Terms on the ThemeForest site.

Table of Contents

  1. Installing the Theme
  2. Recommended Plugins
  3. Front Page
  4. Front Page Sliders
  5. General Options
  6. Portfolio Section
  7. Blog/News Section
  8. Contact Page
  9. CSS Files and Structure
  10. Additional Information
  11. PSD Files
  12. Font Settings & Custom Colors
  13. Sources and Credits

A) Installation - top

To install the PureVISION Theme you need WordPress 3.0 or later.

IMPORTANT: Make sure you unzip the downloaded file from ThemeForest first (DON'T upload it to your server yet). The content of this file contains the actual theme zip file called "purevision.zip". This is the theme file. Now, to install the theme follow one of the following two methods:

  1. Upload the purevision.zip file through the WordPress admin backend (This will ONLY work if the server that hosts your website allows upload limits greater than 6 MB. Please note, most hosting providers have only up to 2MB file upload limit):
    upload method 1
  2. Method 2, unzip the purevision.zip and upload the extracted purevision/ folder to <wordpress install directory>/wp-content/themes/ with your favorite FTP client so that the structure looks like:/wp-content/themes/purevision/.

Once the upload is complete go to the WordPress administrator backend and activate the theme (the theme should appear now under Appearance --> Themes)

activate theme

The theme's options page should appear now near the bottom of the sidebar under the name: PureVISION Options:

purevisions options menu

IMPORTANT: Once you've installed the theme successfully you will need to install some recommended plugins (please refer to the next section: Recommended Plugins) necessary to get the most functionality for the theme.

The PureVISION theme has been prepared to work with the following plugins to enhance its functionality. The theme will function without these plugins, however to get the most out of the theme in terms of user experience I strongly recommend installing.

Recommended Plugins:

Optional Plugins:

C) Front Page - top

Without any content the Front Page will only display the default slider and the footer.

To get some content into the Home page go the admin backend Appearance --> Widgets and drag-and-drop widgets to the Widget Areas associated with the Front Page. Those are:

home page widgets

For example, if you would like to add some text to a Widget Area, drag-and-drop a Text Widget, put some text into it, save it, go to the Front page of the site and Refresh to reflect the changes. The above listed widget areas will automatically re-size to extend the full width of the page. Only the "Home Page Column 1" has the option to stay fixed width. You could set that under the PureVISION Options -> General Options -> Home Page Column 1. By default fixed width for "Home Page Column 1" widget area is disabled. The idea behind this options is that in some cases you might want to have this widget area to serve as a left sidebar on the home page, or display the latest posts in it, etc. and use the remaining space for wider content, I'm sure you could put your creativity to good use here.

For your reference, the "Home Page Before Content" wigdet area in the theme's demo site, for instance, I used a Text widget without a title, and I used some inline styling to get the look I wanted for that widget area. I have also provided the code used in the demo in the Get the Code page.

D) Front Page Sliders - top

The PureVISION theme comes with five sliders: Flashmo (Flash based), Piecemaker (Flash based), Piecemaker 2 (Flash based), Cycle 1 (full width image) and Cycle 2 (smaller image with text and button). The three sliders could be configured from the theme's options page, for that go to PureVISION Options --> Front Page Sliders.

current slider

  1. Flashmo Grid Slider: Most of the settings are self explanatory from the options page, feel free to try out various combination of Flashmo Grid Slider settings to get the desired slicing and transition effects. For best results size your images 940 x 400px. You can configure transition effects for each slide individually:

    flashmo grid slider options

  2. Piecemaker Slider: Most of the settings are self explanatory from the options page, feel free to try out various combination of piecemaker settings to get the desired slicing and transition effects. For best results size your images 940 x 360px, however bigger and smaller sizes would also work. Just make sure that you update the width and height fields under the piecemaker's settings to match your slides' exact size. Use the "Browse" for each slide to upload your images. After a successful upload only the file name will be displayed in the field above the "Browse" button. Do NOT use this field to enter entire image path or URL. Another important note I should mention is about where the images are uploaded. Because of the nature of the Piecemaker slider, the images can only be uploaded in one location. This is because the relative path to the images has to be specified in the Flash file before it's saved to generate the final SWF file. The location I chose for the slides to be uploaded in is under <themes-directory>/purevision/sliders/piecemaker/images/. You don't need to worry about the location, the upload is done automatically. This is just for your reference in case that you need to get to the images manually.

    pm slides

    3. The Info or Description text uses a special formal for formatting text. The default text should serve you as a good example as to how to create paragraphs, line breaks and links. You format the info text to full extent with the "piecemakerCSS.css" file located under <themes-directory>/purevision/sliders/piecemaker/images/. For additional documentation on the Piecemaker please refer to its website here.
    Please note: I have made a change to the slide info text formatting in regards to the "Ӂ" character used with the Piecemaker as described in the documentation on their website. In your text use "special_break" without the quotes instead of the "Ӂ" to avoid problems with non UTF-8 installs of WordPress as reported by some users. For example to insert a line break use the following code: 
    <break>special_break</break>
  3. Piecemaker 2 Slider: Most of the general slider settings are self explanatory from the options page, feel free to try out various combination of piecemaker settings. For best results size your images 940 x 360px. The Piecemaker 2 slider compared to the Piecemaker slider allows for the addition of not only images but also Flash and Video. What is important to understand that the Flash files supported have to be SWF files. The SWF files must be ActionScript 3 and Flash CS4 or above to work with the native Flash 3D engine. The files have to be hosted on the same server as the site using them.
    According to the Piecemaker 2 documentation the accepted file formats for Video are MPEG4 width H.264 Codec, as well as F4V and FLV. Inserting a YouTube or Vimeo link will not work, you will have to save the actual file as one of the above supported formats and then upload it to your site, reference the link to that file and that should do the trick. The files have to be hosted on the same server as the site using them.
    The Slide Text can hold a description text, which can be formatted with simple HTML tags. Which HTML tags are supported, is determined by the piecemaker.css file. Per default you can use <h1>, <p>, <p-italic>, <a>. But you can add and specify as many tags as you want, for example different headline types. If you want to use different fonts, you will have to make sure that you embed these fonts in the Flash file. If you don't add any text to the Slide Text field, no info text appears.

    piecemaker 2 slides

    Transitions: You can add as many transitions to the Piecemaker 2 as you want. These transitions will be started in the order they are specified below. This order is entirely independent from the order of the slides above. Once the last transition is reached, it starts over again with the first transition. Please refer to the Piecemaker 2 Options page in the theme's backend where you will find more information on how the transitions work. You can drag-and-drop transitions to arrange their position as well as add new ones and delete them:

    pm2 transitions

  4. Cycle 1 Slider: With the Cycle 1 slider you can use the automatic image uploader or you could specify a URL or path to your images. Either way it should be fine. Slide image dimensions: with frame enabled (default state) image dimensions are 914px by 374px (width by height). Without the frame image dimensions are 940px by 400px. Depending on which option is selected, create and upload images with the corresponding dimensions for optimal quality.
  5. Cycle 2 Slider: The image size is FIXED to 476px by 287px (width x height). If you use a larger image then anything outside 476px by 287px area will not be visible. In the slide text field you could use plain text or some HTML, I have also made sure that you could use the typography list styles included with the theme (see theme's typography). The button will only display if a link is inserted in the Link field and the link will be automatically applied to the button. You can also choose from 'light' and 'dark' button styles.

    cycle2 slide options

E) General Options - top

"A Picture's worth a thousand words...":

general options

Custom Logos: Using the "Top Area Height" setting you can re-size the top area of the site to accommodate your custom logo size. Depending on your logo, you might have to nudge the slogan position a bit to fit perfectly with the logo. Use the Slogan Position fields for that.

Excerpts: The Excerpt option will modify the excerpts length globally; however it will NOT overwrite the custom excerpt from a post whenever entered by user. Another important note is that you could add a "more" link to an excerpt by appending "[...]" without the quotes:

excerpt-1

F) Portfolio Section - top

To setup Portfolio Section(s), you have to create a new page, e.g. Portfolio, or Videos. As you have the page open for editing, look in the right sidebar under Attributes and choose one of the available portfolio templates:

portfolio template

Save the page(s) and go to PureVISION Options --> Portfolio Section and follow the instructions there:

portfolio options

As described in the image above, you have to create a Category that will be a parent to hold the portfolio descendant categories. You can call that category whatever you like, just make sure you select it from the dropdown menu as shown in the image above to assign it to a respective page with portfolio template. Once you've setup your Portfolio category and descendant categories (subcategories) create some Posts and make sure you assign them to any one or multiple categories belonging to a Portfolio category or descendant categories (WordPress will hide a category if it's empty, that's why it's important to have at least one Post assigned to that category). At this point you're almost done, one more thing would be the option to get the images to show as thumbnails. There are several ways to accomplish that.
One and easiest would be to use the "Get The Image" Plugin. This plugin will greatly simplify the task of grabbing the thumbnail images for your Portfolio items.
It was designed to make the process of things such as adding thumbnails, feature images, and/or other images to your blog much easier, but it's so much more than that.

If you haven't already installed the Get The Image plugin (see Recommended Plugins section above), you can download the plugin here and install it:
  1. Unzip the file.
  2. Upload get-the-image.php file to your wp-content/plugins folder.
  3. Activate the plugin on your Plugins page.
What this plugin will do:
  1. Looks for an image by custom field.
  2. If no image is added by custom field, check for a post image (WordPresss 2.9+ feature).
  3. If no image is found, it grabs an image attached to your post.
  4. If no image is attached, it can extract an image from your post content.
  5. If no image is found at this point, it will display a default image "Not Available".

If you prefer to use the custom field method add a new custom field named: portfolio_item_thumb. In the Value field, you’ll need to add the URL path to the image. Example: http://www.yousite.com/wp-content/uploads/2011/01/image-file-name.jpg

For the Preview image or video or flash of your portfolio item you can use a custom field portfolio_item_preview. Here's a full list of the available Portfolio section custom fields:

  1. portfolio_item_thumb (this is the item's thumbnail image)
  2. portfolio_item_preview (this is the item preview image/video/flash)
  3. portfolio_item_description (this is the item description text)
  4. portfolio_item_preview_title (this is the item capture text shown underneath the preview item)
  5. portfolio_item_link (which allows to link directly from the thumbnail to another page or site rather than displaying a preview image)
  6. portfolio_item_link_target (use this custom field to open the link in a new window, for that set the value field to "_blank" without the quotes)
  7. portfolio_item_image_attachments (use this option to pull all the images attached to a single post to the Portfolio, example value: 'yes' without the quotes)
  8. portfolio_item_offset_image_attachments (use this to skip the number specified of image attachments, example value: '0' or '1' without the quotes)

uploading images

Note: The Custom Fields' names are case-sensitive.

To pull all images attached to a single post to be added to the portfolio you will need to use the following two custom fields:

portfolio post attachments

Use the custom field portfolio_item_image_attachments with value 'yes' (without the quote). Optionally you can offset the number of images to be pulled from the post by specifying the custom field portfolio_item_offset_image_attachments and specify any number as value. Optionally you can disable the linking of Portfolio page items when opened with prettyPhoto lightbox, the option for this is located under the theme's "Portfolio Section":

do not link adjacent items in portfolio

The Post's title could be positioned either above or below each thumb. This is convenient in case that you have really long titles which could push the thumb image down a bit and misalign the thumbs horizontally. In this case the solution would be to place the titles below the thumbs.
You cold also add a "Read More" button or list styles from the theme's typography by using shortcodes or plain HTML.

The Posts used to hold each individual Portfolio item have a sidebar when viewed in the browser as posts. The sidebar displayed could be changed to be either left or right side position. You can set the position from the PureVISION Options --> Portfolio Section. Also the sidebar could be customized further by adding various widgets to it from Appearance --> Widgets and drag-and-drop widgets into the "PortfolioSidebar" widget area like so:

Portfolio Widgets

As shown in the first image above in this section the date, postmetadata and the comments could be excluded from the items post layout.

G) Blog/News Section - top

To setup a Blog or News Section, create a Page called Blog or News or whatever you would like to call it, give it just a title and no content, and assign the template "Blog page" to it like so:

Blog Template

You can also change the sidebar position for the Blog pages to be either left or right. You can do that from the PureVISION Options --> Blog Section

To customize the Blog pages' sidebar, go to Appearance -> Widgets and drag-and-drop widgets you desire into the "BlogSidebar" widget area, here's an example:

Blog Widgets

By default the blog posts displayed under the Blog section will exclude all posts that are in some way related to any of Portfolio section(s). If you would like to include them uncheck the "Exclude Portfolio(s) from Blog" option.

blog section

By default the Blog section will display the posts with short excerpts and a "Read more" button. However to show regular post content (not the excerpt) uncheck the checkbox "Show Excerpt" shown in the image above to accomplish this. To add a Post specific image use the Custom Field post_image (case-sensitive) to specify the URL to the image (see below for example). The theme will re-size the image you specify 580px by 181px. Here's an example of a post with custom excerpt and a post image:

blog image

H) Contact Page - top

To setup a Contact page, create a Page called Contact and assign the template to it called "Contact page":

Contact Template

The content you enter under the Contact page will always show first in the page.

You can setup business contact information under PureVISION Options --> Contact Page, that will be displayed in a table-like nicely formatted way, the configuration for that and other options could be seen here:

Contact Page Options

The bottom part of the Contact Page Options allows you to enable ReCAPTCHA for extra security. To use ReCAPTCHA you must get an API public and private key from http://recaptcha.net/. For the rest follow the instructions on the screen:

recaptcha

For more information on how ReCAPTCHA works please visit http://recaptcha.net/

The Contact Page template comes with its own sidebar called ContactSidebar. To add Google Maps in the sidebar use the PureVISION: Google Map widget. This widget displays a location map without the need to have a Google API Key.  Please, view the images below for further instructions as to how to use this widget:

google map widget 1 of 2

Now set the width to maximum 280 and the height could be as long as you like. Then get the code and paste it into the PureVISION: Google Map widget:

google map widget 2 of 2

I) CSS Files and Structure - top

This theme has been implemented as a fixed width layout with the 960 Grid System. The full width of the template is 960px. For more information as to how the 960 Grid works, visit the 960 Grid System website.

All CSS files are located in the <themes-directory>purevision/styles/ sub-directory. The CSS files are included in the <head> via my_init_styles() function located in the functions.php.

All JavaScript are included in the <head> via my_init_scripts() function located in the functions.php.

The directory common-css/ and common-images/ stores all the css and images that apply to all styles and colors. Most of the 960 Grid System CSS files are in that directory.

 

J) Additional Information - top

More information and examples could be found at the PureVISION demo site.

For support check out the theme's own Support Forum. You should be able to register yourself with the Support Forum HERE.

Typography and Shortcodes examples could be found under the Features menu on the demo site.

K) PSD Files - top

In the PSD_files.zip I've included sub-directories containing all the PSDs necessary to produce the corresponding theme styles.

All PSD files contain slices of the required images. In Photoshop you just have to go File --> Save for Web & Devices... select the slices you'd like to generate (Shift+click to select multiple slices), hit "Save", at the next "Save Optimized As" dialog box under Slices dropdown select "Selected Slices" and "Save".

L) Font Settings & Custom Colors - top

Choosing fonts for your website using the PureVISION theme is rather intuitive. I've added Google fonts as an alternative to Cufón fonts. One of the advantages of using Google fonts is that the actual fonts are served from an online directory the first time the users browser requests them and then cached locally. This eliminates the requirement to have the fonts available on the user's machine in the first place. Another advantage of Google fonts is that they are not JavaScript dependent and they are selectable as opposed to non-selectable for Cufón fonts. As new fonts are being added by Google to the online directory I will be updating the theme's list of fonts over time.

google fonts

The Custom Colors is a very powerful feature of the PureVISION theme. It allows you to customize the colors of all elements from backgrounds, links, text and menu links by section. Many of the theme's elements are designed with certain opacity so that no matter what color the background they will stay visible.

custom colors

In addition, you will be able to save your custom color schemes that you create for future use, especially if you like to experiment with colors or like to change the look and feel of your site frequently..

custom colors admin

M) Sources and Credits - top

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

Fonts used:

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.

Andon

Go To Table of Contents