Wave WordPress Theme

Created: 06/11/2009
By: Matt Brett
Contact Info: Please send a direct message via ThemeForest if you are not able to find the answer you’re looking for in this document.

Version History & Changelog

Version 1.7.5 – Released: 08/04/2011

Version 1.7 – Released: 11/25/2010

Version 1.6 – Released: 10/27/2010

Version 1.5 – Released: 08/13/2010

Version 1.4 – Released: 07/29/2010

Version 1.3.5 – Released: 02/26/2010

Version 1.3 – Released: 02/23/2010

Version 1.2 – Released: 02/12/2010

Version 1.1 – Released: 01/18/2010

Version 1.0 – Released: 06/11/2009

Table of Contents

A) Installation & Initial Setup

Unpack the zip file you've downloaded from ThemeForest, and upload the /wave directory to the /wp-content/themes directory on your server.

B) Post Thumbnails

WordPress 2.9+ Post Thumbnails
If you're running version Wave 1.1 and WordPress 2.9 or above, you can make use of the new Post Thumbnails functionality. In this case, assigning an image to be the post thumbnail is very easy. Simply upload your image using the built-in media manager, then click the "Use as thumbnail" link. You can completely ignore the Post Images box when writing posts if you're using the standard post thumbnail.

Backwards Compatible Dynamic Image Resizing
For previous versions of WordPress to 2.9, Wave uses Tim McDaniels’ TimThumb script for resizing the images used in the featured posts sections and in archive listings. Simply upload your images using the built-in media manager or direct FTP, then copy/paste the original file’s path into the Post Image field in the Post Images box. This method can be used if you simply don't want to use the built-in Post Thumbnail functionality, for whatever reason.

When you enter image paths in WP-Admin, you should start with the /wp-content directory. The WP home path is entered automatically in the templates. For example, if your image path is http://mydomain.com/wp-content/uploads/2010/01/image.jpg, you would paste /wp-content/uploads/2010/01/image.jpg in the field.

Incompatible Server Environment Workaround
In the case that your server is incompatible, you will have to resize images manually if you want them to look their best. Otherwise, images will be resized via CSS restrictions, which doesn’t produce the best results. When you disable image resizing, you are required to at least enter an image path for each of the different sizes. If you can’t or don’t want to resize them all yourself, that’s fine. But you have to at least enter a path for each image, or a placeholder (sad face smiley) will be presented. Image sizes are as follows…

Hero Image: 470×260
Sidekick Thumbnail: 190×140
Sub-feature Thumbnail: 158×116
Thumbnail: 124×93

Any easy way to automate image resizing, is to use the WP media manager and adjust your settings so that images are resized to the above specifications automatically when they’re uploaded. From the Settings -> Media panel, change the values to the following…

Thumbnail: 124×93
Medium: 190×190
Large: 470×470

Unfortunately, there’s only 3 options and Wave has 4 image sizes. You can re-use the Sidekick Thumbnail for the Sub-feature Thumbnail and it won’t look too bad.

C) Creating a Video Post

The main textarea is used as you would expect – for the main description of the video. This can be any length you want, but keeping it to a couple moderate paragraphs looks best.

In the Post Type & Video Details box, check the Video Post option. This tells the templates to use the alternate layout designed for video content.

Video Embed Code is the actual chunk of code that produces the video player. I’m assuming most people will be using this theme to present videos hosted elsewhere (YouTube, Vimeo, etc.). Simply copy and paste the entire embed code in this field.

Video Width tells the theme how wide to make the container that holds the video, and in turn, how much space to give the details that float beside it. Width is one of the first attributes you should see in the embed code, simply put the number in this field. For example, if width=”432″, enter 432 in this field.

If your video is very wide or in HD format, you can tell the theme to display this post a little differently to compensate for the large video. By adding a tag named “hd”, the theme will drop the video details below the video, giving it the full width of the site to display the video. This space is flexible, up to 920px.

Self Hosted Videos
New in Wave 1.1, is the ability to post self-hosted videos. This functionality relies on the FLV Embed plugin, which can be configured to your liking. The difference in posting self-hosted videos to using a service like YouTube, is that you use the quicktag in the post content area, as opposed to dumping the embed code in the Additional Information box. You do however, need to put the video's width in the Video Width field. In its simplest form, it looks like this...

[flv:/video/demo.flv 480 360]

There are other paramaters, such as the poster image, which can be found in the plugin's documentation.

VideoPress
Wave has always been compatible with the VideoPress service, simply by pasting the embed code into the Video Embed Code field.

D) Featured Posts

Adding posts to the featured posts section is very easy. On the Write -> Post screen you should notice a new box directly under the main text area titled Post Type & Video Details. This area houses a series of input fields for the featured post and video items. Add an image to your post using either method described in section C. Short Title and Short Excerpt are the fields associated with the featured posts section. Short Title will likely echo the post title, while Short Excerpt is a custom excerpt which is used in the featured posts and homepage index. Leaving these fields blank will result in the theme defaulting back to the post title and automatic excerpt.

Also in the Post Type & Video Details box, there's an option called Featured Post with a checkbox. Checking this box will make your post show up in the featured area on the homepage.

E) Setting up the Nav

New in version 1.4 is the ability to built a dynamic navigation right from WP-Admin. If you're running WordPress 3.0 or above, heave to the Apperance -> Menus section and create a new menu. Typically, the main navigation is called Main Nav. You can now add any pages or categories you'd like to the nav. Reorganize them however you'd like, but keep in mind that Wave only supports 2 levels of navigation.

If you don't setup a custom nav, a dynamic nav is created from pages.

F) Widgetized Sidebars

The sidebars are widgetized, so you can drag and drop standard WP widgets and custom widgets designed specifically for Wave. I didn’t test every single widget I could get my hands on, but the most popular ones should display just fine.

Please refer to the WordPress Codex if you’re unfamiliar with using widgets.

G) Managing Ads

There are several built-in ad spots in Wave. On the Theme Settings panel you will see a series of text areas after the basic settings which are for the ads. Once you have placed your code in the appropriate areas and saved, you will need to add the associated widgets to the sidebars.

The leaderboard doesn’t have a widget, as it’s conditional and is only displayed if there’s code in this box. If you don’t want a leaderboard, simply leave this box empty.

The 125×125 buttons widget can support any number of ads, up to 4. Obviously, even numbers look best. But if you only have 2 ads, don’t fret, it will look just fine.

Each ad box renders out the code you put it in as regular HTML. I’m assuming most people will be using an ad service like AdSense which provides code snippets you simply paste in. If you want to display your own buttons or ads, you’ll need to use full HTML here. For example…
<a href=”http://themeforest.net?ref=mattbrett”><img src=”/wp-content/themes/wave/images/TF_728×90.jpg” alt=”" /></a>

H) Miscellaneous Theme Settings

There are a few other options on the Theme Settings panel that haven’t been covered above.

Custom Logo – If you do have a logo and would like to use it in the header, you can replace the default image pretty easily. Upload your logo to the server (wherever you want), put the path in the Logo Image Path field. The logo dimensions need to be specified as well, since the image space is flexible. The max width is 920px, but the height can be whatever you want. Enter the width and height of your image in the Logo Image Width and Logo Image Height fields following (don’t include px, just the actual number).

Facebook URL, MySpace URL, Twitter URL – When you enter a URL for each of these sites, a nice big button is placed in the header. I will likely be adding more buttons if there are requests for them. I figured the big 3 would be a good start. Buttons only show up if you have entered a URL for them. So if you’re on Facebook and Twitter, but not MySpace – simply leave the MySpace field blank and no button will appear for it.

‹head› Include Code – Some ads require a chunk of code in the ‹head› as well. You can dump that and any other code that needs to be placed in the ‹head› in this field.

Footer Include Code – Most stat tracking code needs to be placed in the footer. Paste that code in this field.

I) Support & Feature Requests

Please send me an email via my ThemeForest profile if you’re having trouble with your theme, and I will do my best to get back to you as soon as possible. Please be patient, as I work freelance full time and do not have dedicated time for theme support. I rarely answer support requests left as comments on ThemeForest.

Also, it would be a good idea to a read through my Terms of Support document, which outlines the extent of support I offer, and information regarding updates, warranty, and compatibility.

J) TimThumb: Dynamic Image Resizer

TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed. There shouldn’t be a problem with most web hosts, but if images are broken, this could be why. Contact your host and see if they can help you out.

If you are certain your server is compatible, you may need to check that the /cache directory is writable on your web server – set the permissions to 755 or 777.

If you absolutely cannot get TimThumb to work, I can offer no further assistance. As such, I’ve included an option in Theme Settings to disable image resizing entirely. In this case, you will have to resize images manually.

K) Supported Plugins

Most plugins will work just fine with Wave. But Wave has been tailored to work with the following plugins out of the box...

L) Credits

Dynamic image resizing via Tim McDaniels’ TimThumb.
http://code.google.com/p/timthumb/

Placeholder sad smiley icon courtesy of Function free icon set by Function Design & Development Studio
http://www.wefunction.com/function-free-icon-set/

Twitter bird icon from Function Design & Development Studio.
http://www.wefunction.com/2009/05/40-free-twitter-badges/

Fancy tooltips on sub-features by Craig Thompson’s qTip jQuery plugin.
http://craigsworks.com/projects/qtip/

Thank You

Once again, thank you so much for purchasing this theme! As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist.

Matt Brett
- http://mattbrett.com
- http://twitter.com/mattbrett
- http://themeforest.net/user/mattbrett