Unite - WordPress Theme

Created: March 4, 2010
By: Parallelus (Andy Wilkerson)

Thank you for purchasing my theme. I hope you are happy with my work. I always welcome feedback and suggestions so don't hesitate to leave me comments. If you have questions not answered in this document, please email me using my user page contact form. The files included with this theme have detailed comments throughout the code to help you update and modify it for your needs. If you are happy with the theme, please take a moment to rate it on the ThemeForest website.

Thank you,
Andy Wilkerson


Table of Contents

  1. About The Theme
  2. Installation
  3. Configuring the Theme
  4. Content Options
  5. Layout and Design Structure
  6. CSS Files and Structure
  7. Skinning the Theme
  8. Special Features
  9. JavaScript
  10. PSD Files
  11. Sources and Credits

About The Theme - top

This theme is designed for use with WordPress 2.7 or higher. The code was written to be backwards compatible where possible, however it is recommended you use version 3.0.1 or higher. If you are not using WordPress 3.0.1 or higher and you can upgrade your site, I recommend you do this before installation.

The theme is widget ready and you can add and configure your own widgets in the sidebar, header, showcase, home page, blog posts, pages and footer. You will see more information about these areas and how to use them later in this document.

There are several pre-made skins installed with the theme. You can activate any of these from the theme options menu, or you can add your own skin using the "Custom" skin option. There is more information about using custom skins with the theme in the "Skinning the Theme" section below.

Although every effort has been made to ensure the theme is bug free and as easy to use as possible there is always the chance for errors. If you do find a problem please notify us immediately through the ThemeForest account page so we can ensure it gets fixed as quickly as possible.


Installation - top

Installing the theme can be done two ways. You can upload the zipped theme file, "theme-unite.zip", using the built in WordPress theme upload, or copy the files through an FTP client.

1) Using WordPress Theme Upload

This process varies slightly between different versions of WordPress. The instructions below are based on WordPress 3+. If using an older version the basic steps should be the same, although the button names and placement may be different.

  1. Login to your WordPress admin.
  2. In the "Appearance > Themes" menu click the tab at the top labeled "Install Themes"
  3. At the top of the page click, "Upload", then click the file field to select a file.
  4. Select the zipped theme file and click "Install Now"
  5. After installation you will receive a success message confirming your new install.
  6. Click the link "Activate"

2) Uploading by FTP

  1. Login to your FTP server and navigate to your WordPress themes directory. 
    Normally this would be "wp-content/themes"
  2. Extract the files from the zipped theme.
  3. Copy the folder "parallelus-unite" to your themes directory.
  4. After the files finish uploading, login to your WordPress admin.
  5. In the "Appearance" menu click "Themes"
  6. Click "Activate" for the theme "Unite"

Finished with Installation?

Once the theme is installed you can configure it for your content. See the section below on configuring the theme options and you are ready to start adding your own content.


Image Resizing

After your theme is installed you should ensure that image resizing is working. To perform image resizing your server must be running PHP-5 and have GD-Library installed. If you don't know if your server has these things, don't worry, most do and the resizing will work automatically. If you want to verify that these are on your server contact your host and they will be able to tell you.

Make the Cache Folder Writeable

You must make sure the cache folder "parallelus-unite/cache" is set to write permissions. This is where resized images are saved. The folder needs "777" write permissions. It's likely that this will also work automatically, but if it does not or you have an error message related to your images you should CHMOD the folder to "777". If you need to know how to do this do a web search for "CHMOD folder permissions 777" or check the help file of your FTP program.

Resizing Script

The theme uses a script named "TimThumb" to perform image resizing. If you need detailed information on using this script or want to make customizations in the code check the TimThumb website for the full documentation and example code: TimThumb PHP Script

Common Image Problems

My images are not showing but I can see the placeholder images.

If you have already completed the steps above to verify your server settings and requirements are not a problem, you my have a problem with image locations or the path. If you can see the placeholder images, but not your own images, you probably have the wrong path to your images. Copy the URL you entered for your image and paste it into the browser address bar. If you don't see your image the path is wrong. Check the path and make sure an image exists in that location. Once you find the working image URL update the image path.

If the path to the image works when pasted into the browser, try going directly to the TimThumb file without an image. You should get a message that no image was specified. If you don't get this message or you get a 404 error page, the TimThumb file is missing, or does not have permissions to run on the server, or one of the requirements (PHP-5 and GD-Library) is not working properly. Contact your host to verfiy these items.

Some of my images don't work.

If you see some images and not others, the problem is mostlikely the image path. Paste it into your browser to test if the image appears. If not, check the path and update it. If you see the image, it could be a permissions issue. TimThumb cannot resize images from other sites so your images must be hosted on the same domain when using TimThumb.


Configuring the Theme - top

Once the theme is installed you will see a new menu on the bottom left of your WordPress admin. The theme menu contains the following areas:

General Options

This area contains settings for choosing your skin, changing your logo, editing your footer text and more. The theme has an option to show place holder images for blog posts and other areas where you may not have associated an image with the content already. You can enable/disable that option from this page.

Home Page

The home page section allows you to configure the number of featured posts, blog posts and other content on the home page.

Showcase

The top section directly below the slide show is referred to as the "Showcase". This area is populated using widgets. You can decide if you want to have a 1, 2 or 3 column layout for the showcase area, and the appropriate number of widgets will be created for you. To populate this section go to the "Widgets" page under "Appearances" in your WordPress admin.

Introduction Text

The "welcome" headline text can be added in this section. You can also add extra content directly below the welcome headline if you choose.

Featured Content

This is the content section on the home page under the heading "Featured Content". This section can be enabled or disabled if you choose and the title can be changed to whatever you like. To add posts to this area, mark them as "sticky" in the post "visibility" settings. If no posts are marked as sticky it will display standard posts. Only blog posts can be added to this area, page content will not be displayed here. For more information on sticky posts try a web search for "WordPress sticky posts". This section will also exclude any posts in categories you have excluded from your categories menu under your sidebar settings for the theme options.

Home Page Posts

This is the content section on the home page after the "Featured Content" section. This section can be enabled or disabled and you can set the number of posts to include. Because the "Featured Content" section shows "sticky" posts, this area will only show blog posts NOT marked "sticky" (this is a normal post and requires no special action). This section will also exclude any posts in categories you have excluded from your categories menu under your sidebar settings for the theme options.

NOTE: The home page content will only display as intended if you have your WordPress "Reading Settings" configured for "Front page displays: Your latest posts". If you setup the front page to use "a static page", which you can do, it will remove all home page elements and you must create all the content yourself. This includes the slide show, welcome message, featured content and blog posts.'

Home Page Sidebar

The home page has a pre-set sidebar that already exists in the Widgets area, "Homepage Sidebar". This is the area where you should add widgets for the home page.

Home Screen Shot

Main Menu

THIS THEME OPTION WILL ONLY EXIST FOR WORDPRESS 2.9 AND EARLIER. FOR INSTALLS USING WORDPRESS 3.0 OR LATER YOU WILL CONTROL THE MAIN MENU FROM THE DEFAULT WORDPRESS ADMIN: "APPEARANCE > MENUS". VERSION EXCEPTIONS TO THE CONTENT BELOW HAVE BEEN NOTED WHERE NECESSARY.

This is where you will configure what does and does not appear in your main drop down menu. The items in the menu can be dragged into the position you want them to appear. To start, click the "Add new menu item" and it will create the item on the page. To make a sub-menu item, drag it beneath another menu item and slightly inset, visual layout will change on the page and you will immediately see the item nested below it's parent. (WP 2.9 installs only: You can also create separator items to add visual indicators on the menu for separation of links.)

NOTE: Be sure to always save your changes. Dragging items and deleting them will not take effect unless you click the save button after making the changes.

Specialty Links:

You can add several special types of links to tap into built in functionality of the theme.

Image icons for menu links - To add an icon to a menu item, you must do two things. First you need to have the image defined in your style sheet. For an example of this open the default style sheet "style-default.css" and find this section (line 377):

/* icons for menu items */

.mmLogin	{ background: url(...bullet-lock.png)...
.mmFeeds	{ background: url(...bullet-feed.png)...
.mmRSS		{ background: url(...icons/feed.png)...
.mmFacebook	{ background: url(...icons/facebook.png)...
.mmTwitter	{ background: url(.../icons/twitter2.png)...

Create your own entry by copying an existing one and giving it a custom class name. After you have this entry, add the new image you entered the path for to the location you specified. Next, from the menu manager, add a <span> tag around your menu item title resembling the following:

<span class="mmFeeds">Feeds</span>

Where the "Feeds" text is your menu item text and "mmFeeds" class is the class of your custom menu icon class created in the style sheet.

Login pages, top slide and pop-ups

You can add links that activate the custom login pop-up or the slide open top area. Include the path to the page you want to open and append one of the following to choose the function.

Pop-up Login (#login): To create a link that opens the login pop-up, select the link option for "URL" and enter the custom URL path as "/wp-content/themes/parallelus-unite/login.html#login". This path should be the path to your theme folder if the above is not correct.

Slide Open Top (#topReveal): To create a link that opens the slide top, select the link option for "URL" and enter the custom URL path as "#topReveal".

Any content as pop-up (#popup): You can optionally enter any URL for a link into a WordPress text editor or the menu and and append "#popup" to the link and it will open in a pop-up. This can be an internal or external path, for example "http://www.google.com#popup" will load Google in a popup window inside your page. This can be great for linking to maps or other informational content.

Slide show

The slide show menu allows you to add slides, sort the order they display and the transition effect used for each image. If images don't display you should check the paths, if they seem correct, try using a full path with your entire URL including the "http://domain.com" in the path. If you can enter that path into your browser and see the image it should also display in the slide show area.

Slide show links can be added so clicking a slide will direct the visitor to a page or website. This feature only works with the default "Cycle" slide show and not the "Gallery View". Links URL's are ignored if you choose "Gallery View" as your slide show.

NOTE: Be sure to always save changes. Dragging items and deleting slides will not take effect unless you click the save button after making the changes.

Sidebar

Create custom sidebars. Click "Add New Sidebar", enter a unique name and save. Each sidebar will be shown in the Widget area of your admin to add widgets and content to the sidebar.

To assign a sidebar to a page or post, in the edit view of your content, select the sidebar from the drop down menu in the custom theme options beneath the default content editor and save. You can assign a sidebar to multiple pages and posts to share a single custom sidebar or use a custom sidebar for each.

The home page has a pre-set sidebar that already exists in the Widgets area, "Homepage Sidebar". This is the area where you should add widgets for the home page.

Blog Pages

Adding blog pages allows you to select any page on your site to display a blog. You can have an unlimited number of blogs. Click the "Add New Blog" button to create a new blog. Select the page it should use to display your blog posts on. Select the categories to pull posts from. If you have content on the page selected to host your blog posts, the content will be displayed before the posts at the very top of the page.

Portfolio Pages

Adding portfolio pages allows you to select any page on your site to display a portfolio from. You can have an unlimited number of portfolios. Click the "Add New Portfolio Page" button to create one. Select the page it should use from the public side to display portfolio items on and the categories to pull the items from. If you have content on the page it will also be displayed using a floating content block. The demo site uses the following HTML in the page content for the portfolio:

<h1 class="headline center" style="margin-bottom: 0;">Providing client services in <strong>web</strong>, <strong>print</strong> and <strong>multimedia</strong> design.</h1>

Portfolio Screen Shot

Contact Page

This is where you set the options for the "to" address, "subject" and "thank you" message shown after sending the email. Entering information on this page only sets the default values. You can still customize these options for each instance fo the contact form.

To add the contact form to a page, past the shortcode "[contact_form]" on a page and it will generate a form with the default values.

To customize the options use the long format of the shortcode (all options are options):

[contact_form to="me@email.com" subject="Subject" thankyou="Thanks."]

There is a built-in button on the WordPress text editor that includes a form to create this shorcode and insert it into your page for you. Click the button with the two forward slashes "//" on the editor and select the "Contact Form" tab.

Only one form can be added per page. The form will produce errors if multilple instances are added to the same page or post.


Content Options - top

The theme includes custom content settings for pages, posts, widgets and shortcodes that can be used to produce custom formatting and special functionality on your pages.

Page Options

When creating a new page or editing an existing one you will have a series of custom theme options beneath the default WordPress editor. Those settings enable custom page content and styles to be easily set on a per page basis.

Post Options

When creating a new post or editing an existing one you will have a series of custom theme options beneath the default WordPress editor. Those settings enable custom content and styles to be easily set on a per post basis. The posts have the same options as the pages with the addition of the following options as well:

Post Images

Widgets

A set of custom widgets have been created to accompany the theme. These can be setup with your information and added to any sidebar of your choosing. To access these widgets go to the "Appearance > Widgets" menu.

Sub Navigation

Displays a menu of sub-pages to the current page.

Categories

Displays a theme styled list of categories.

Archives

Displays a theme styled list of archives..

Quote

Theme styled quote or testimonial.

Recent Posts

Theme styled recent posts with optional preview image.

Popular Posts

Theme styled popular posts with optional preview image.

Twitter

Show recent tweets from a Twitter account.

Flickr

Show images from a Flickr account.

Shortcodes

A collection of shortcodes has been added to the theme for quick content formatting and theme specific functionality with little configuration. You can quickly insert shortcodes using the custom editor button on the WordPress editor represented by to forward slashes "//".


Layout and Design Structure - top

Included with the theme is a copy of the HTML only version. This is provided to make it easier to build custom additions or modify the theme as you choose. It's easier to see the structure of the site in the original HTML files than from piecing together WordPress pages. Within the HTML pages is additional documentation about the theme. Below are links and references to these pages where you can learn more about the layout structures, text formatting and other features. If you want to access these files directly they are located in the "theme_admin/HTML-Version" folder.

Layouts - sample-layout.html

You will find examples of the different layouts and content configurations on this sample page.

NOTE: For samples of shortcode layouts and usage please refer to the WordPress demo site:
http://para.llel.us/themes/unite-wp

Text - sample-text.html

This contains example code and sample outputs of all the common HTML tags used for content editing. Most of the text styling is already handled by WordPress, but in situations where you want to add a headline in the middle of a page, or create a sub-title, this information can be very useful.

Cufon - font replacement

This theme takes advantage of cufon font replacement for headings and other title elements. The font used for these elements is called "Liberation Sans". It is a free font and is available online.

Download "Liberation Sans"

NOTE: If you are experiencing problems or want to disable Cufon, you can do this from the theme options"General Options > Miscellaneous > Font Replacement" menu.

Logo Fonts

The logos in the included skins use "Liberation Sans" as the font. This is a free font available online. The dark theme uses an alternate logo font, "Harabara", also a free font available online.

Download "Liberation Sans"
Download "Harabara"

Category Titles

When you create a post category you can optionally add a description. If the category has a description it will be displayed after the title in the format:

Category Title  //  Your category description...

Skins and Design

There are several pre-made skins included with the theme. For detailed information on creating custom skins or using a single skin please refer to the "Skinning the Theme" section of this document.

Note: Although every effort has been made to ensure the theme is bug free and easy to use, if you encounter a problem please notify me immediately through my ThemeForest account page so I can ensure it gets fixed as quickly as possible.


CSS Files and Structure - top

There are several CSS files included with this theme, but only a few will be necessary for customization. The CSS files are all located in the root theme folder. The only exception to this is plugin specific style sheets which are located in a sub-folder named "css". Within that folder there are two sub-folders, "source" and "skins-originals".

The first folder, "css/source", contains the original CSS files with formatted code and comments. Only a few files are in this folder. These files might include the original CSS files for add-on scripts used in the design. If you find a CSS file that is uncommented and you need the original, check this folder.

The second folder, "css/skins-originals", contains a backup copy of the CSS skin files.

Primary CSS Files

style-default.css (required)

This file provides the foundation for the site design and all skins. It controls the layout and design structure of the theme. Making modifications to this file will usually effect all skins unless it is a color or image related change. The skin files act as an extension of "style-default.css" to apply custom colors and graphics. Before you edit this file you should consider making a custom skin style sheet or editing the one you are already using for your design.

style-skin-#.css

These are the skin specific style sheets. These files are named numerically in a format such as, "skin-#.css". To change the skin, use the menu option under "General Settings >Choose a skin". This will switch between any of the 5 existing skins included with the theme. If you have created a custom skin, you can select the "Custom" option from this menu. In the text box that appears, type the name of your custom skin CSS file (omitting the ".css" file extension). For example, if you create a skin CSS file named "my-skin.css" you would save it in the theme folder and type "my-skin" in the custom name field.


Skinning the Theme - top

Each color style, "skin", is controlled by a custom CSS file. These are located in the theme folder "parallelus-unite". The images for each skin are saved in a folder under "images/skins/skin-123/" where "skin-123" is the name of your CSS file. To create a custom skin, duplicate an existing skin CSS files and edit it as desired. You can easily output the custom graphics for you skin using one of the "Theme Graphics - for skinning.PSD" files located in the "Design\Files for skinning" folded included with the theme.

After creating the skin CSS file and a matching images folder, save your images to this new folder. Use the "Save for web..." feature of Photoshop and select "All user slices" to get the desired graphics. You can create a custom skin in a few minutes by modifying the background colors of the main layers in this file. If you want to get more detailed and tweak the output you can edit the individual colors, highlights, borders and shadows of the layers above the background. Taking some time to play with the different layers to see what effect they have can be very helpful in the beginning. This file was designed to allow easy and fast skinning but also alows you to control the detials of each graphic element output for the design.

IMPORTANT: If you are going to create a custom skin or do any advanced code editing, you may need to edit the JavaScript loading file, "js/onLoad.js". This file controls loading and executing of many dynamic JavaScript functions used in the theme. To edit the file, you should use the source located in "js/source/onLoad.js"

To create a single skin for your site

The best way to go about creating your own skin, is by starting from one of the pre-made styles that come with the theme. An easy way to do this would be as follows:

  1. First, create a copy of an existing style sheet from the theme folder "style-skin-#.css", and increment the # to the next unused value.
  2. Create a duplicate of the same skin's images folder located in "images/skins/skin-#"
  3. Give your new images folder the same name as the CSS file by incrementing the number to match.
  4. Open the "Theme Graphics - for skinning.psd" file in the "Design/Files for skinning" folder and modify the colors to create your desired graphics.
  5. Output the graphics using "Save for web..." to the new skin's images folder. Choose "All user created slices" as the option for output method when asked.
  6. Open the new CSS file for your skin. Do a find and replace for the path to your images folder, this would be something like, Find: "skin-8", Replace with: "skin-9", to update all occurrences of the image folder path in the file. Save when finished.
  7. Upload your new skin CSS file and images folder to the theme folder for "parallelus-unite" on your server.
  8. Change the skin setting in the Theme Options to "Custom" and type the name of your skin file, "my-skin", omitting the ".css" file extension.
  9. Save your settings and preview the new skin.
  10. In the WordPress "Appearance > Editor" panel, open your new skin CSS file and begin editing the individual style properties to match the graphics you have created for your new skin.
  11. Save and enjoy!

Special Features - top

Button Style Disabling

The custom button styles will automatically apply to any <button> or <input type="[submit or button]"> on your page. In some situations you may need a button not to have these styles to preserve special functionality. You can add the class "noStyle" to any button and it will be ignored by the button styling function.

<button class="noStyle">Do Not Style This Button</button>

Specialty Links

You can add several special types of links to tap into built in functionality of the theme.

Content Pop-ups

You can add links that activate the custom pop-up modal window. Include the path to the page you want to open and append the following:

Any content as pop-up (class="zoom iframe"): You can enter any URL and add the class "zoom" and "iframe" and it will open in a pop-up. This can be an internal or external path, for example:

<a href="http://www.google.com" class="zoom iframe">Google</a>

For image pop-up only the class "zoom" should be applied.

Pop-up shortcut (#popup)

You can add the same pop-up functionality to a link by appending "#popup" to the url, for example:

<a href="http://www.google.com#popup">Google</a>

This can be useful for linking to maps or other informational content.

Slide Open Top (#topReveal)

To create a link that reveals the slide open top area, enter the URL path as "#topReveal". For example:

<a href="#topReveal">Slide Open Top</a>
Image Pop-ups

You can open any image in a pop-up by including the URL for the image in a links HREF attribute and giving it the class "zoom" as demonstrated below:

<a href="http://mysite.com/myImage.jpg" class="zoom">View Image</a>
Video Pop-ups

You can open many web videos in a pop-up by including the URL for the video in a links HREF attribute and giving it the class "zoom" as demonstrated below:

<a href="http://www.youtube.com/watch?v=8iGRpC8U3x8" class="zoom">
	Open Video Pop-up
</a> 

JavaScript - top

This theme imports several Javascript files. All located in the "js" folder.

  1. Superfish - main menu
  2. jQuery Cycle Plugin - slide show (default)
  3. GalleryView - Optional alternate slide show
  4. jQuery.ScrollTo - Scrolling effect for anchor tags
  5. SuperSleight (PNG fix)
  6. FancyBox - lightbox effect for portfolio and login form
  7. jQuery Validation - form validation for contact page
  8. cufon Font Replacement - for custom font replacement
  9. clueTips - Mouse over tool tips
  10. Overlabel - form input labels

PSD Files - top

Several design files are included with this theme:

  1. Additional graphics - miscellaneous graphics used in design
  2. Dialogs
    1. Login.psd - Login pop-up window
    2. Modal.psd - Modal for images and portfolio
  3. Files for skinning
    1. "Theme Graphics - default.psd" - used to create default skin, not optimized
    2. "Theme Graphics - for skinning (dark).psd" - used to skin dark theme
    3. "Theme Graphics - for skinning.psd" - used for most skinning, start here.
    4. "Tooltip.psd" - Tool tips skinning.
  4. Slideshow - custom files for creating graphics sized for slide show
  5. Theme.psd - The main design (useful for mockups, but not sliced for output)

Sources and Credits - top

The following images, icons or other files have been used in this theme.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help if you have any questions or need assistance.

Thanks,
Parallelus (Andy Wilkerson)