Back in 2008, I worked with Grant Friedman from Colorburned to implement his design ideas into a custom theme for his Movable Type powered site.  Recently, Grant approached me again with his desire to convert his MT blog over to WordPress – including a brand new theme design with several innovative features, to boot! He brought his design ideas and specifications and  I was up for the challenge…

There were several challenges to this project that needed to be attacked, meticulously, one-by-one. The first was his import from the Movable Type platform into WordPress.  WordPress has a built-in importer for Movable Type, which works beautifully.  However, Grant has been blogging on Movable Type for a year and has a decent page rank for his domain.  The last thing we wanted to do was lose his permalink strucutre, so I needed to make sure that all of his permalinks remain the same.  Some differences between his Movable Type permalinks and the ones, intially, built by WordPress?

1. His current Movable Type permalinks end in .html
2. WordPress permalinks don’t end in .html
3. His current Movable Type system uses the page title for the permalink slug, but cuts it off at 26 characters
4. WordPress uses the full page title for the permalink slug, regardless of its length
5. His current Movable Type permalinks have underscores between the words: eg: follow_me_on_twitter
6. WordPress, by default, places dashes between the words in the permalink slug: eg: follow-me-on-twitter

These challenges weren’t impossible to overcome, just made things a little more interesting to get through.  A few tweaks in the WordPress permalink strucutre, .htaccess and some mySQL database manipulation and we were golden.  This article in the WordPress Codex helped guide me through: Importing from Movable Type to WordPress.  With his permalink structure fixed up to match his previously existing (Movable Type) permalinks, Grant won’t lose any inbound link love from Google, other sites and other search engines, social network sites, etc.  This is vital in any platform conversion.

Featured Posts

The front page of Grant’s site shows off some featured posts in a unique way.  Using the Glider.js script combined with Darren Hoyt’s  TimThumb script for the auto-creation and auto-sizing of images/thumbnails – I created a dynamic featured content area that ’slides’ through is most recent posts on his site and represents them, visually, using a large featured image followed by 5 smaller thumbnails that allows you to easily navigate through those featured posts with ease:

More on the Thumbnails

Using the TimThumb script mentioned above, I created several areas where the images from Grant’s post will, dynamically, appear throughout the site. Not only in the Featured Content area on the home page – - but smaller thumbnails in the archives, related posts and blog posts.  To do this, I combined the TimThumb script with custom post fields which allows Grant to insert only one image URL – and the script does the rest of the work, itself – by automatically resizing the images for the various areas of his site where it utilizes specific dimensions of that one image.  The resizing quality is 100%, with no image quality loss.

To implement it in the related posts listings on his site, I had to combine the TimThumb script with the Yet Another Related Post plugin written by Michael Yoshitaka Erlewine.  There is a plugin I thought about using called Related Posts with Thumbs – however; I wanted the images to be consistent and make sure the image displayed is the exact image that Grant specified in the custom post field, as well as having full control over the dimensions and quality of image resizing  – so I re-programmed the Yet Another Related Post plugin, combined it with the TimThumb script and provided a solution for Grant’s Related Posts listings:

Social Networking

Grant is a big fan of social networks like Facebook, Twitter, StumbleUpon, etc.  He wanted to make sure this passion of his was well represented throughout his entire site.  So much so that he had Ryan Putnam from VecTips create a custom TweetThis icon for his site.  If you check out the bottom of Grant’s posts, you’ll see the cute little Tweet icon Ryan created – along with other social networking icons to allow Grant’s readers easy access to share his content on some of the most popular social communities out there:

In addition, I integrated Twitter into Grant’s comments, which allows his commenters to add their Twitter link to their comments; when they do – their Twitter link appears directly beneath their user avatar to allow other readers to discover them on Twitter:

Here you can see the “Twitter ID” field inserted into Grant’s comment form:

User Link Page and Feed

Grant saw a User Link Feed implementation done on another site  – specifically at NetTuts – and he wanted that functionality on their site.  I checked out the tutorial that NetTuts published on how they accomplished the User Link Feeds, intending on replicating it on Grant’s site.  However, after reading through the tutorial, I found that the method they implemented required some alteration of some WordPress core files.  I’m almost always against the alteration of core files and try to avoid it, if at all possible, because it makes upgrading the WordPress software files more challenging than it needs to be in the future.  Upgrades will break the alterations made – requiring the alterations to be re-done on the new platform, assuming, of course, that the alterations are still compatible with the latest upgrade.  I would much rather implement custom features with a plugin, or theme functions.

All was not lost, however, I easily implemented Grants User Link Page using a plugin called TDO Mini Forms – which allowed me to configure a form on his site that allows his visitors to submit links with a short 200 char. description to his site.  Once submitted, Grant gets an email altering him on the submission – he can then go in an approve the link submission.  All link submissions get placed in the “Link Feed” category on his blog – which allowed me to configure a feed for that page.  So now, he has a fully functional User Links page with associated User Link Feed – all without having to alter any of the core WordPress files.  In his sidebar, you can see the links and description submitted by his visitors are displayed – along with buttons that allow you to submit a link, view the User links page and subscribe to the User Link Feed via RSS:

Overall, Colorburned’s site redesign was challenging, but fun to do at the same time.  I launched Grant’s new design on the WordPress platform this week and he’s gotten rave reviews so far – and is pretty happy, himself.  He’s finding that he is appreciating the WordPress platform, over Movable Type, mostly because it saves time in his, already busy, blogging schedule.  Thanks for returning to E.Webscapes for your new project, Grant – it was a pleasure!

As an aside, you may be interested in reading an in-depth interview that Grant did with me on his site back in December – right before the launch of my new book, WordPress For Dummies, 2nd Ed.

Permalink | 6 comments

© Lisa Sabin-Wilson; author: WordPress For Dummies

Design Portfolio | Design Blog | Request a custom design here! | Lisas Personal Blog

Want more on these topics ? Browse the archive of posts filed under Blog Design, Blog and Website Design Portfolio, Business Blog, CSS and Design, Lisa Sabin-Wilson, WordPress Design

Follow E.Webscapes on: Twitter | Facebook | mySpace | LinkedIn]]>