WordPress and the Disgruntled Designer

My first blog post ever. Be gentle.

So there it was. I had two weeks to create a blog.

And I was scared.

I’ve never messed with WordPress before. Was I making a “theme” or a “template?” Do I use an existing one? What do you mean you wanna look for an outside firm? You don’t think I can hack it? What if I can’t hack it? Oh, insecurities, why must you follow me everywhere I go?

bluemockSo first thing first, create a mock. This was easy enough. I know my way around the Adobe products a bit. I noticed that alot of blogging design has gone either grunge or hand-drawn. I figured that in order to get this mock approved I couldn’t dive in feet first, I had to have some “clean & shiny” in there. I used a graphic style I had created in Illustrator to recreate the Newtek logo and the social media logos and laid the rest out in Photoshop. My first mock looked surpisingly close to what you see now. How often does that happen? Basically I just had to have the real logo, give the number a cleaner font and mess with the blue a bit. BAM! Release my inner-Emeril Lagasse and Step One is done.

 

Now comes the pain

Or so I thought. Scary stuff stepping into something completely new. Now I can handle HTML, CSS and a little .NET no problem, but now I’ve got to tackle this new beast called WordPress with its trusty cohort PHP. It doesn’t help that I was determined to use this new thing called Cufon to get me some SEO-friendly, pretty fonts either.

First step, learn me some WordPress. I thought the best way was to look at the pre-installed themes that came with WP. So I ordered myself a CrystalTech account (sad, I know, 9 years with the same company and I never created my own site) and installed WP with the help of our knowledge base *plug*. Pretty simple. Then I looked at the default Kubrik theme to get some pointers. Mistake #1. Waaaaay too much info. My head almost fell off. So scratch that. I had to look for a better way. A “For Dummies” way. So I checked my RSS feeds and found a little jewel of a tutorial on wpdesigner.com. All of the HTML & CSS tips were common knowledge to me, but it helped me get a good grasp of what WP themes want to do, their hierarchy, and just some good common WP-knowledge.

 

Safari wants to WHAT me?!

After adding styles & images and basic HTML chicanery, Version 0.000001 of my theme was complete. I loaded it up in Safari and my background gradient was different then my flat hex background. What’s the deal? I load it in Firefox and IE. No issues. I “inspect the element” through Safari. I don’t see anything unusual. What’s the deal… again? I recreate the image close to a dozen times with nothing but failure. This is starting to get more annoying then designing for IE6. I google. Thank you, Google. Turns out, Safari treats images from Photoshop a bit funky if you “embed color profile.” Yay! Over an hour’s worth of troubleshooting over the clicking of a checkbox. Ugh. Mistake #2.

 

Pretty Fonts

With all of that out of the way, it’s time to hit up Cufon. Everything on their site seemed pretty straight forward. Generate the font, upload the javascript, set my styles, and include some script in my theme. Simple. And it was. Since I wanted to lock these fonts to specific domains during the generation, I used community.crystaltech.com and my own site. Keeps me out of the bad legal stuff. Load up everything and it’s perfect. Until Derek (he’s my boss and a pretty good blogger *plug2*) loads the blog on his system and we see no pretty fonts. Fortunately it didn’t take me long to figure this one out. It seems like some browsers don’t like this line:

Cufon.replace('h1,h2,h4', { fontFamily: 'Helvetica' });

Mistake #3. Simply needed to break it up:

Cufon.replace('h1', { fontFamily: 'Helvetica' });
Cufon.replace('h2', { fontFamily: 'Helvetica' });
Cufon.replace('h4', { fontFamily: 'Helvetica' });

Cufon. Is. Done.

 

Sprites exist beyond Nintendo

marioI remembered this great sprite-based dating system from one of my RSS feeds. I make a honkin’ page of three-letter abbreviations and numbers, write down a legal-sheet’s worth of coordinates, add alot of styles in my stylesheet and I’m done. Purty.

 

Twitter, you son-of-a-red-breasted robin!

The previous week, a CrystalTech Twitter account *plug3* was created and we wanted it to appear on the sidebar. Small feat, right? Wrong! And stop assuming! Seems our account had suffered the same fate as many other people’s, where the twit newsfeed, which is how you search and, most importantly, call for tweets, isn’t updating. After rummaging through the twitashphere and attempting many different URL’s, I couldn’t do it. It looked like we may have to start a new account to get past this. Then I remembered I used a piece of javascript to update our multiple tweets from Microsoft MIX09. BAM! Emeril strikes again. Moving on.

 

Just plug in the rest

The rest just fell in place. Alot of research on codex.wordpress.org and other blogs, sprinkle in a little PHP for our forum posts (thanks to Tom Mackie), and top it with some plug-ins for social media & stat-tracking and we’re done. Or so I thought…

 

You know nothing good follows these 3 characters: IE8

evilieOn our superb forum *plug4*, it seems a problem sprung up for users of IE8. It seems that the simple ordered list that was generating from the PHP code was numbering each post as “1″ and throwing in unneccesary line breaks. Joy. Mistake #4. Fortunately, there’s a fix. Sort of. By using the line below as the first line in my <HEAD>, I’m able to force IE8 to act like IE7.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

ARE YOU KIDDING ME?! The latest greatest version of Internet Explorer and I have to make it act like the last version to properly generate an ordered list?! Why, Microsoft? Why do you do these things to me?

Well, that’s it… for now. Hope at least someone can learn from my mistakes.

VN:F [1.9.1_1087]
Rating: 0 (from 0 votes)
Share So Others Can Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • FriendFeed
  • LinkedIn
  • MySpace
  • StumbleUpon
  • Technorati
  • Twitter
  • Tumblr

One Response to “WordPress and the Disgruntled Designer”

  1. Great Blog! Lots of useful info. Thanks fro sharing!!!

    VA:F [1.9.1_1087]
    Rating: 0 (from 0 votes)

Leave a Reply