My Experience With Designing a WordPress Template

When I finally decided that I wanted to hang my virtual shingle out for business I had to make a decision about what back end I wanted to power my home on the web. While I have often dabbled in different CMS platforms, I’ve never really built a template from scratch for one. The closest I had come before was a heavily modified Joomla template for a previous job. After working with Joomla I knew I wanted to stay away from such a bloated CMS which was certainly overkill for my needs.

Choosing a CMS

After a little research, it became obvious that overall the most used blogging platform of blogs i read regularly is WordPress. Most of these blogs are centered around graphic design or web design, so this made me comfortable that WordPress could handle my needs if it already does so for most of these blogs.Once this decision was made, I decided to arm myself with as much knowledge as possible before beginning to design a template. I knew there were many premade themes available and even considered sandbox for it’s seeming ease of customization. In the end, I wanted to take the opportunity to create the template from nothing to really make it my own.

So, I collected ideas from the core group of blogs I frequent and did my best to determine what plugins I would need to really make the site my own. I relied on suggestions from other bloggers, as well as the WordPress repository of plugins to find them. I can’t underestimate the importance of really brainstorming what you want to present before you attempt to design the theme. If you don’t, you may find yourself like I have in the past trying to basically retrofit my design after the fact because I had forgotten about a really useful plugin I needed to integrate into the design.

The Design Process

With a list of plugins and basic layout ideas, I sketched a few preliminaries on paper. This was also really useful to me, because I find a blank Photoshop canvas without direction can lead to some bad decisions with the layout. I took the paper sketches and parlayed them into a gray scale Photoshop layout relatively quickly. I find designing in gray scale helps a lot in the beginning with focus on content and the presentation of said content. Without worrying about color, contrast can be used in gray scale to create the proper hierarchy of a design. This allowed me to focus on that first, then bring in color scheme ideas later.

I utilized the wonderful colourlovers.com as a color scheme springboard, then ran with my own style to create the particular colors seen here.

After I had the layout set up in Photoshop, I researched quite a bit on the best way to slice the images in order to create a fast-loading and validating page. wpdesigner.com’s wonderful tutorial on creating a WordPress theme from scratch was fundamental in my success of going from .psd file to working theme.

I took the advice of installing WordPress locally using xammp on my windows machine and unzipping WordPress into the “htdocs” folder. This makes it really easy if you run windows to see instantly any changes you have made to your files. I simply edit the files in Notepad++ and save them, then refresh my localhost/blog location. This is much less time-consuming than using a remote install of WordPress on your web server and FTP’ing all your files to see changes. Besides, the content on my own machine is private and I don’t have to worry about visitors tripping over my code editing on my real blog.

The Technical Issues

Utilizing WP-Designer’s tutorial alongside numerous Css references and examples, I sliced and coded my layout into a working WordPress theme. I tested all my code in Firefox and utilized the Firebug plugin extensively. I also used the IEtab plugin to see what it was looking like in my IE installation. After realizing I had some problems with older IE versions and my .png transparency, I located multiple IE to install the older versions simultaneously on my local machine to test them all. I decided that support for IE prior to version 5.5 was not something I am concerned with. The bulk of my intended audience will most likely use Firefox or a newer version of IE.

I initially discovered the .png transparency problem when running my live site through browsershots.org, but the long wait and my inability to find a working .png fix for IE led to my discovery of multiple IE. Incidentally, the only solution I could find that worked was using an image for my header instead of a div with a background applied, if anyone knows of a remedy to this please let me know.

Making it all publicly available

Once I had essentially gotten the layout where I wanted it to be, the next step was to find a web host. After a little bit of searching I settled on ANHost based on information from Pearsonified. I wanted to use midphase but the yearly payment option wasn’t something I wanted to be hooked into. ANHost initially looked like you could pay monthly and is now owned by midphase so it seemed like a good fit. Well, after reading through all the pre-sales information and placing my order, ANHost’s receipt proceeded to inform me I would be paying yearly.

I immediately hopped on live chat with a rep and began explaining the situation. Through a somewhat painless twenty-odd minute chat the rep informed me she would email a billing specialist to see what could be done. I spoke on the phone with the billing rep the next day after she had left me a message, and everything was set up so I would be on a monthly payment plan instead of yearly which is why I avoided midphase to begin with. The assistance I received was above average for sure, but it could have been avoided altogether with properly written disclaimer’s during the ordering process.

I haven’t experienced enough beyond this with ANHost to lean one way or another on their services, but of course this has left me with a bad taste in my mouth very early on. I hadn’t even received my site information before I had to contact customer service with a problem. Only time will tell if ANHost/midphase is a company I would recommend.

So now I’ve made my way through the brainstorming of a design, the creation of the design in Photoshop, implementing it with WordPress and selecting a host and uploading my files. This leaves me here with a new blog where I can promote my services and share interesting and useful stories about design.

To be continued…