“Photoform” Documentation by “UpCode” v1.0


Created: 12 Mar 2014
By: UpCode

Dear customer, First of all, thank you for choosing our themes and purchasing one of our Premium Themes – your choice is greatly appreciated! Current version of Photoform has been developed for WordPress 3.6 and above and is not backwards compatible with older versions of WordPress. Photoform has been tested in all modern browsers: IE 9, Opera, Firefox, Safari and Chrome. Photoform is a very simple and useful Premium Theme, especially for people who need a really cool looking website / blog. If you have any questions that are beyond the scope of this help file, please feel free to use our support desk: http://redcodn.com/support. Thanks!

Table of Contents

  1. Installation
  2. CSS Files and Structure
  3. JavaScript
  4. Theme Options
  5. Setting up frontpage
  6. How to create posts
  7. Galleries and gallery layouts
  8. Menus
  9. Page layouts
  10. Sidebars
  11. Post formats
  12. The plugin
  13. WooCommerce Support
  14. Support
  15. Sources and Credits

A) Installation - top

To install this theme you must have an operating version of WordPress already installed. For information regarding WordPress installation, please visit - http://codex.wordpress.org/Installing_WordPress Extract the zipped package downloaded from ThemeForest to your desktop, in it you will find Photoform folder which is the wordpress theme.
You can install the theme in two ways:

After uploading the theme, you have to activate it. Navigate to Appearence -> Themes page to activate your new theme.

B) CSS Files and Structure - top

I'm using more CSS files in this theme. The main CSS file is in the css/autoinclude/style.css folder. All the main styles are stored here.

This theme is based on Foundation Framework by ZURB. If you need any more information about it - check the internet about how it works.

The widget are styled through the autoinclude/css/upcode-widgets.css file. If you need to change something about the way your widgets look, check this file.

This theme respects the latest HTML markup with a header, content and footer element.


C) JavaScript - top

This theme imports more Javascript files.

  1. jQuery
  2. My custom scripts
  3. Superfish jQuery Plugin
  4. Supersubs jQuery Plugin
  5. prettyPhoto jQuery Plugin
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Most of the animation in this site is carried out from the customs scripts. All website frontend actions that are related to JavaScript are located in the js/functions.js file.

D) Theme options - top

This is a simple and easy to use, yet a very powerful theme. Here are some ideas of how everything works.

The theme has a options button located at the bottom of the wordpress menu, named Photoform.

There, we have the following:

In General you’ll find options to hide the default wordpress bar, enable or disable a website preloader, a place to insert your tracking code, change your copyright text or change the copyright. You can also change you custom posts URL. (Better to leave alone if you're not sure what you're doing)

Then we have the Layout tab. This serves to set up defaults for your sidebars. This tab has listed all pages that can be changed (to add or remove sidebars) and change the sidebar size. Note that the sidebar size will be changed all over the website.

Next, you have the Styling tab. This tab is for changing the default favicon and the logo type. Here you can upload a custom image logo as well. Here you can change the style of your website to boxed or unboxed.

Colors tab. One of the most important tabs of this theme. Here you can change the colors used by the theme. You have color pickers for content items. Change theme as you want, but don’t forget to check what happens in front-end. Content color is the default text color on the website. Then, there is the menu link colors. You can change colors for menu item, menu item on hover and sub-menu items and sub-menu items on hover. There is also a color picker for the submenu background color. Make sure you match them good ;). Then, there is the accent color. This is used all over the website to give accents and more color to the website. It is used for dots in the view types (described below).
You can also change the link color all over the website. Color for simple and on hover. Then, another accent color (named Main color) is also selectable. It is used for backgrounds, mostly for the ratings, anchors inside sliders and so on.

Typography tab is for changing the default theme typography. You can change the fonts, sizes, weights.

Image sizes tab is for changing default theme image sizes used in frontend. You can change sizes, proportions but be aware that everything was developed with the given proportions. You are responsible if things will not look as good as they can. This is used if you want to change the theme image sizes, to make them more retina-ready. Be aware that using big images is bad for your response and load time.

The Likes tab reffers to the like system used by default in our theme. You can enable/disable them set a label for it or change the icon.

In Post settings, you can find all settings for your posts. Add/remove similar posts, show/hide image in posts, etc.

In Header settings you have 2 different header layouts. Choose the one that you think suits you best. There is also an option to make the header full-screen. Also here you can change your header background. Make sure the color you use here suits your menu colors selected in "Colors" tab. There is also an option to upload a header background image and a menu position setting (above all content, including the header or inside header).

In Content settings changed the way your blog and archive pages look. You can choose from a grid, thumbnail or list layout. If you choose grid or thumbnail at the bottom there is an option to choose the numbers of posts per line you want to use.

In Footer settings have options to change the background and the text color in the footer.

The social networks tab is used to add your accounts on different social networks. These will be used on the social icons located in header and for the social icons widget.

If you need new sidebars, go to the Sidebars tab. There you can create as many as you want and then set them to any layout you need.

If you need custom CSS, the Custom css tab has a input that will help you add some new styles if needed.

The Export tab is used if you need to import/export all settings from your current website. Don’t touch this as it could erase all data. Be very carefull with this.

E) Setting up frontpage - top

On first install, you will get the blog page only. If you want to use the plugin and create custom layouts - after creating a new page you'll need to add it to reading options so that WordPress knows what page to show as frontpage.

Then set it up in Settings -> Reading as your frontpage like this:

Reading settings

F) How to create posts - top

Adding posts is relatively simple. Bellow is the options you get for posts: Post settings

Well, let's start explaining them. They're not so complicated but I go through them to be sure.

There is a post embed box. This is used for audio or video posts. You insert you link/iframe/embed code there. Check the codex from the link there for what more can you add.
Then, there is the "Post settings" box. Here you can enable/disable related posts (shown at the bottom of the article), post meta (date, author, category), post likes, social sharing and author box. You can also add a background image to a specific post/page, a background color, align the background image.

F) Gallery and gallery layouts - top

There are different kind of galleries. You can choose from these layouts:

Let's check a screnshot for each of them.

Below you can see the scroll gallery:
Scroll gallery
This type of layouts makes a horizontally scrolled area with 500px in height for big screens and 300px for mobile.

Then, there is the fullscreen slide with thumbnails:
Fullscreen gallery
This creates a fullscreen slider with thumb below. The big image and the thumbs area are scrollable.

Also you can have a masonry layout:
Masonry gallery
This uses 2 images per row and arranges them so they.

There is also an option to have listed galleries:
List gallery
This uses 1 image per row and arranges them one below other.

Slider gallery looks like this:
List gallery
This created an image slider.

We recommend you to create your own custom menu.
To do so, go to Appearance – Menus and create a new menu. E.g.: Menu 1. Then, from Manage Locations choose for Main menu the newly menu you have just created.

Custom menus

Populate the menu as desired by dragging and dropping custom links, pages or categories. Press Save Menu. You can set the number of visible page items in the main menu. To do so, navigate to Photoform -> Menus

Remaining pages will be visible from the dropdown menu item “More”.

In version 0.2 I also added support for mega menu (ubermenu). The plugin does not come included in the theme, but you can use it if you have it installed (or buy it separately). Once you activate it should have the styles active.

I) Page layouts - top

By default, the layout is set in 2 columns aligned by right side. You can now choose the page template aligning the content by left side or opting for full-­‐width display (no sidebars).

This option is available both for posts and pages.


If you choose the Sidebar Layout for your post, you can display different sidebars at your desire. Select which Widget Area will be shown for each particular post from the select bar below the Post Layout. By default, the Main Area will be shown.

You can add individual sidebars for specific posts. Create your New Sidebar then go to Appearance – Widgets and populate your Areas with desired Widgets.


K) Post formats - top

Choose the corresponding format of the Post to correctly add a video, audio, gallery or standard post.

If Gallery post format is selected, a box with the gallery options will appear. It will look like this:

Gallery post format

You can add/remove or sort the gallery images as you want. Just drag them to and sort the order that they go in as you like. Do not forget to update your post after you make some changes.

If Video or Audio post format is selected, a box with the video/audio textarea will appear. Insert either your embed code or the link a video accoring to WordPress Codex. Check info here

Gallery post format

L) The magic plugin - top

To create these amazing layouts you'll need the Red Plugin. This will give you the opportunity to create different and interesting layouts. Bellow we'll go through the main things of the plugin.

This is our main plugin, which makes the theme come alive. Using it is simple, but you’ll need to know some main things of how it works. After installing the plugin you will get a new icon in the editor. Red Plugin

When you click the option - you'll see all this options:
Red Plugin
Bellow I'll have a try and explain all of them to you. So, let's go.

Content box - add a row with a custom background and text color. Plus, if you use the fullwidth page template you can choose your content width. Plus, you can add paddings top and bottom and left + right. This means the inside space left between the content and this row's edges.
Banner box - adds a banner inside your content. You can choose a background color, image, and text color. Plus, you can have a button inside with a link. You can see this on the demo, take a look bellow:
Banner box
List posts - maybe the most important shortcode. This is the way of showing posts on your pages/posts. Here you can choose what type of custom post you want to show, choose a taxonomy and how you want to show your content. This theme has 3 types of showing the content, each one with different options. You can choose from:

List view looks like this:
List view

Grid view looks like this:
List view

Thumbnail view looks like this:
List view

Each of them have different options like the number of columns, pagination, order and masonry activation is also available.You can either have pagination or use a content carousel. Using the content carousel will add arrows on top of your posts which can be used for pagination.
Post carousel

Team member - You can add team members. First, insert a column size and then use this shortcode if you don't want just one team member per row. You can check out how it looks here with 5 columns and a member in each one:
Team member Feature - You can features or in other words - icon boxes. First, insert a column size and then use this shortcode if you don't want just one team member per row. You can check out how it looks here with 3 columns and features in each one:

Contact form - You can how many contact form you need. Just use shortcode and insert the email for each one and that's all.

Spacer - If you need to add some space between some text or elements - just insert how many pixels you want and it will add the spacing. Simple as that.

Title - There are some predefined title types if you don't want to use basic headings. Just Choose the type you want and insert it.

Skills - You can add skill bars. Just add the content and % you want and you're ready to go.

Also, you can have columns, toggles, tabs, buttons, and alerts. These are already known in WordPress world.

M) WooCommerce - top

From version 0.2 Photoform theme supports WooCommerce. Everything is very simple to use. Just download the WooCommerce plugin, install and activate it. Please read the WooCommerce documentation before using. This theme only supports it, so any questions related to how WooCommerce works should be addressed to the plugins developers.

Once installed, you'll get this icon in the editor. This icon let's you show product posts, and it works more or less like the plugin that this theme comes with.

WooCommerce Shortcodes

Anyway, as this is a plugin and is has lots of modifications - there might come some options that have been missed when designing. If you find this - please report this on our Help Desk and will be fixed ASAP.

N) Support - top

If needed, better and faster support can be found on our help desk. You can find it at this address: http://www.redcodn.com/support. Commenting on ThemeForest is not the best choice if you need fast and good help.

Go to Help desk

Check theme description for new updates and information about theme and support. Please make sure you have the latest version before asking about a bug. By the time you write about, it might be fixed (if it exists ☺ ).

Question related to default Wordpress OR non related theme questions will not be answered.

O) Sources and Credits - top

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

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. The ThemeForest comment area is open for you.


Go To Table of Contents