A quick look at the site and the code behind it painted an all too familiar picture that I keep seeing again and again: The site was build using tables (correct some time ago, absolutely wrong today) and was static in every sense of the word. As a result the Google rankings were stagnant, the site was hard to index and even harder to find and it was pretty much impossible to update without a lot of workarounds and fixes. I say this is an all too familiar sight because more and more clients come to us at Pink & Yellow Media with sites of just this type: Built with old software to old standards and often in a way that makes them almost impossible to update and manage. The bad news is these kinds of sites are pretty much writeoffs today and can actually be detremental to the success of a business, both online and in real life. The good news is you can always get a new dynamic site built and reinvigorate your online presence in the process. Which is exactly what we did with EverybodyDance.ca.

There were three major components to this project: First we needed to update the site to a modern look and make it dynamic so that Elaine and her staff could go in and change the content when they needed to. Secondly the site needed a dynamic calendar so current and prospective students could see what classes were available and when. Finally we needed to up the profile of the site through quality content, optimized code and good old fashioned marketing.

As with most of our small to medium scale projects we used WordPress as the base for this one. That way we could develop a sturdy theme with valid code and provide a platform from which Elaine and her staff could easily add, change and manage their own content. As a bonus WordPress has excellent search engine optimization built in, and with the addition of the All In One SEO Tag plugin this optimization reaches whole new levels. For the design we chose to go with the general red theme of the old site but brought it up to modern standards with a grey gradient wash in the back, more whitespace and a livelier look. The site also features a number of different page layouts depending on what type of content is displayed.

In addition to the site itself our new marketing manager Anny also developed a business and marketing platform for Elaine. Doing an analysis of current customer numbers, income and expenses Anny analyzed the growth potential of the business as a whole and made a whole range of recommendations to help boost student numbers and revenue. As part of this plan was a tiered Google AdWords and Facebook Ads strategy that will be implemented and monitored over the next year. This strategy aims to boost the rankings and visits to the site and is designed to help Vancouverites looking for a good dance school find Elaine and Everybody Dance. In a market with hundreds of options that’s not an easy task but with the new site and the new marketing strategy Elaine is guaranteed to see more eager dancers enter her school in the coming year.

And just for full disclosure: The reason I can say Elaine is a great dance instructor is because Angela and I have been going to her for 3 years and in that time we’ve gone from people who had no idea how to dance to someone who is at Silver 2 level in 12 different dances.

Have your say: What would the ideal WordPress theme for photographers look like?

I’m a photographer myself, but since I don’t actually sell my photography services I have chosen not to have a dedicated site for it. Therefore I am not the ideal person to make a list of what the perfect or ideal WordPress photo theme should do in terms of functionality, customizability and integration. So instead of making a list myself only to realize I left out all the important stuff I’m asking you point blank what you want.

Go to the comments below and give me your dreams, desires and crazy ideas for what a photography WordPress theme should and could do and I’ll bundle it all up and see if I can incorporate all of, or as much as possible of it into the new theme. Think of it as a collaborative effort: You provide the ideas, I make them into reality!

Replace blog title with a linked image

One of my top 10 pet peeves is sites where you can’t click the logo to get to the home page but have to click the “Home” button. This code block can be inserted in the header.php file and it will insert an image (logo) that links back to the home page and also has the alternate text and link title set to the name of the site.

<div id="blog-title">
	<a href="<?php echo get_bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home">
		<img alt="<?php bloginfo('name') ?>" src="<?php echo get_bloginfo('template_url') ?>/imageFolder/imageFile.type" />
	</a>
</div>

Add WP 3.0 menus to non-WP 3.0 themes

To add WP 3.0 menus to themes that were built before the new version of WordPress or don’t have them built in you need to activate the menu function in functions.php and then add a call to the menu in your template file.

Add to functions.php:

register_nav_menus(
	array(
		'menuName' =>__('Menu Name'),
		'2ndMenu' =>__('2nd Menu'),
	)
);

Add to template file:

<?php 
	wp_nav_menu(array(
		 'theme_location' => 'primary'
	)); 
?>

Note that the theme_location call points to the name of the menu as set in functions.php. To target the menu name set inside WordPress use this code instead:

<?php 
	wp_nav_menu(array(
		'name' => 'Menu Name'
	)); 
?>

Highlight current page or category in menu

I’ve already written an extensive article on this subject that can be found here. The core of the CSS code is this style:

.current-menu-item,
.current-page-ancestor,
.current-post-ancestor {
	... style info goes here ...
}

Custom page template in 5 lines of code

To create a custom page template simply insert the following 5 lines of code at the top of your template file and give it a name other than “whatever”. Once saved (as something other than page.php) it will appear as one of your template options inside WordPress.

<?php 
 
/* Template Name: Whatever */ 
 
?>

Add Featured Image (thumbnail) functionality to your theme

To activate the Featured Image panel in WordPress admin an enable the function you need to add a small piece of code to the functions.php file. Once this is done and Featured Images have been defined you can call them from within any template file using one of the calls below.

In functions.php:

add_theme_support( 'post-thumbnails' );

In theme file:

<?php the_post_thumbnail(); ?>

The above call will produce the thumbnail in the size defined inside WordPress admin under Settings -> Media. To call a different size use one of the following:

the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail(array(nnn,nnn));

For the last one replace ‘nnn’ with any pixel width and height.

A new site is born

After some discussions with the gallery owners it was decided a new site was needed – one that not only drove web users directly to the shows, artists or even art pieces they were looking for, but one that also allowed the gallery to communicate more directly with the visitors through a news page and social media. But most importantly we wanted to create a site the gallery could manage on their own by adding shows, artists and photo galleries and write articles about the everyday goings on in the gallery itself. The natural platform for such a site was WordPress.

Based on the original site we knew we needed a front page, an exhibitions list displaying past, current and future shows, a gallery artist page with sub-pages for each artist, a news section, an artist submissions section, a page with info about the gallery itself and finally a contact page. Since the client is an art gallery and they had a huge number of photos of art pieces we needed to find a solution that would make the artwork easy to display for the owners and easy to navigate and digest for the visitors.

The design of the site needed to stay true to the visual identity of the gallery, built over several years. To help in the design process we brought in Alexandra Oosterom from Fresh Media Designs and she turned out a clean yet stylish look for the site that fit with the parameters we outlined.

Thinking in taxonomies

The challenge when using a CMS is always to come up with rational and logical taxonomies so different elements nest within each other in a rational way. Originally we planned on setting the site up as a huge list of parent and child static pages but that became cumbersome and blocked some of the features we wanted to include. The solution was to set up a parent category called Gallery Artists with a sub category for each of the artists. Because each artist would have a gallery plus a set of info pages (Artist Statement, Biography and Curriculum Vitae) but not all artists would have all the pages we also needed to come up with a way of creating a dynamic menu to display within each artist page that let the visitor jump from page to page quickly. The result was a clever little PHP hook within one of the post templates (yes, this site has 10 different single post templates depending on what category you are viewing and what page you got there from) that queried the parent category of the post (the artist name) and then listed out all the other posts within that category as a menu. This all came together to create a simple and intuitive navigational tool for the visitor.

Using NextGEN Gallery outside the norm

One of the interesting challenges of the site was to create a dynamic gallery artists page that featured the artist name as well as a photo of an art piece and a short bio that would in turn lead to a set of dedicated pages for that individual artist. After playing around with a few different solutions we decided to use the popular NextGEN Gallery plugin as the base for the gallery artist page. This plugin removes the process of image and gallery management from the pages and posts in WordPress and puts it in its own administration area. This makes it easier to manage large ammounts of content as was the case here. The output of NextGEN Gallery is also dymanic so a change in gallery order, image description or artist bio will be reflected on all the pages where that gallery or image is embedded with one change.

We set up one gallery for each artist that was then embedded into a separate post for that artist. To display the list of all the artists on the Gallery Artists page we used the NextGEN Gallery Album function. The problem was that the Album function only points to pages, not posts. To curb this problem we had to go in and rewrite a large bulk of the sourcecode in the plugin. After the fix each artist gallery could be related to any page or post by entering the post ID number.

Several months and many hours of nit picking code later and Frugalbits is now finally live to the world. It’s a labour of love for me as well as the crew behind the site and it is a project I am exceedingly proud to have been a part of. So, without further ado, let me walk you through some of the interesting elements of the site:

A Carousel of Stories

Early on in the process the request came in to have a featured story carousel at the top of the front page. Unlike many other such sites the Frugalbits team didn’t want to have multiple text stories on the front page but requested instead one main story, named The Daily Deal, to be featured and then have a carousel with the latest 8 stories displayed at the top. Over the years I’ve worked with many different featured story plugins and carousels and as with pretty much every other plugin I come into contact with I’ve hated them all. For this one I decided I’d go out and find something that could be customized down to the last pixel and that ran independently of the whole WordPress plugin regime. And after a lot of searching I finally found a JavaScript based carousel I could take apart and put together exactly the way I wanted it.

The carousel requested would feature 8 stories (4 and 4) and would have a square story picture, a tagline on a translucent banner and the story title itself. In addition the coloured banner the story title would go on should change depending on the category the story belonged to. This meant I needed to create a loop in which 4 fields were queried for each story: thumbnail, tagline, category and title. It quickly became apparent that apart from the title the rest of the fields had to be customized for each story. To solve this I created 3 custom fields; thumbnail, cat and tagline, and the story editor filled out each of these taglines with the appropriate content. It worked quite well and I was satisfied that this solution would work

But. After a beta launch one of the editors brought up a point I never considered: The first entry of the carousel would always be the same as the story on the front page. And since the front page only had one story this was to put it midly somewhat redundant. Fortunately WordPress has an answer for this type of situation: offset.

<?php query_posts('posts_per_page=8&offset=1'); ?>

An explanation: The carousel is populated using the standard query_posts() function. By using the offset variable in conjuction with posts_per_page I can define how many posts the query should “skip” before starting the list. And since I just wanted to skip the first (front page) post, that value should be 1. Problem solved.

Adding an Author Box

Because Frugalbits is a magazine it has both “normal” articles and also columns written by a select group of columnists. The request was that for these columns there be a box at the top right under the title with a photo, name and a short bio for that columnist. WordPress doesn’t have a standard function to add such an author box and though there are plugins that do it they are clunky, full of garbage code and not easy to style. I chose to go hard core on this one and just write it right into the single template using a conditional custom field. The result was the nice chunk of code below which produces a nice CSS styled box with the author Gravatar, category name, author name and WordPress user bio when activated with a custom field with the name “author” and the value “true”:

<?php if((get_post_meta($post->ID, 'author', true))) { ?>
	<div id="authorbox">  
		<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>  
		<div class="authortext">  
			<h4><?php the_category(' '); ?> is by <?php the_author_posts_link(); ?></h4>  
			<p><?php the_author_description(); ?></p>  
		</div>  <!-- END #authortext -->
	</div>  <!-- END #authorbox -->
<?php } ?>

Custom templates

One of the most important features of the Frugalbits site is actually something you hardly notice: The custom templates. Depending on where you are in the site the layout changes subtly. The front page features the carousel, the single post pages have the optional author box, the category pages have only the right sidebar and show thumbnails for each story and the legal pages have an entirely different sidebar from the rest. To top it off the F Spot category has an entirely separate tempalte that looks nothing like the other ones. All this is done by using conditional statements and creating custom theme files for individual pages and categories.

Now that it’s launched I’m looking forward to hearing what people have to say about Frugalbits and it’s functions. Feel free to leave your questions and comments below and please visit the site and learn how to be frugal yourself!

I’m doing a 1 hour live webcast with Microsoft Canada demonstrating advanced WordPress customization with Expression Web 3 on April 6th, and you are welcome to join. It will be an extended version of my MIX10 session with more demos and more time for questions. All you have to do to participate is register. Full writeup below:

REGISTER
Invitation Code: 0781DA
Tuesday, April 6^th, 2010
Start Time: 11:00AM PST (02:00 PM EST)
Webcast Duration: 60 min
Questions about these events?
Call us at 1-888-789-7770

A follow up to Paul Laberge’s “101” webcast, Expression Web MVP and WordPress hacker Morten Rand-Hendriksen takes you through an intimate and enlightening look into his day-to-day work process. He specializes in building solid standards-based websites on the WordPress platform using Microsoft web technologies and Expression Web. The session takes you through real-life examples of customer projects and pulls back the curtain on a work process that employs what Morten jokingly refers to as the “Unholy Quatern” – Microsoft’s Expression Web 3, Web Platform Installer and Mesh combined with the open-source publishing platform WordPress. Combining these four technologies Morten has developed a process in which rapid site debugging, prototyping and implementation becomes a reality.

Learn the inner workings of WordPress and how to use its theme engine to build pretty much any website you can think of using Expression Web 3 and see how using simple web technologies like WPI and Mesh can make your life as a CMS dev/igner much easier.

Register Today!

Above is my MIX10 session A Case Study: Rapid WordPress Design and Prototyping with Expression Web 3 in its entirety in Silverlight video format. It can be blown up to full screen and I highly recommend it as there are code examples.

In the session I referenced a bunch of different technologies and applications I use on a day-to-day basis. For those in attendance and those watching on the web here is the exhaustive list of links and tools for you to play around with. I will post a link to the video version of my session when it becomes available approximately 24 hours after the session itself.

The Unholy Quatern

The Unholy Quatern consists of 4 basic elements;

1. WordPress
2. Microsoft Expression Web 3
3. Microsoft Web Platform Installer
4. Live Mesh

If you are only installing WordPress on your local computer there is no need to get WordPress from the original source – the Web Platform Installer will handle the installation for you. The same applies if you are using a different CMS under the WPI.

NOTE: If you are working in Windows 7 it will be necessary to run Expression Web 3 as Administrator if you want to set up the WPI version of WordPress as a site. Otherwise Expression Web 3 will not have permission to write to the folder and you’ll be banging your head against a wall for hours trying to figure out why it’s not working.

WordPress Code Snippets for Expression Web

I have created a downloadable version of the WordPress code snippets used in the session. They are availalbe – and frequently updated – at the Expression Gallery. The snippets work with any version of Expression Web and are quite literally plug-and-play. The current version of the WordPress Template Tools comes with a special snippet that lets you create new snippets. Snippets in the current version are:

• Custom Page Template tag
• Custom Field tag
• PHP parsing Custom Field
• Conditional Custom Field
• Image as Header
• Get blog/site URL
• Get current theme URL
• Get blog/site name
• Get blog description
• PHP include

Most of these are plug-and-play and those that are not are fairly easy to understand. They are all 100% standards-based and use current and up-to-date WordPress template tags.

I update the WordPress Template Tools on a random basis whenever I feel there is a new tag that will be useful for other people. If you have an idea for a template tag not currently in the list feel free to contact me with the suggestion.

Well, actually the design portion was already handled by Tracy herself. The challenge in that regard lay in taking Tracy’s clean and exact designs and making them appear on the web as they did on paper. As for development the main challenge was that although this was to be an online store she wanted it to look nothing like an online store.  So basically the project consisted of taking a new site concept from a paper mock-up to a fully working website. Exactly the kind of stuff I like to do.

Taking WordPress right to the edge

The result of a lot of hard work is a website that in my view takes WordPress right to the edge of what it is capable of. Every element of the site is custom built from my basic WaveFront theme to create a look, feel and operation that in no way resembles or even hints at WordPress or a regular e-commerce CMS. That said there is no real reason why any site, WordPress blog or otherwise, should look a certain way. A CMS is after all just a HTML generator that spits out whatever you want it to, and once you have the HTML you can use CSS to display it any way you want. The true challenge here was centered around getting the e-commerce portion to look, work and feel less like a boxed e-commerce solution and more like something classy and custom even though it was built on top of the WP eCommerce plugin. So while on the back end this is a fairly standard WordPress installation with pages, a blog (upcoming) and an e-commerce component, on the outside it looks like a custom site with all the bells and whistles built from scratch. Which is exactly what both Tracy and I wanted.

Ultra-clean designs pose unique challenges

Tracy is a designer of my heart: Obsessively detailed and extremely picky. (To be honest I don’t think you can call yourself a designer if you don’t fall into these categories, but that’s just me.) Her designs looked easy enough, but the true challenge lay in matching her static pages created in InDesign to live dynamic pages on the web. With such a rigid frame to work inside all the regular cross-browser problems like padding- and margin widths, positioning, font sizes etc that we normally choose to ignore or just tweak till they fit within acceptible buffer zones were all of a sudden make-it-or-break-it points that had to be done exactly right. The most notable example was that when each page loaded, whatever page content was in the “content” section of the layout had to line up perfectly with the topmost menu item. Sure, that’s easy enough if all the content is the same, but in this case we were working with four fundamentally different types of pages: Plain text pages for general info (home, about etc), dynamic index pages for each product line consisting of a header image plus a series of thumbnails for each product, single product pages with a larger image off the top with product stats and purchase buttons on the right and info underneath and finally shopping cart pages.

This meant the site demanded entirely separate style codes for the different elements depending on the type of page (or more specifically page template) was being displayed. And all these styles had to be flexible enough to be applied to the same item in different ways depending on the current template. Normally this would be easy enough to solve by using custom page templates, but in this case we were using the WP eCommerce plugin which generated all the product indexes, single product pages and shopping carts. As a result I had to dissect the eCommerce plugin pretty much line by line to find where all these elements were generated and how to go about repositioning them. What I found was a plugin that although it looks amazing on the outside was actually quite messy behind the curtain. I won’t write any further on this topic here – suffice it to say if you want WP eCommerce to do something that’s not just basic implementation you better prepare yourself for hours of decrypting bizarre code layouts and counter intuitive solutions. More on that in a different post.

In the end I created multiple theme files for the theme itself as well as the WP eCommerce plugin that allowed for micromanaged control of all the different pages. Not an easy task, but more than doable given enough time and some good background music.

Overall I’d say DesignSchooledKids.com has been my most challenging project to date, not because of the design or development elements of the baisc site but because the WP eCommerce plugin falls short in way too many places. In the end I made it all work the way it should but that was only because I spent an enormous ammount of time fixing or all together rewriting the code in the plugin so it would behave properly. It’s a bit of a disappointment really but now that I know how all the pieces fit together I should be able to reproduce it in the future.

Visit Design Schooled Kids and check out both what WordPress can do and what Tracy has to offer.

Replace the default heading with a clickable image

<h1 id="blog-title">
<a href="<?php echo get_bloginfo('url') ?>/" title="<?php get_bloginfo('name') ?>" rel="home">
<img alt="Alternate image text" src="<?php echo get_bloginfo('template_url') ?>/imageFolder/imageFile.type" /></a></h1>

The get_bloginfo(); template function

<?php
 echo get_bloginfo('$show')
?>

Where $show can be name, description, url, template_url etc. Full explanation in the WordPress Codex.

Custom Page Template

<?php
/*
Template Name: Whatever
*/
?>

Standard PHP Include

<?php include ('fileName.php'); ?>

Insert Custom Field in Template

<?php echo get_post_meta($post->ID, '$key', true); ?>

Conditional Custom Field

<?php  
	if((get_post_meta($post->ID, 'divName', true))) { ?>
		<div id="divName">
			<?php echo get_post_meta($post->ID, 'divName', true); ?>		
		</div>
	<?php } 
?>

The Twitter Box

Click here to download a zipped archive of the Twitter box. Remember to change the username inside twitter.php, otherwise you’ll get my tweets on your site!