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.

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

Requirements

Although everything needed to run WP CODA is included in WP CODA, 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

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

Usage Notes

• WP CODA only displays Pages, not Posts. You can change this opening up wp-coda/index.php and changing the post_type from page to post on line 2
• WP CODA 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”.

WP CODA 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 .

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