How Skyrocket Websites Delivered The Butterfly Circus Site in a Week

Bringing The Butterfly Circus to Life Online

When the filmmakers behind The Butterfly Circus premiered their award-winning short, they realized their site wasn’t ready for the audience of millions who watched the film. With the release imminent and a tight deadline looming, they tapped Skyrocket Websites, led by designer Nick Daugherty, to overhaul the site on WordPress. The goal was clear: craft a visually authentic experience that evoked the 1930s era while enabling direct sales of DVDs and soundtracks.

Choosing a Proven Framework Over Starting from Scratch

Rather than untangle the half-finished custom theme left by a prior contractor, Nick recommended the Canvas theme from WooThemes. By creating achild theme, he isolated all custom code, ensuring easy maintenance and future updates. From there, the process unfolded in carefully planned phases that focused on graphics, layout hooks, and strategic CSS overrides.

Extracting and Styling Graphic Elements with Pure CSS

The ornate frame that surrounds each page became the centerpiece of the design. Broken into a top, middle, and bottom section, the frame leverages z-index stacking and transparent, repeating backgrounds to stretch with page content. The bottom frame element required a single new hook added viawoo_footer_topinfunctions.php, allowing a clean injection point without modifying parent templates. Each navigation item was styled by targeting menu item IDs and assigning background images via CSS position.

Crafting a Flash-Free Animated Introduction

Instead of outdated Flash, the homepage intro uses jQuery to animate five distinct phases. After positioning each image absolutely in a customtemplate-animation.php, a simple script inhomepage-animation.jsfades and slides elements into view on page load. This approach delivers an engaging experience without sacrificing mobile compatibility or speed.

Powering E-commerce and Forms

To enable DVD sales, the team integrated MarketPress, a WordPress plugin that leverages custom post types for product management. A single shortcode embedded the store page with cart and coupon features. Gravity Forms handled advanced contact routes, tying directly into Mailchimp and Campaign Monitor for mailing list signups. Custom footer widgets and metaboxes gave the clients full control over per-page backgrounds and email opt-ins.

Results and Timeline

In just over one week, the site launched fully functional, matching the film’s 1930s aesthetic and offering seamless DVD ordering. By avoiding core theme edits, future updates remain straightforward. The site now boasts a cohesive brand presence and empowers The Butterfly Circus team to manage content, forms, and sales with ease.

Key Learnings

• Standardized frameworks can accelerate development under tight deadlines while still allowing unique design work.
• Child themes safeguard parent templates, making maintenance smoother when WordPress or theme updates are released.
• CSS-only solutions for complex frames and navigation preserve performance and compatibility across devices.
• jQuery animations can emulate Flash-like intros without plugins, keeping the site accessible and light.
• WordPress plugins like MarketPress and Gravity Forms streamline e-commerce and form workflows without custom database tables.
• Custom theme options and metaboxes give clients user-friendly controls for styling elements per page.