Coda Blue Slider WordPress Theme

Introduction

WP CODA is a theme I created by modifying several already-existing code snippets and implementing them with my own design. The result is a wordpress theme that mimics the functionality of the very popular Coda website that is the object of so many developers envy. Every aspect of the Coda website was duplicated and this theme works in every major browser.

I, like most UI designers, have a great love for fluid navigation. Panic executed this design philosophy perfectly when they published the Coda site. Perform a quick search for “coda slider” and you’ll see I’m but one designer of many that feel this way. I’ve yet to release a free wordpress theme and I wanted my first one to be different. I saw this as an opportunity to do just that, and since nobody has done it yet (that I could find anyway) I felt it was the perfect pet project. I also needed a pet project to distract me from the slow parts of my current development project. Thus WP CODA was born.

What Next?

More colors and designs. I’ve based the color scheme off the current design of my personal blog and I’ll be releasing a much more generic version. I need to beef up the wp-coda plugin as well as add some conditional support for ie6 and below for the .png images. Beyond that, I’m not sure.

These are unrelated images to show off the gallery zooming ability of the theme

Requirements

Although everything needed to run CODA BLUE is included in CODA BLUE, here is a list of what is required and what is optional:

WordPress 2.5+ (may work with earlier versions)
wp-coda plugin for wordpress (included)
jQuery (included)
jQuery.localScroll (included)
jQuery.scrollTo (included)
jQuery.serialScroll (included)
Coda Slider (included)
Coda Bubble (included)
FancyBox (recommended)(included)
jQuery.preloadCssImages (recommended)(included)

Instructions

I would recommend using this theme on a fresh wordpress installation, although it is not necessary.

Installation Instructions

Download and extract coda-blue.zip.
Upload the wp-content folder to where your wordpress is installed. (It is okay to merge/overwrite if asked by your FTP program)
Activate the theme and the wp-coda plugin from your wordpress admin panel.

Usage Notes

CODA BLUE only displays Pages, not Posts. You can change this opening up coda-blue/index.php and changing the post_type from page to post on line 2
CODA BLUE displays content tabs from oldest(first) to newest(last). This behavior can be changed by changing the order parameter in the same place mentioned above.
WP CODA’s behavior is handled with the query_posts() function. For more information, go to the wordpress codex page dedicated to query_posts()
To get the fancy image zooming effect, put your image(s) in a paragraph with a class name of gallery. If you want your image to have a title, put it as the title attribute of the link to the image.

Resources

Here are links to all the resources I used in making WP CODA

Coda Slider Effect from jqueryfordesigners.com
Coda Popup Bubbles from jqueryfordesigners.com
FancyBox from unknown
CSS Image PreLoader from filamentgroup.com
Floral Brushes for Photoshop from hawksmount.com
Web Apps Icon Set from webappers.com

And of course, Panic for the inspiration.

License

Creative Commons Attribution-Share Alike 3.0 United States License

I went with a Creative Commons license because I like the idea of sharing alike, but I would also like to be attributed for the work I’ve put into this. The short version of this license basically says “you can use it for whatever you want, but if you release derivative works based on it give me a name drop”.

CODA BLUE by Greg Johnson is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License. Based on a work at Bust A Theme.com.

Contact

I know I should probably install cformsII and just put a contact form here, but I have plans for the next version of WP CODA that will solve this issue. For now, you can contact me at email address .

Alternatively, you can visit the WP CODA page on Bust A Theme and comment.