For their Projects, Personnel and Facilities pages, we needed a way to display images, information and links without being confined to the normal block of text. To accomplish this in a way that added to the design, made the information more readable and was still easy to edit from the backend, would not have been possible without the Flutter plugin, which allows you to create custom content types and then display those different content areas anywhere on the page.

The Home Page

The overall concept is meant to be a clean, modern design that would properly represent a professional production company.

click for large view

The Personnel Pages

The main focus of this site is to showcase the personnel and sound stages that are available to be packaged. The personnel are categorized by their positions from Post Production Supervisor to Composer to Sound Mixer and everything in between. Each person would need a quick bio, a headshot, a list of credits and an area to highlight some past projects. Each highlighted project would also need an image and a series of links.

Here is a look at one of the composers:

click for large view

The News Section

The standard blog abilities of WordPress were put to use in the News section where I was able to try out the new Post Image functions available in WordPress 2.9. In previous versions, giving each post a thumbnail required adding plugins and a decent amount of code. Now it is as easy as uploading an image and adding one simple line to the template files. The use of thumbnails really added a lot, especially to a basic clean design like this one.

click for large view

To view large scale images, I used the same plugin you see on my site as you view these images, the Shadowbox JS plugin. It automatically adds this effect to any image that links to itself in a post. Really easy to use and adds a lot to the final product.

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.

With one login and only one site to edit, there is access to several categories of photo galleries, essentially unlimited pages, and a fully integrated blog. The design is customized on every page, with varying layouts and thumbnails for each section that really bring this site beyond the typical design. At the same time, the look is a very clean – almost all in white, allowing the amazing images from the photographers at Studio Diana to be the star of the show.

Visit The Live Site

Here are some highlights:

Home Page

The home page features a rotating slideshow of fading images in the upper right corner, links to featured galleries across the bottom and a feed of the latest blog post in the lower right.

click image for larger view

Photo Galleries

This is a look at the Portraits section of photo galleries. The thumbnail menu stays put on every page, allowing a viewer to switch between any of the galleries while the gallery itself loads on the right hand side.

click image for larger view

About Us Section

The About Us section itself has several different layouts, with this being the main look, using another take on the thumbnail menus.

click image for larger view

Contact Page

The Contact page is not generally the highlight of a site, but I like the clean look of this one. Each field uses a custom background image, rather that the usual HTML based box, just one of the subtle touches that puts this design on another level.

click image for larger view

The Blog

The Custom blog section is not a different site, but all edited from the same WordPress backend. It fits the design of the overall site, but stands on its own as well to help make it stand out from the ‘website’ part of this site.

click image for larger view

Image Galleries in the Blog

The blog uses another way of displaying images, the same one I use in this post, where the images pop up into a gallery while the screen goes dark around it.

click image for larger view

Visit The Live Site

Behind the Scenes

This site would not have been possible without some of the WordPress plugins that are made available for free by some amazingly talented programmers who put in a lot of time and effort. Here is a list of some the plugins I used in no particular order:

• Flutter - Add custom fields to any post and create custom post types. Used to create the variety of page layouts.
• NextGen Gallery and NextGen FlashViewer – Used for the portrait and wedding galleries. Displays images in a customized flash viewer.
• Shadowbox JS – Used for the pop-up gallery in the blog (and on this site).
• And, of course, I used my Recommended Plugins for optimizing the site and improving SEO.

With all of our sites, we try to incorporate some level of social media interaction. Custom blogs generally get a Twitter feed with a custom design and prominent links to any other sites the client wants to feature. This could be Twitter, Facebook, Myspace, etc.

Here is a look at a few of the projects:

TheUnbride.com

The Unbride is a blog that covers unusual wedding ideas, from all of the different vendors, to interesting venues, etc. Building the site took a lot of advanced Customization of WordPress using different views depending on which category we are viewing. See it in action here: http://theunbride.com/

TheUnbride.com

Click Image for Full Size

EclecticAudio.com

Eclectic Audio is a bit of a different project for me. The site is entirely (sort of) in Flash, built by Ellen’s assistant, Mandee Astuti, a talented designer herself.

Normally the URLs of a flash site would look like http://ecleticaudio.com the whole time because it is actually one page, with a Flash movie inside of that one page. But we split every ‘page’ of the Flash site into a separate Flash file, so that we could end up with standard links to each page. This means you will be able to see and link to ‘http://ecleticaudio.com/about’, ‘http://ecleticaudio.com/contac’t, ‘http://ecleticaudio.com/music’ etc. This is very important for SEO purposes but we are also planning ahead for a soon to come WordPress version of the site which will wrap the flash files for the main site and also incorporate a blog. One other step was to use URL re-writing to make sure the URLS show up as ‘/about’ and not ‘/about.html’, which is what they actually are. Again this was for SEO purposes and to plan ahead for WordPress, which does not end their URLS in .html.

And if all that wasn’t programming geek enough for you… I was also able to develop a little PHP function that allows me to now easily embed a Flash file using a few words of code rather than typing in the entire things each time. If you don’t know what any of that means, just enjoy the site…

See the site in action here: http://eclecticaudio.com

EclecticAudio.com

Click Image for Full Size

LAStylistMom.com

LAStylistMom was a fairly straightforward blog on my end, but features some nice logo work and site design by Identity Kitchen.

See it in action here: http://lastylistmom.com

LAStylistMom.com

Click Image for Full Size

TriciaBPhoto.com/blog

This is another custom blog, this time for a photographer. It features custom logo work and site design by Identity Kitchen.

See it in action here: http://triciabphoto.com/blog

TriciaBPhoto.com/blog/

Click Image for Full Size

A Look At the Site

Click for larger Image

A Look At the New Blog

Click for larger Image

Details: Social Media Links

Details: Custom 404 Page

As I explained in the post about another site, the 404 error page is one of the most overlooked aspects of any site. A site should be able to handle when something goes wrong. If you have ever reached a site that said something like ‘The Page you are looking for can not be found,” you are looking at what is called a 404 error page. 404 refers to the numerical code thrown back to the browser by the server. Generally, these pages are ugly and not very helpful. The standard WordPress 404 will simply provide a serach box, if anything and will probably be a plain page. But wouldn’t it be more helpful to provide suggestions for what the visitor might be looking for?

It is possible to add an instant search result to these pages, using the url that the person was looking for. Rather than saying the site can not find that page, we have the site do a quick search and see if it finds anything close. This is great because a lot of these errors are just misspellings or typos. But the search will probably find it. Just in case the search fails, I also have it list the categories and archives links.

To see it in action try this link http://plumtreestudios.com/blog/ wedding photograph. You can see that there are blank spaces in the link and there is definitely no URL there. But instead of an error, the site offers several posts that relate to those locations.

Details: Custom 404 Page

Click for Larger Image

Details: Custom Site Options

Across the top of most blogs, you could display the title and description of the blog, have a single image as the header (possibly an image that includes a logo, or the title of the site), or you could do something fancy like a fading slideshow of images. Picking any one of these would mean being stuck with it unless you know how to edit code yourself or want to hire your web guy again for changes.

So I have started including an options area in all my sites where the user can select any of the three options at any time. Not only that, the fading slideshow I use reads any image you put in a folder. All you have to do is upload images to the folder to change your slideshow. If you ever get sick of the fading images, just change the option and upload a single image right in the WordPress admin area.

Details: Custom Site Options

Click for Larger Image

With an existing website and a strong brand and logo already in place, I simply had to adjust colors and fonts to match the existing site. For the background image, I had to create a new image using the background of the current site, filling in the middle portion where the website sits. There were also some custom programming tweaks to make the menu work the way we wanted, fix the layouts of the category pages, etc. Then I added the standard set of WordPress plugins to help with optimizing the site’s performance.

For better visibility in the search engines, I added the All in One SEO Pack plugin for WordPress. It allows you to customize the all important title tag for every page of your site. For the title tags, we used ‘Los Angeles Wedding Photographer, Indian Wedding Photographer’. The site currently ranks in Google at #5 for ‘Los Angeles Wedding Photographer’ and #4 for ‘Indian Wedding Photographer’.

Existing Portfolio Site

Click for fullsize view:

New Matching Blog

Click for fullsize view:

A while back, I had also done a custom splash page for the main site, with links to all of her sites and the blog.

A look at the Splash Page

Click for larger image

A look at the portfolio site

Click for larger image

A look at the Blog

Click for larger image

Details: Post Titles

There were lots of little details that added to the finished blog, a combination of design elements and custom programming to add some life to the site.

With a long list of posts in a blog-style layout, there is an opportunity to add imagery between the posts or surrounding the titles as a way to help separate one post from the next. I used a combination of things for Jules’ blog. Behind the title, I added a version of the swirl design and flowers that make up the background of the site.

To the left of each post is a set of icons that change depending on the category – cake for weddings, camera for photographer related posts, a house for portraits and a dog for dog portraits.

Details: Custom Images for Post Titles

Click for larger image

Details: Custom Comments on the Home Page

Usually comments are made on the permanent page for a single post. When you are looking at a long list of posts, you first have to click onto another page and wait for it to load before making a comment. But with a little bit of trickery, WordPress can list the comments for each post anywhere, including right under each post on the home page.

You can also have some fun with the text area where you type in the comments. Adding the three information boxes across the top helped save space and the little flower makes another appearance as the background of the textarea.

Details: Custom Comments

Click for larger image

Details: Custom Social Media Links and Welcome Area

One of the most important aspects of building a web presence is to connect all of the different parts to each other and make sure they are easy to find. Right across the top of the site, just under the fading slideshow header area, there is an area with a picture, the most recent Twitter status, easy to find links to Twitter and Facebook, a series of links to Jules’ other important sites, and a little link for her book, Olive Goes to Hollywood. Another interesting twist was to make the image of Jules randomly change on each page load. Try refreshing the site and the image will change every time.

Details: Connecting

Click for larger image

Details: Custom 404 Error Page

This is one of the most overlooked aspects of any site… What happens when something goes wrong? If you have ever reached a site that said something like ‘The Page you are looking for can not be found,” you are looking at what is called a 404 error page. 404 refers to the numerical code thrown back to the browser by the server. The technical aspect is one thing, but generally, these pages are ugly and not very helpful. The standard WordPress 404 will simply provide a serach box, if anything and will probably be a plain page. But wouldn’t it be more helpful to provide suggestions for what the visitor might be looking for?

It is possible to add an instant search result to these pages, using the url that the person was looking for. Rather than saying the site can not find that page, we have the site do a quick search and see if it finds anything close. This is great because a lot of these errors are just misspellings or typos. But the search will probably find it. Just in case the search fails, I also have it list the categories and archives links.

To see it in action try this link http://julesbianchi.com/blog/Four Seasons & Il Cielo . You can sse that there are blank spaces and an ampersand in the link and there is definitely no URL there. But instead of an error, the site offers several posts that relate to those locations.

You can see another example of this in my post about the custom blog for Plum Tree Studios.

Details: Custom 404 Page

Click for larger image

The site has been growing more popular and looks like it will continue now that they have a weekly column on the Huffington Post and some other big sites are going to start running weekly posts as well.

From a design standpoint, I didn’t have much to do on this one. We started with the Revoltion Theme for WordPress and fixed some of the colors and layout. Most of what I did was on the programming end of things, creating the menus and helping to structure the site.

Here is a look at the home page:

For the thumbnails I used one of my favorite plugins, the WP Post Thumbnail plugin, which adds an easy to use thumbnail creation tool to the wordpress editor. As you create posts, you can upload an image, crop and resize up to three thumbnails per post. Once the post has these thumbnails, they can show up in different areas of the site.

You can see the small thumbnails on the home page:

A large square thumbnail show up for every ‘Mondays’ post on the Mondays Page:

And for the Campaigns Page, I used a large rectangle:

With one simple plugin, we were able to add some nice variety to the page layouts and introduce some color and life to a site with a lot of content.

The Every Monday Matters project is continuing to grow as we speak, with a soon to be introduced Community section for the more than 100 schools who will start using their Curriculum in the classrooms. Be sure to visit their site and find some inspiration for improving your life or the world around you – Every Monday Matters.

The biggest job I had on this was creating the fading slideshow at the top of every page. I found a sample site that had something similar, but i had to tweak the code to be more flexible. Now it reads any image uploaded to the right folder. So all they have to do is upload some new images and they have a new slideshow. I will try to add a description of what I did, because it is a pretty slick addition to any site and is user-friendly enough for any client to easily update their slideshow at any time.