Options WordPress Theme

Help & Documentation

Options Theme v1.4

updated 11/02/2011

I want to start off by saying thank you for purchasing our theme! We put eight months of development into this theme to hopefully give you all the options you are looking for in creating your online presence. Make sure you read this help file, we put a lot of time into organizing the information in it, so that you can get answers to your questions right away! The table of contents below should help get you started so you can jump to the section you need help with. We have included tons of screenshots and video tutorials throughout this file in an attempt to make finding your answers as easy as possible. Also you can follow us on twitter to get new updates!

Follow Us

Table of Contents

Frequently Asked Questions

these are the most common questions, so you can get your answers fast!

How do I update my theme to the newest version
How do I get my image/slider to overlap the header like in the preview
How do I add an image to my blog posts?
How do I translate the theme into my language?
How can I get an xml file to get your sample website?
I don't want to import the XML file, how do I add something I saw on the demo
back to top

Common Errors

these are the most common errors, your error is more than likely due to one of these common mistakes

Any Installation Errors are probably due to this
back to top

Video Tuts

if you are a visual learner like me, you will appreciate not having to read lol

Installation & Demo XML Import Video Tuts

Options Theme Installation
via/ WordPress

Options Theme Installation
via/ FTP

Setting File Permissions
via/ FTP

Options Demo XML Import

Theme Customization

Change WordPress
Home Page

Skins & Layouts

Image Settings

Color Settings

Logo Settings

Menu Settings

Typography Settings
Part 1

Typography Settings
Part 2

Blog Settings
Part 1

Blog Settings
Part 2

Header Settings

Footer Settings

Post Footer Settings

Creating Sidebars

Custom Javascript/CSS

Google Maps

Google Analytics

SlideShow Creator

Image Shortcodes

Goolge Maps Shortcode
& Shadows Shortcode

Blog Shortcodes
& Spacer Shortcode

Pricing Tables
Shortcodes

Contact/Twitter/Flickr Shortcodes

Columns
Shortcodes

Tables Shortcodes

Comparison Tables
Shortcodes

Buttons Toggles &
HR Shortcodes

Spacer UL OL &
Text Lighbox Shortcodes

Block Quotes & Pull
Quotes Shortcodes

Pre/Code Block
Shortcode

Drop Caps Shortcodes

Text Highlight Shortcode

Raw Shortcode

Large Featured
Testimonial Slider

How to Add
Image to top of page

Portfolio Setup
Part 1

Portfolio Setup
Part 2

Portfolio Setup
Part 3

Portfolio Setup
Part 4

Updating Your Theme

back to top

Pre-Installation

Setup WordPress

If you have not already installed WordPress you should go ahead and do so now. Many webhosts like GoDaddy provide utilities to automatically install wordpress for you as a value added application. If not, no worries, wordpress is very easy to install. Infact the WordPress site actually has tutorials walking you through how to set it up.

Setup FTP Client software

An FTP software is going to be very beneficial for uploading files to and from your webserver. If you do not have an FTP server setup already it is highly recommended. Filezilla FTP Client is the software most widely used and can be downloaded for free here: http://filezilla-project.org/  The folks at WordPress have also provided several tutorials for setting up and using FileZilla. Links are below.

Setup a ZIP software

You will need to unzip the theme files that you download from ThemeForest onto your computer. Some kind of unzip software should already be installed on your computer, but if not run a quick search on google, there are lots of free unzip softwares out there for download.

Theme Requirements

You webhosting sever needs to be running PHP 5 or higher, and your WordPress version should be the most current 3.2.1

back to top

Theme Installation

UNZIP Download Package to your computer

Do not attempt to upload the entire zip package to WordPress. First unzip the download package from ThemeForest onto your computer. After all files have been unzipped, there is a file named options.zip in your unzipped folder. This is the zip file you need to upload to wordpress. Installation is very easy. If you are a more advanced user and want to transfer the theme through FTP, make sure the transfer mode is set to BINARY, be default Filezilla uses auto

STEP 1: Log Into Wordpress

STEP 2: Upload options.zip & activate theme

Once logged into WordPress click on the appearance tab on the left most sidebar, it is under the posts and comments tab. Then click on Themes. After that click on the Install Themes tab at the top. The second link under the Install themes button says Upload click on that link. Next click on the choose file button and select the options.zip folder inside the big zip you dowloaded and unzipped onto your computer from ThemeForest. Then just click the Intall Now button.

STEP 3: Setting File Permissions

Options uses timthumb to resize you post/slider images and thumbs. This will save you hours of cropping photos in photoshop. Timthumb is located in the includes folder of the theme. There are two folders that need to have 777 write permissions for TimThumb to work correctly. With most webservers you can change the permissions to your folders right from your FTP Client. Below is a screenshot of how to do this with FileZilla. The two folders for TimThumb are located in the includes folder and are named cache and temp. Some more secure webservers will not allow you to change write persmissions from FTP. If that is your case, call your webhost. They get this request ALL THE TIME. And can help you add write permissions to these folders in two minutes. If you want more information on setting file permissions WordPress has a great article about it here: http://codex.wordpress.org/Changing_File_Permissions Also we have provided a font uploader with the theme so if you are wanting to upload custom fonts you will need to give the js/fonts/custom folder 777 write permissions and the js/fonts/uploader/hash.php file. A screenshot of the folders is also provided below.

INSTALLATION COMPLETE!!

back to top

Import Demo Content

Import optionsDemo.xml into WordPress

We have created demo content that you can import into your WordPress install, so you can hit the ground running! Pages for all the available layouts, shortcodes, and blog posts have been setup in this XML file. All you have to do is import it. Steps are outlined below with screenshots.

NOW YOU ARE READY TO CUSTOMIZE!!

back to top

Language / Translation

Front End Translation

Every piece of default text that is output from the fron-end of Options has been collected into a .po file and ready for translation. This default .po file is located in root folder of the theme inside the languages folder, named en_US.po

Back-End Translation

Every piece of default text that is output from the back-end of Options or the admin panel has been collected into a .po file and ready for translation. This default.po file is located in framework/admin/languages folder of the theme, named en_US.po

Free Software For Translating .POT Files

Poedit is a great free software program that enables you to translate all the text in the .po files and save the finished result as a .mo file. It can be downloaded for free here. http://www.poedit.net/download.php

Upload .mo Files

your .mo files should be named using appropriate country and language codes. List of language codes can be found here: http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Language-Codes
List of country codes can be found here: http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Country-Codes
Eg. if your language is spanish and your country is Mexico, the appropriate file name for your .mo files would be: es_MX.mo
After your .mo files have been created and named properly, simply place them in your languages folders.

Installing WordPress in your language

Make sure you have changed your wordpress default language and country code in wp-config.php This step is necessary for the theme to look for your translated .mo files. A complete tutorial of how to do this can be found here on the wordpress codex site.
http://codex.wordpress.org/Installing_WordPress_in_Your_Language

back to top

Updating Your Theme

Back Up! Back Up! Back Up!

Anytime you are updating / replacing files on your webserver their is the potential for loss. So many different files, operating systems, and servers out there, you really can't be too carefull. There are some great utilities out there for backing up your WordPress installation, just do a search for backup at http://wordpress.org/extend/plugins/ Make sure you select a backup plugin that has lots of stars for it's rating. After you have backed up your data, a good plugin for updating your theme can be found here: http://wordpress.org/extend/plugins/easy-theme-and-plugin-upgrades/   All of your Options settings, Sliders, Custom Sidebars, Custom Css, and Custom JS, are saved in the database, so uploading the new theme files, won't effect all your changes. If you are a more advanced web-developer you can also simply FTP the new theme files and replace the old ones. Don't forget to make sure the transfer mode of your FTP software is set to BINARY, be default Filezilla uses auto   Updates are free if you have purchased the theme, just check the Options home page on Themeforest to check the latest release and if you are using an older version, simply login to Themeforest, go to your downloads page, and grab the latest zip. If you have modified any of the php, javascript, or css files directly, you will need to backup these files and re-apply your changes. Here is a video tutorial for updating your theme via ftp: video tutorial

back to top

Skins & Layouts Settings

Out of the box Options is set to the Teal-Skies Boxed Layout. This can easily be changed, infact this should be the first change you apply. A screenshot of the Skins and Layout page has been provided below. From this page you can choose which skin you like the most, and whether you want your layout to be boxed or full-width. If you have select boxed layout you will get additional options that you can adjust, like the top and bottom margin your page should start, the corner radius of your page, and whether you want to add a shadow around your page and what color that shadow should be. We have also added some additional really nice features, from the Skins/Layout page you can change the image/preloader background color which is used throughout the entire site to preload your images and your non-flash sliders. Underneath that you can also upload your own custom preloader!! There is a great resource at   http://preloaders.net/  that allows you to create your own preloaders and change the color and size of the preloader. We have also enabled you to change te color and opacity of your image frames and footer image frames. If you are using IE8 or lower (...i'm sorry lol) the opacity will be ignored. And finally the last setting allows you to change the default button color used in the contact form, blog pages, and pagination.

back to top

Image Settings

We wanted you to have as much control over the look and feel of your theme as possible without having to be an advanced CSS/HTML developer. So we went through the theme and setup options for you to change all the big and small images that the theme uses. A screenshot of the Image Settins page is below. From here you can upload your own fav icon, which is a small image file with an .ico extenstion that shows up when someone bookmarks your page, and also in the browser address bar! Here is a great tutorial on how to create an .ico file from photoshop http://www.photoshopsupport.com/tutorials/jennifer/favicon.html From the Image Settings page you can also upload a tiling background pattern (looks best with the boxed layout). Or choose from several pre-designed background patterns we have provided. You can also choose a full-size background image and select how you want the image positioned. We have also provided spots on this page for uploading a custom header background image and a custom footer background image. Now this is were it gets crazy! Under these options we have provided spots for you to swap out all the small icons and tiling images used throughout the theme! No more weeding through 3,000 line css files to change out an icon or tiling background image! We wanted you to have full control of the styling of your theme, without being a code genius!

back to top

Color Settings

From the color settings page of the Options admin panel you change colors for your header, footer, menu etc. etc. Take a look at the screenshot below to see all the color options you can change out easily. Color settings for your fonts is done under the typography settings page.

back to top

The Logo Settings page inside the Options Admin Panel allows you to upload your own custom logo image. You can also turn this feature off and use a text logo. You can also move your logo left to right or up and down with the number sliders provided. If you are using a text logo here is the code snippet we talked about in the video tutorial. Just paste this code snippet into your custom javascript box on the Custom Javascript/Css page of the admin panel. You can read up on more wayst to style your text with cufon here: https://github.com/sorccu/cufon/wiki/Styling

Cufon.replace('a.logo_title', {
	hover: true,
	fontFamily : "Colaborate-Bold",
	textShadow: '2px 1px 3px #040d24',
	color: '-linear-gradient(#ffffff, #b4b4b4)'
});	
		
back to top

Menu Settings

By default Options Theme uses the standard wordpress menu. We recommend you change this, but for the Demo Content XML Import this was the best solution. If you do decide to stay with the default wordpress menu for your navigation we have included a select table where you can checkmark pages you do not want to show up on your menu. Since WordPress doesn't give you the option to do this. If you turn on the custom menu, click on the link under this option and it will take you to the Menus tab under WordPress's main Appearance tab. From Here you can build a custom menu for your site and then assign it to the Main Navigation location under Theme Locations. Screenshots provided below. While you are here, we have provided widgetized areas in the pre-header and post-footer, where you can add custom menus. Eg. Create a new menu with four or five important page links. And then on the WordPress Widget Page drag a Custom Menu Widget to either the Pre-Header Left Side Widget area, the Pre-Header Right Side Widget area, or Post-Footer Widget area. Make sure to leave the title of the widget blank, as there is not room for it in the pre-header or post-footer. Make sure to also select the custom menu created in the custom menu widget. You can style your pre-header and post footer links under the typography settings page of the Options theme admin panel.

Screenshot for assigning custom menu to main navigation

Screenshot for adding Pre-Header or Post-Footer Menus

back to top

Typography Settings

We have added a ton of Options here!! One of the most useful features is the ability to upload your own cufon fonts. Currently Options doesn't support Google Fonts, but this will be provided in a future update for free. The first screenshot below show you how to upload your font to Cufon and get the javascript version of the font back, it will look something like this Colaborate-Regular_400.font.js We have provided 45 Cufon fonts to get you started! There is a great resource for Hundreds of free fonts that you can download at http://www.fontsquirrel.com/ or another great resource for free fonts at http://www.dafont.com/ After you have downloaded and unziped the font you want to add, go to the CUFON SITE  to convert your font to javascript format. Make sure you create a seperate file for each font. Eg. If you have different weights like Regular and Bold for a specific font, make a seperate file for each. Cufon gives you the option to combine fonts into one file, do not use this feature. The way the font-uploader has been programmed, it needs a seperate file for each font. Also below is a screenshot of the font settings available under the Typography Settings page of the Options Admin Panel. You can make a Ton of customizations here. Also don't forget to set the proper write permissions for your custom font folder and the hash.php file inside the uploader folder. A screenshot for doing this can be found at the top of the page under Installation -> Setting Permissions

Screenshot for Options Admin Panel Typography Settings

back to top

Blog Settings

WordPress will automatically set your home page to be the blog page, If you do not want this, click on the Settings tab on the left most wordpress side-bar and then click on Reading. This page will let you define what page you would like the home page to be set to, and what page you want your blog posts to show up on. You can also set how many of the latest posts to show on the blog page and wether to show the full post for each entry or just an excerpt of the post. Infact there are a ton of options you can configure under all the tabs under Settings to configure your post settings, it wouldn't be a bad idea to go through all of them. We have also created additional blog formatting options under the Blog Settings page of the Options Admin Panel. You can add a Page Title to your blog page if you like, enable or disable bread-crumbs, choose from a Full-Width Page Layout Style, Right Side-Bar Layout Style, or a Left Side-Bar Style. There is also an option to add a small or large image frame to your posts featured images. Your image frame colors and opacity can be controlled from the Skins & Layout page of the admin panel. You can also choose from 17 modern web shadows for your post images. Control the spacing between posts, hide certain categories from showing up, and change the default text for the read more button. The color of the read more button is defined under the Skins & Layout page of the admin panel under default button color.

back to top

Header Settings

We tried to give you as much control over your header as possible with the settings under the Header Settings page of the Options Admin Panel. You also have control over the colors, images, and typography under their respective pages. The Header Settings page allows you to increase or decrease the size of your header, enable or disable your header background image, and enable or disable the pre-header. You can also add HTML text if you want to add contact information under the menu, or if you disable the phone number in header option you can replace that space with a search option. We also have enabled you to change out the default social icons in the pre-header with your own social icons and change the links here too! If you do not want social icons in the preheader simply disable them and it will become a widgetized area. You can add widgets to the left and right side of your pre-header. A screenshot of how to do this is here Pre Header Widget Areas

back to top

Footer Settings

Under the Footer Settings of the Options admin panel you have a bunch of options. You can choose from 15 different column layouts. Enable or disable your footer image, post footer, copyright text, and footer shadow (if you are in boxed layout mode). The right side of the post footer is widgetized and you can easily add social icons or links from the widget menu. If you choose to add a shadow to the bottom of your footer, you can choose from 17 awesome web shadows! We have provided screenshot of the Footer Settings page in the Options admin panel below, as well as a screenshot of the widget panel where you can add content to your footer columns. If you select the 6 column footer layout option, then you would utilize all 6 of the Footer widget areas. If you choose a 3 column layout you would utilize the first 3 footer widget areas, and the last three would be ignored. You also have control over the colors, images, and typography of your footer under their respective admin panel options pages.

Code Snippet for adding social icons to your post footer as discussed in the

video tutorial

<div class="socialIcons">
	<ul>
		<li><a href="http://www.yourSocialProfile.com" target="_blank"><img src="http://yourSocialIcon.png" alt="" rel="nofollow"></a></li>
		<li><a href="http://www.yourSocialProfile.com" target="_blank"><img src="http://yourSocialIcon.png" alt="" rel="nofollow"></a></li>
		<li><a href="http://www.yourSocialProfile.com" target="_blank"><img src="http://yourSocialIcon.png" alt="" rel="nofollow"></a></li>
		<li><a href="http://www.yourSocialProfile.com" target="_blank"><img src="http://yourSocialIcon.png" alt="" rel="nofollow"></a></li>
		<li><a href="http://www.yourSocialProfile.com" target="_blank"><img src="http://yourSocialIcon.png" alt="" rel="nofollow"></a></li>
	</ul>
	<div class="clear"></div>
</div>
back to top

Unlimited Sidebar Creator

This is a nice feature of Options. Create as many sidebars as you like simply by typing the name of your custom sidebar and then clicking add, in the Sidebar Creator page of the Options admin panel. Don't forget to click save on the top of the options panel, and then head over to your widgets page and Wholla! There they are! Screenshots below.

back to top

Adding Custom Css & Javascript

Because we will be releasing updates from time to time. We recommend you paste any custom Css or Javascript into the spaces on the Custom Javascript / Css page of the Options Admin Panel. If you edit the actual css and javascript files you will need to re-apply your changes when you want to update your theme to a newer version. Your custom javascript will be wrapped in a jQuery(document).ready(function($){}); function, so your javascript will not be fired until the DOM has loadeded. If you have custom cufon replace calls, then this would be a great place to put them! The custom css is loaded after the default css files, so it will be closest to your html elements in the cascade. We also added a nifty feature under your custom script boxes where you can choose to combine all your Javascript files into one file, so that the number of HTTP requests will be greatly minimized and speed up your page load time!

back to top

Turning On Google Maps

By default Google Maps is turned off because it requires an API Key. You can generate an API key for your domain here. http://code.google.com/apis/maps/signup.html Simply Click the on button and paste in your api key, and you are ready to start using Google Maps widgets in your sidebars, footer, or page content areas.

back to top

Add Google Analytics

Adding Google Analytics to every page on your site couldn't be easier. Just click the on button and paste the javascript Google Analytics supplies you with, and wholla page tracking for every page on your site! Make sure you inclue the opening and closing script tags that google analytics provides with your code.

back to top

Visual Shortcodes

All of your shortcodes have been built right into the WordPress text editor. A screenshot has been provided below. When you hover over each icon you will get a description for what shortcode it is. Just click on the shortcode you want to add, configure the settings for that shortcode from the pop-up window and click Add Shortcode. This will drop the shortcode right into your text editor. Update your page or post, and your shortcode will show up on your page. In the Demo XML content we have created demo pages for each shortcode, so you can open up any of these pages to view the shortcodes.

back to top

Page Settings

Each Page you create in WordPress has tons of options. Underneath your WordPress Page Editor is a box named Options Theme Page Settings, we included a screenshot below. From this page you can decide if you want to add a page title or a featured image/slider to the top of your page. To add a page title just make sure you turn on the first option Add Page Title, and then enter your page title in the next field Page Title Text. You also have the option to add a featured area to your page. If this option is turned on you will get a larger header and the option to add a slider to the featured area or a static image. If you turn on Add Slider to Featured Area, then you can select from a dropdown one of the sliders you have created. If you turn on the Add Static Image to featured area, you can upload an image. If using a static image you can choose to add an image frame, add a link, choose from 17 shadows and even specify how you want to open that link. The last three options allow you to add a custom sidebar to your page. You can use the custom sidebar creator to create a sidebar and then fill the sidebar with widgets from the widgets page. You can also specify whether you want the sidebar to show up on the left or right side of the page. Please note if you have selected a page template from the WordPress Page Attributes box, this setting will take presidence over your selection here.

back to top

Testimonial Sliders

Testimonial Slide w/framed image

Slider Width: 215 | Slider Height: 400

Image Width: 203 | Image Height: 144

<div class="smallBorder" style="width:203px;height:144px;margin-bottom:15px;">
<img src="http://www.yourwebsite.com/yourImage.jpg" alt="" title="">
</div>
<h4>Testimonial Title</h4>
<span class="testimonialQuote left-align"></span>
<p>
Testimonial Text Goes Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu augue elit, a pulvinar nulla. In hac habitasse platea dictumst. Praesent placerat lobortis rhoncus. Aenean feugiat quam id lorem fermentum non semper quam egestas. Ut at justo eget velit bibendum ultricies a at nibh. Fusce rutrum dui vel est egestas non faucibus leo accumsan.
</p>

Large Featured Area Testimonial Slider

Slider Width: 920 | Slider Height: 407

Image Width: 898 | Image Height: 407

<div style="background-image:url(YourImageUrl.jpg);width:898px;height:407px;" >
<div class="testimonialContent">
<h2 style="color:#444;">Testimonial Title Here</h2>
<span class="testimonialQuote left-align"> </span>
<p style="color:#888;">
Your Testimonial Text Goes Here
</p>
<span class="quoteCite"><em>Testimonial Author's name here</em></span>
</div>
</div>
back to top

Site Credits

Listed below are links to all of the Open Source projects and Creative Commons works, that have helped comprise this WordPress Theme.

Open Source Projects

Images and Icons

Fonts / Typography

back to top