Shane White website: challenging and fun

This week I finished a website that I have been working on for over 2 months.  It was a surprisingly challenging website, but I had lots of fun coding it.  The site is for Shane White, a comic artist here in Seattle.  Shane did all of the graphic design, and then asked me to turn his designs into a WordPress website.

Shane isn’t a programmer, so he didn’t realize that a lot of what he was asking for on his website can get very complicated: e-commerce, ComicPress, different layouts and navigation for different kinds of content, different headers on different pages, and a very different look for the webcomic pages.  Any one or two of these things wouldn’t have been very complicated by themselves, but added all together, it made for a very complex site.

So here are some technical details about the site requirements and what I did to create this site to Shane’s specifications.

First of all, the biggest requirement for the site was ComicPress, a WordPress theme for webcomics.  ComicPress actually feels more like a plugin than a theme: it adds all sorts of extra functionality, like the ability to bulk upload comics and instantly create posts for them.  ComicPress does some impressive stuff, but it also has some limitations: for instance, if you have a blog on the home page, it can either show posts in the comic category, or posts in all other categories: if you have a bunch of categories and only want to show one of them on the home page, you’re out of luck.

I created a ComicPress child theme, based on the comicpress-blank child theme (I guess that makes mine a grandchild theme).  This meant that I could add files to overwrite any of ComicPress’s theme files, but I was very cautious about doing this – I didn’t want to completely rewrite ComicPress, and I wanted to make sure that Shane can still update ComicPress the next time an update is released.  The biggest changes I made were to the layout of the site.  Another of ComicPress’s limitations is that you can pick one site-wide layout (and there are lots to choose from), but you can’t have different layouts on different pages.  Shane needed different layouts, so I hacked a few of the files to get different layouts on different pages in ComicPress.

The site has several different sections, and each one has a slightly different layout and navigation.   I considered several different ways of doing this, but finally decided it was best to just make custom post types.  This is good because I can make them work the way I want without any hacking/kludging, but unfortunately from the user’s point of view it means there is another procedure to follow: each section of the site requires a slightly different procedure for uploading media.  There are two custom post types: “Portfolio,” which takes care of Comics, Illustration, and Fine Art, and “Video,” which takes care of the Media section.  The Portfolios also have a custom taxonomy, “Genre.”

I also wanted to add a custom meta box to make updating the Portfolio custom post type easier.  I followed these instructions, and couldn’t get it to work (the same code works on other blogs, but not this one).  I think this is just a bug in ComicPress – the action hook that adds the meta box to the editing page never gets called.  Once I realized that action hook wasn’t getting called, I decided that I had already wasted a ton of time on it, so I should to just make hay and use the “add custom field” box, which is less graceful, but less expensive for the customer in the long run.

Shane’s site also requires e-commerce, so that he can sell comic books, art prints, t-shirts, custom art, and other nifty stuff.  I used Jigoshop: of all of the e-commerce plugins I have used, Jigoshop is definitely my favorite, although it isn’t without its quirks.

In addition to the main site at shanewhite.com, Shane also wanted the ability to easily create sites for his webcomics (such as Braun), so that he can add new webcomics whenever he wants.  So I wrote another theme, fairly similar to shanewhite.com, that he can use on all of his webcomics sites: with changes to colors and logos, he can make each site look unique.

Of course, all of this complicated stuff gets complicated for Shane too: in addition to WordPress’s normal posts and pages, Shane has 3 custom post types (portfolio, video, product) and comic blog posts that are different from normal blog posts.  That’s a lot of different procedures for one person to keep track of!  Not to mention the number of widget areas – I lost count of the number of widgets the site uses.  So I wrote extensive instructions, thanks to the WP Help plugin.  Fortunately, Shane is clever, so he has had no trouble figuring all of this out.

Shane was a delightful client to work with through this whole long process.  Naturally it was fun looking at his artwork as I was working, and he was one of those clients for whom I can use Samuel L. Lipsum and know that I’ll get a laugh instead of a disapproving look (it was hilarious when he realized what it was).  He was very patient with me when we ran into problems, which happened frequently – this seemed to be one of those sites where every little step turned into a big complication, and things that should have been relatively easy turned out to be quite time-consuming.  For instance, there were some things in the header that we couldn’t get in the correct position: it turned into a comedy of errors, sending screenshots back and forth showing how even though we have the same operating system and the same version of the same browser, the search box was in a completely different place on our screens.  And, of course, since Shane is a graphic artist, he wanted everything to be pixel perfect.  He was quite shocked when I sent him to Browser Shots to demonstrate how differently browsers render the same site.  I think we managed to get it pixel-perfect in most browsers.

This was a really fun challenge, and I’m happy with what we produced.

Share:
  • Twitter
  • Facebook
  • StumbleUpon
  • Google Bookmarks
This entry was posted in plugins, web design, WordPress. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

11,775 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>