This is part 4 in a series of post, going through the process of building Ptah Dunbar dot Com. If you haven’t read part1, part2 and part3, I’d suggest you go check that out so you can read about the goal, background, and the mockup phase of this project.

Design – Making it come to life (12.5 hours)

Ok, so the final design isn’t completely the same form what I sketched up in my moleskin but that’s the point! It gave me a starting point to build on top of. So once I was satisfied with the final concept for my front and single page, I jump into Photoshop and create those elements digitally.

This is probably the longest part in my entire process because:

• Usually, I’ll make a layout, then tweak it here and there until it meets all the necessary requirements of that page
• Once I’m satisfied with the layout, I’ll let it sit there for a few days.
• Then, I’ll add or change a few things if I thought of anything new during that time away.
• If, after a few days I still like the design I’ll proceed to the next step (html/css).
• Finally, I’ll print out a final copy of the layout, and use it as my blueprint when I get stuck coding the layout.

TIP: Having a design blueprint as a physical reference is perfect if you don’t have dual monitors or a lot of screen real estate. In addition, having some kind of reference for your project allows you to focus solely on the coding aspect for it as a pose to jumping right into the code, then designing on the way.

So here’s how it looks:

Markup – Making browsers happy (~3 hours)

Here comes the fun part. Structuring the layout into semantic xHTML markup and designing it using CSS while having all the big boy browsers duking it out–very time consuming but nevertheless rewarding.

Luckily, I was using the printed layout I made earlier as a blueprint, and was able to code up both, the front page and single page in less than an hour. The rest was fixing browser bugs which sadly took me another 2 hours or so. The navigation went through the most iterations because of IE wanting to stand out from all the cool kids. Whatever.

After all that, everything seemed to be aligning in place. Checked to see if my xHTML and CSS was valid, they sure were! Let’s move on…

TIP: when making your layouts IE compliant, try using margins more than padding since IE treats divs with no width or height set like they don’t exist.

Convert to Wordpress (~4 days)

Ugh. I knew this was going to be a problem. I had about 15 tabs open filled with wordpress codex mumbo jumbo. Reinventing the wheel and creating a theme from scratch really sucked the first time.

To start off, I hacked up Kubrick, the default theme that ships with WordPress. I had a lot of markup errors since I tried to base my code on Kubrick’s structure. Killed that idea. Then, I made a style for K2 which surprisingly worked, but the only thing I was picky about was I had to learn a lot about how K2 does things.

K2 has a lot of advanced features like rolling archives, live search, live commenting, tons of plug-in support, semantic classes etc. A lot of those features were overkill for what I was doing thus adding a lot more weight to my code than needed.

Striping all those stuff out resulted in not really using K2 for what it was made for. So I decided to kill that idea too and really make my theme from scratch now.

Using * { margin: 0px; padding: 0px; } in my css resulted in having to style every single html tag which was the whole purpose of that code, but it backfires on you if you don’t know all the html tags you have to style in WordPress. I tried making my styles very pseudo so that I wouldn’t have to recreate this part again. Finally, I got stuck formatting the content area of the blog which I didn’t initially design so I decided to just go with what just works for now. I found myself styling my content very similar to the way Paul Stamatiou styled his content on his blog. I’m a frequently “lurker” there so I guess I’ve grow accustom to reading in that style but changes will be made once I get this blog off the ground.

Back to WordPress

There is a lot of important information you should check out before, during, and after the creation process of your WordPress theme. Below is a good list of links to start with:

• http://codex.wordpress.org/WordPress_Semantics – Learn all the WordPress Jargon so you know what’s what
• http://codex.wordpress.org/Blog_Design_and_Layout – Great start to find how to do regular stuff in wordpress
• http://codex.wordpress.org/The_Loop – Learn to love the Loop. Breathe the Loop. Become one with the Loop.
• http://codex.wordpress.org/Templates – This will lead you to everything you need to know about theme development
• http://codex.wordpress.org/Template_Tags – Usually up-to-date reference on all the WordPress template tags and examples on how to use them
• http://codex.wordpress.org/Template_Hierarchy – Explains what happens when a user goes to different types of urls on your blog and what page it pulls up.

TIP: Having a list of html tags that WordPress allows when writing a post is a must when developing your theme. It makes it future proof so that you only have to style it once.

5 valuable lessons I learned from converting a website into a wordpress theme for the first time:

1. Remember that wordpress isn’t all that special. It’s using PHP and MySQL like every other dynamic website.
2. Regardless of what everybody is saying, you don’t have to split up your header, sidebar and footer just yet. Leave that for later.
3. Having a cheat sheet, or just using the wordpress codex for looking up template tags is invaluable!
4. Keep in mind, the template hierarchy. That’s how wordpress deals with incoming URLs (URIs) to your site along with their respective pages a user would land on.
5. Have a list of common HTML tags that you’ll have to style in WordPress.

Conclusion:

Right now, the theme that I designed is at it’s most basic form. Just a regular two column WordPress theme. I decided last minute to start it off like this because of the lack of content. I really don’t have a lot of content right now to present, so my original theme I designed would be overkill. The plan is to slowly phase out all the features over time once I get more into the habit of blogging; I called this idea “The Growth Theory” which I’ll be writing about in the future.

This is the end of the series going through the process of creating Ptah Dunbar dot Com. If you haven’t read part1, part2 and part3, I’d suggest you go check that out so you can read about the goal, background, and the mockup phase of this project.