Table of Contents:
01. Installation
07. Blog Settings
10. Menu Navigation
13. Contact Form
16. Template Pages
19. PSD Files
03. General Settings
06. Slider Settings
09. Footer Settings
12. Style Shortcodes
15. Custom Widgets
18. Javascript
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.
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 hthe 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:
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.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.
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:
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:
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.
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.
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.
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.
There are 5 options available to you for each custom slider image you create.
1). Image URL:
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.
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.
If you would like to reorder you slider images, simply click on the reorder image and drag to reorder as shown below:
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:
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:
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 pixFull - 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:
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.
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:
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.
10. Menu Navigation
As of WordPress 3.0 you now have much more control over your sites menu with WordPressʼs 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 WordPressʼs documentation on their new navigation menus feature:
http://codex.wordpress.org/Appearance_Menus_SubPanel
If youʼre currently running an earlier version of WordPress which doesnʼt 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:
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:
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 youʼd 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:
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.
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
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.
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:
The pages are:
1). Full Width Template:
Disables WordPressʼs widget area and allows you to layout content across the full width of the page.
2). Left Sidebar Template:
Displays the themeʼs 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 themeʼs 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/
Your theme offers modification options at the options page for your javascript so you shouldnʼt 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