Custom WordPress Development for TeenTruthLive.com

Teen Truth started as a video documentary by Horizon Intertainment, created by handing teens video cameras to get their take on school violence shortly after the Columbine massacre in ‘99. It has since grown into a series of documentaries and Teen Truth Live, a live motivational speaking event that has now spoken in front of millions of students across the country.

Their website had been a static HTML site, difficult to update and lacking the ability to comment or interact in any way. Producers JC Pohl and Erahm Christopher asked their original designer, David Richards to update his original design and brought me on to program the site using WordPress as a backend. David’s new design stayed true to the original idea and maintained the well-established brand of Teen Truth, while modernizing it, bringing some greatly improved navigation and adding some moving pieces that really bring the site to life. By moving from a static HTMl site to a site powered by WordPress, they now have the ability to add content at any time, allow their fans to comment on articles, and will benefit from the amazing SEO powers of a properly configured WordPress site.

Visit the Live Site

Here are some Highlights:

The Home Page

The home page is a good look at the overall design and is probably the most complex page on this site. It contains an embedded video, a fading slideshow gallery, sliding panels across the center of the page, a rotating series of sponsor images, two separate categories of news feeds, a Facebook Fan Box, and small section of ‘Upcoming School Events’ which pulls the next three upcoming events from the calendar section.

The Sliding Panels

The sliding panels across the middle of the home page provide not only some color and movement to the page, but easy access to the three main programs that are the focus of the Teen Truth project – the three videos. Each slider contains a brief description, which is editable from the WordPress backend and links directly to the page for the given video.

The News Sections

There are two separate news sections that take advantage of the traditional blog functions of WordPress. Both sections are highlighted on the home page and have their own section of the site that act like traditional blogs, with categorized posts and the ability to comment.

The Store Page

Because there are only a few products and the payments are being processed with Paypal, the store page was simply hand coded as is using Paypal’s shopping cart system, rather than use a separate e-commerce site or one of the WordPress e-commerce plugins, which I have found to be fairly buggy and unreliable.

The Calendar

The most complex single aspect of this site was the calendar. To add dates, I used the Flutter plugin to create a custom post type, organized by date. Within each date, any number of events can be added for each of the four Teen Truth Live event types. Those events are then displayed on the calendar page, in order and month-by-month, each with the proper color code for that event. On the home page, the next three upcoming events of any type are displayed. You can see this working in the two screen grabs below. Because this is these were taken on Jan. 12, the event from 01.12 on the calendar page is not on the home page but the next three from 01.13 are shown. The fourth event, on the 15th, is not shown.

Behind the Scenes

Like most WordPress sites, this one relies heavily on some plugins made available for free by talented programmers who deserve credit. I also made use of a new toy – jQuery Tools, which provided the code for the sliding panels.

• Flutter - Adds custom fields to any post and creates custom post types. Used to create the variety of page layouts, including the calendar section.
• jQuery Tools – An incredible source of ready-built yet customizable user-interface tools that can be used to enhance the usability and navigation of a site.
• And, as always, I used my Recommended Plugins for optimizing the site and improving SEO.