Awake | Theme Documentation

Table of Contents:
01. Installation
02. Image resizing
03. General Settings
04. Homepage Settings
05. Sociables Settings
06. Slider Settings
07. Blog Settings
08. Add Sidebars
09. Footer Settings
10. Menu Navigation
11. Portfolio Setup
12. Style Shortcodes
13. Contact Form
14. Add Post Image
15. Custom Widgets
16. Template Pages
17. CSS Files
18. Javascript
19. PSD Files
20. External Resources

Page 1

Awake | Theme Documentation

01. Installation
Unzip the file you download after purchase. The following files and folders will be in the unzipped file:
psd
licensing
awake
documentation.pdf
changelog.txt
To install the theme upload the folder "awake" to the themes folder at your WordPress installation root directory:
/wp-content/themes/ through your FTP Client.
Next Log into your WordPress admin panel and click on the Appearance >> Themes tab. After that is done, activate
the theme as you would activate any other theme.
If you need help installing Wordpress see the link below:
http://codex.wordpress.org/Installing_WordPress

02. Image resizing

Your theme comes with a built in image resizing script called "TimThumb" this script handles the automatic resizing
of images throughout your theme. If you're are having trouble with the script, for instance if images you have
defined for your portfolio gallery or homepage slider aren't loading, go through the following trouble shooting tips:
1). Does your cache folder have the correct permissions?
You need to give your: /wp-content/themes/awake/lib/scripts/cache/ folder full permissions. In most cases
this is "777" but it may vary depending on where you are hosted. If 777 does not work, try 755. It is
recommended that you contact your host about what permissions to use if you are not sure. Setting
permissions is also known as CHMODing, and can be done using most FTP programs and hosting control
panels.

Page 2

Awake | Theme Documentation

2). Does the file "thumb.php" have the correct permissions?
Make sure the following file has the correct permissions needed for your server:
/wp-content/themes/dejavu/lib/scripts/thumb.php
In most cases this is "644" but it may vary depending on where you are hosted. If 644 does not work, try 755
or 777. It is recommended that you contact your host about what permissions to use if you are not sure.
Settings permissions is also known as CHMODing, and can be done using most FTP programs and hosting
control panels.
3). Does your server have the GD library compiled with its version of PHP?
This script requires the GD library to be installed. If your thumbnails are not working, check with your host to
make sure that you have it.
4). Does your server have mod_security settings that are impeding the scripts functionality?
Some servers may have mod_security settings that will stop the script from working. You should always
contact your host if you are having problems to make sure they do not have settings enabled that would stop
the script from working.

03. General Settings

Upon activating the theme, from your WordPress admin panel, you will notice the "Awake" options tab at the
bottom of your WordPress admin panel menu options. Click on it. Your current theme options page will look like
this:

Page 3

Awake | Theme Documentation

Page 4

Awake | Theme Documentation

You'll see that your current theme options page is broken up into 8 tabs "General Settings", "Homepage,
"Sociables, "Slider", "Blog", "Sidebar", "Footer", "Navigation." Clicking on any of these option names will active that
options tab. The current active tab will be "General Settings."
Below is a description of every option for the first tab "General Settings":

1). Style Variation

For your convenience, we have included 30 different style variations. After selecting your preferred style
variation from the drop down box, click on the "Save Changes" button at the bottom left of the options page.
You can now navigate to your website URL in your web browser to view the newly selected style variation.
2). Custom Logo or Site Title
The default setting for this option is "Display Logo", with this option selected you'll see the "Custom Logo"
text field below. Here you may enter the full URL of any custom logo image you have created and uploaded
to your sever.
The second option for this setting is "Display Site Title", with this option selected the "Site Title" that you
have defined under Settings >> General in your WordPress admin panel will be displayed instead of a logo
image.
3). Header Contact Info
This option is ideal for adding a phone number or other text to the header. The text you enter here will be
displayed above the menu and below the sociables
4). Custom Favicon
Here you may enter the full URL of your custom favicon. A favicon.ico is the icon that get displayed in the
address bar of every browser.
5). Homepage Slider on Every Page?
Check this box to have the homepage slider displayed at the top of every page & post.

Page 5

Awake | Theme Documentation

6). Header Teaser Text
This option controls the "Header Teaser Text" that displays globally across your website below your menu
navigation and before the actual content of each of your website's posts or pages. The default setting for the
option is "Custom". If this option is selected, you will see directly below the "Header Teaser Custom Text"
text field box. Here you can enter any text you like, and it will be pulled in globally on all of your website's
posts or pages.
The second option is "Twitter." If this option is selected, your most recent tweet will be pulled in globally on
all of your website's posts or pages. If this option is selected, you'll see directly below the "Twitter
Username" text field box. You can enter your Twitter username here.
The third option is "Disable." This option will globally disable the Header Teaser Text on all of your website's
posts or pages.
You may override any of these global "Header Teaser Text" options on a post-by-post or page-by-page basis
whenever you create or edit a post or page in the "Awake General Page/Post Options" panel as shown
below:

Page 6

Awake | Theme Documentation

7). Header Teaser Style
This option controls the style of the "Header Teaser Text".
8). Disable Cufon?
By checking this option you will disable the "Cufon" font replacing script on your website. For more
information about this script and what it does you may visit:
http://wiki.github.com/sorccu/cufon/about
9). Disable Breadcrumbs?
By selecting this option, you'll globally disable your website's breadcrumb navigation.
10). Google Analytics
You may insert your Google Analytics (or other) code here.

04. Homepage Settings

Selecting the "Homepage" tab in your theme's option page will bring up all of the options available for customizing
your website's homepage.
Below is a description of every option under the second tab "Homepage":
1). Homepage Teaser Text
Whatever text you enter here will be displayed on your homepage in the teaser text section underneath the
homepage slider.
2). Disable Homepage Teaser Text?
Checking this option will disable the teaser text section underneath the homepage slider.

Page 7

Awake | Theme Documentation

3). Homepage Teaser Button Link?
This option controls the where the "Teaser Button" on your homepage links to. The default setting for the
option is "WordPress page". If this option is selected, you'll see directly below the "Teaser Button" dropdown
select box. Here you can select the "WordPress page" that the "Teaser Button" links to.
The second option is "Custom link". If this option is selected, you'll see directly below the "Teaser Button"
text field box, here you can define the custom URL that the "Teaser Button" links to.
4). Homepage Teaser Button Text
Enter the text you'd like to appear in the homepage teaser button.
5). Disable Homepage Teaser Button?
Check this box if you'd like to disable the homepage teaser button.
6). Disable Slider?
Check this box if you want to disable the homepage slider.
7). Display Blog Posts on Homepage?
Check this box if you want to display blog posts on the homepage. The blog posts will appear below the
main homepage text defined in the "Homepage Content Editor".
8). Homepage Content Area
The Page you choose here will be imported into homepage content area. The content of the selected page
will appear below the main homepage text defined in the "Homepage Content Editor".
9). Homepage Content Editor
Here you can custom define any content that you'd like displayed on the homepage. The content editor
functions just as WordPress WYSIWYG editor, excepting both HTML and shortcodes. The text you enter
here will appear above all other content on the homepage.

Page 8

Awake | Theme Documentation

05. Sociables Settings
Selecting the "Sociables" tab in your theme's option page will bring up all of the options available for customizing
the sociables located in your website's header.
Below is a description of every option under the third tab "Sociables":
1). Twitter Username
Enter your Twitter username here.
2). Disable Twitter Icon
Check to disable the Twitter icon.
3). Facebook Username
Enter your Facebook username here.
4). Disable Facebook Icon
Check to disable the Facebook icon.
5). Email Address
Enter your email address here.
6). Disable Email Icon
Check to disable the Email icon.
7). Feedburner RSS URL
Enter your Feedburner URL here (leave this field blank to use WordPress's built-in feed).
8). Disable RSS Icon
Check to disable the RSS icon.

Page 9

Awake | Theme Documentation

06. Slider Settings
Selecting the "Slider" tab in your theme's option page will bring up all of the options available for customizing your
website's slider.
Below is a description of every option under the fourth tab "Slider":
1). Slider Type
This option controls the type of slider that your homepage will use. With the first option "Fading Slider"
selected your homepage slider will fade from one frame to the next. With the second option "Tabbed Slider"
selected your homepage slider will tab from one frame to the next.
2). Slider Autorotation
Here you can select if the homepage slider should autorotate.
3). Slider Transition Speed
Enter transition time for slider in milliseconds (1 Second = 1000 milliseconds)
Default is 5000 milliseconds.
4). Slider Image Source
You have two different slider source options available. Below are instructions for setting up each slider
source option:
1). Custom define the images that the slider uses

You can add as many custom slider images as you like by clicking the "Click to add new row" button
as shown below:
There are 5 options available to you for each custom slider image you create.
1). Image/Video:

Page 10

Awake | Theme Documentation

For an image enter the full URL to the image you would like to show up on the homepage
slider. If you would like the image to take up the full width of the slider the image dimensions
should be 960 x 400 pixels.
The slider also supports YouTube & Vimeo videos, just enter the URL for the video, for
example:
http://vimeo.com/8011831
http://www.youtube.com/watch?v=NN9MmXAuWPg
2). Link URL:
The URL of where you would like the image to be linked to if the image was clicked.
3). Title:
The Title text of the content for your homepage slider.
4). Stage Effect:
Each custom slider you create has 5 staging effect options. Below are the images sizes for
each effect:
Staged - 900 x 350 pixels
Partial Staged - 567 x 344 pixels
Partial Gradient - 510 x 344 pixels
Floating - 900 x 350 pixels
Full - 980 x 420 pixels
5). Disable "Read More" Button:
By default if you have a "Link URL" defined in your slider options a "Read More" button will
also appear in your slider. Check this box to disable the "Read More" button.
6). Description:
The Description text of the content for your homepage slider.

Page 11

Awake | Theme Documentation

If you would like to reorder you slider images, simply click on the reorder image and drag to reorder
as shown below:

Page 12

Awake | Theme Documentation

2). Use post categories

Select the post categories that will populate the image slider and enter the number of slider images to
display as shown below:

Page 13

Awake | Theme Documentation

Create a new blog post and enter the full image URL in the "Homepage Slider Image" text box in the panel
"Awake General Post Options" as shown below:

Page 14

Awake | Theme Documentation

Next select your staging effect. Each custom slider you create has 5 staging effect options. Below are the
images sizes for each effect:
Staged - 900 x 350 pixels
Partial Staged - 567 x 344 pixels
Partial Gradient - 510 x 344 pixels
Floating - 900 x 350 pixels
Full - 980 x 420 pixels
If you would like to disable the post excerpt content from appearing on the homepage slider check the
"Disable Slider Text".
Finally be sure to select the category that you selected to populate your homepage image slider in your
newly created blog post as shown below:

Page 15

Awake | Theme Documentation

07. Blog Settings
Selecting the "Blog" tab in your theme's option page will bring up all of the options available for customizing your
website's "Blog".
Below is a description of every option under the fourth tab "Blog":
1). Blog Page
The Page you choose here will display your blog. Best practice is to first create a blank page with the name
of your choice.
2). Display Full Blog Posts or Display Excerpt?
This option controls whether the blog index page displays the full posts making use of the WordPress
quicktag <!--more--> to designate the "cut-off" point for the post to be excerpted,
Or Displays the excerpt of the current post which refers to the first 55 words of the post's content.
3). Exclude Categories
The blog page usually displays all Categories, but if you want to exclude some of these categories (for
example portfolio entries), you can exclude multiple categories here.
4). Disable Related & Popular Post Module?
By selecting this option, you will disable the Related & Popular Post Module at the bottom of each blog post.
5). Disable Social Bookmarks?
By selecting this option, you will disable the Social Bookmarks Module at the bottom of each blog post.
6). Disable About Author Box?
By selecting this option, you will disable the About Author Box Module at the bottom of each blog post.

Page 16

Awake | Theme Documentation

7). bit.ly API URL shorting
You can choose to automatically have your post URL shortened for the links posted in the social bookmarks
module by using the popular URL shorting service bit.ly.
To get started, you'll need a free bit.ly user account and apiKey. Signup at: http://bit.ly/account/register
If you already have an account, you can find your apiKey at: http://bit.ly/account/your_api_key
Then enter your "bit.ly login" and "bit.ly API key" in the appropriate fields
Finally enable this feature first check the Enable bit.ly API URL shorting checkbox.

08. Add Sidebars

Selecting the "Sidebar" tab in your theme's option page will bring up the "Add Sidebar" text field.
Enter the name of the new custom sidebar you would like add and click on the "Save Changes" button at the
bottom left of the options page.
You will now see your newly created custom widget available by clicking on Appearance >> Widgets on your
WordPress administration menu. You can now add Widgets to your newly created sidebar.
You can now activate your newly created sidebar on a post-by-post or page-by-page basis whenever you create or
edit a page or post in the "Awake General Page/Post Options" panel as shown below:

Page 17

Awake | Theme Documentation

09. Footer Settings
Selecting the "Footer" tab in your theme's option page will bring up all of the options available for customizing your
website's "Footer".
Below is a description of every option under the fourth tab "Footer":
1). Footer Teaser Text
Whatever text you enter here will be displayed in the teaser text section above the widgetized area of the
footer.
2). Footer column layout
Select the number of footer columns you'd like the footer widgets displayed in. The default is a 6 column
footer.
3). Disable Footer?
Check this box if you'd like to disable the footer widgets. This will completely remove the widgetized footer
area at the bottom of every page.
4). Copyright Footer Text
Whatever text you enter here will be displayed on your website's footer. The primary purpose of this option is
to display your website's Copyright text, but you can enter whatever text you like.
5). Include Footer Page Links
Check the pages that you would like to be displayed on your website's footer.

Page 18

Awake | Theme Documentation

10. Menu Navigation
As of WordPress 3.0 you now have much more control over your sites menu with WordPresss new Navigation
Menus feature. The Menus feature allows you to create a navigation menu of pages, categories, custom links, tags,
etc. that is presented to your visitors.
Below is a link to WordPresss documentation on their new navigation menus feature:
http://codex.wordpress.org/Appearance_Menus_SubPanel
If youre currently running an earlier version of WordPress which doesnt support Navigation Menus selecting the
"Navigation" tab in your theme's option page will bring up all of the options available for managing your menu
navigation.
Simply click on the check-box of the page that you would like to hide from your menu as shown below:

Page 19

Awake | Theme Documentation

11. Portfolio Setup
Below are step by step instructions for adding a portfolio gallery to your website:
1).
Create a new category by going to Posts >> Categories in your Wordpress admin menu. For instance create a new
category called "Portfolio"
2).
Then create a new post by going to Posts >> Add New in your Wordpress admin menu.
First make sure you select the new category you just created "Portfolio" in the "Categories" post option box to the
right of the screen.
Second paste the full url of the image you would like to use for the portfolio fullsize image (e.g. http://
www.yoursite.com/portfolio_full_img.png) into the "Portfolio Fullsize Image (required)" option field underneath the
"Awake Portfolio Page Options" below Wordpress content editor.
Then publish the post.
The only field that is required is the "Portfolio Fullsize Image." Click on the "[+] more info" link for a more detailed
description of each option.
3).
Create a new page by going to Pages >> Add New in your Wordpress admin menu. For instance create a new
page called "Gallery"
Then click on your themes icon in your WordPress WYSIWYG editor, then click on the "Portfolio" tab as seen in the
screenshots here:

Page 20

Awake | Theme Documentation

Page 21

Awake | Theme Documentation

Select the "Portfolio" category you just created from the "Select category" drop down option
Select the gallery column layout.
Select the max number of portfolio images you would like to display.
Select if the portfolio image should link to a Thickbox Pop-up or link to the portfolio blog post
Click "Insert" to insert the gallery shortcode into the WYSIWYG editor.
Then publish the page.
The portfolio post you created should now show up on the "Gallery" page you just created. Repeat the above steps
to add as many portfolio gallery posts youd like.
To add a video follow the above steps, but when you get to step # 2 add one of the supported video formatted links
below into the "Portfolio Video Link (optional)" option field underneath the "Awake Portfolio Page Options" below
Wordpress content editor.
Supported Video formats:
Vimeo:
http://vimeo.com/8011831
YouTube:
http://www.youtube.com/watch?v=NN9MmXAuWPg
.swf:
http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294
.mov
http://trailers.apple.com/movies/disney/oceans/oceans-clip1_r640s.mov?width=640&height=272

12. Style Shortcodes

Your theme comes with over 70 custom style shortcodes that allow you to add custom styles to your post or page
content. Click on the shortcodes icon in your WordPress WYSIWYG editor as shown below:

Page 22

Awake | Theme Documentation

Page 23

Awake | Theme Documentation

Simply select the style you would like to use then click "Insert" to insert the style shortcode into the WYSIWYG
editor. You can then type any text within side the shortcode brackets and the style will be applied to the text.
For examples of all the custom shortcode styles available for your theme visit:
http://themes.mysitemyway.com/awake/shortcodes/

13. Contact Form

To add a contact form to your website, first create a blank page with the name of your choice. Then click on the
Contact Form tab in your WordPress WYSIWYG editor shortcode settings as shown below.

Page 24

Awake | Theme Documentation

Enter in the email address where you would like the contact form submission to be sent.
Simply click "Insert" to insert the contact form shortcode into the WYSIWYG editor.

14. Add Post Image

Your theme comes with the option to assign each blog post a default image. This image is used for your theme's
Related Posts, Popular Posts & Recent Posts Widgets as well as your blog's index page.
To assign each blog post a default image, fill out the "Post Image" text field in the "Focus General Options" panel
as shown below. The "Post Image" text field option also supports YouTube & Vimeo videos, just enter the URL for
the video, for example:
http://vimeo.com/8011831
http://www.youtube.com/watch?v=NN9MmXAuWPg

Page 25

Awake | Theme Documentation

15. Custom Widgets
Your theme comes with 7 custom widgets:
1. Recent Post:
Displays your blog's most recent posts.
2. Popular Post:
Displays your blog's most popular posts.
3. Twitter:
Displays your most recent tweets.
4. Contact Us:
Allows you to quickly add your contact info (e.g. Name, Address, Phone, Email).
5. Flickr:
Pulls in images from your Flickr feed.
6. Contact Form:
Adds a contact from to your sidebar.
7. Sub Navigation:
Displays a list of sub pages in sidebar.
Simply drag one of your theme's custom widgets to a sidebar and enter the appropriate settings if needed.

Page 26

Awake | Theme Documentation

16. Template Pages
Your theme comes with two WordPress template pages that you can select when you edit/publish a page from the
Edit Page Attributes settings box as seen below:

Page 27

Awake | Theme Documentation

The pages are:
1). Full Width Template
Disables WordPresss widget area and allows you to layout content across the full width of the page.
2). Left Sidebar Template
Displays the themes sidebar on the left side of the page.
3). Sitemap Template
Creates a page that lists all of your sites internal Pages, Feeds, Categories, Blog Posts and Archives.
To activate one of your themes page templates simply select it from the drop-down box and then click the Publish
or Update button.

17. CSS Files

Your theme's CSS is split into two files. The first one (style.css) holds all of your theme's base CSS styles. The
second set of CSS styles is located in your theme's style directory: /wp-content/themes/awake/styles/
This folder contains all of the separate CSS files for your theme's 30 color variations. If you want to create a unique
custom layout, just change the settings in one of the stylessheets.

18. Javascript
Your theme contains many advanced jQuery functions to produce image preloading, image hover animation effect,
and drop down menu navigation.
If you feel the need to customize any functions for any reason, all of your theme's jQuery functions are located in a
file called "custom.js" in your theme's scripts directory /wp-content/themes/awake/lib/scripts/

Page 28

Awake | Theme Documentation

Your theme offers modification options at the options page for your javascript so you shouldnt need to edit the file.
These options include Disable/Enable Cufon font replacement, turn on/off homepage slider autorotation and
homepage slider transition speed.
The jQuery plugin prettyPhoto was used for your portfolio gallery's lightbox effect. To activate the lightbox on a link
add the rel="lightbox" or rel="prettyPhoto" to the link.
example:
<a href="/your_image_big.jpg" rel="prettyPhoto">

<img src="/your_image_small.jpg" />
</a>

19. PSD Files

Included with your theme are 4 fully layered PSD's as well as sliced PSD's for easy editing of all color variations.

20. External Resources

jQuery TOOLS:
http://flowplayer.org/tools/index.html
Galleria image gallery:
http://galleria.aino.se/
Cufon Font Exchange:
http://wiki.github.com/sorccu/cufon/about
Logo Font:
http://dejavu-fonts.org/wiki/Main_Page
prettyPhoto Lightbox Effect:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone
timthumb Image Resizing Script:
http://code.google.com/p/timthumb

Page 29