First Wordpress Theme – My Development Toolbox

My friend Andy recently asked me to help him redesign his website. He runs fly fishing tours here in Mongolia and wasn’t happy with his current site design. He recently switched most of his websites from Joomla! over to Wordpress. When he came to me with the request I was very excited to help as most of my templating/design experience has been strictly for Joomla! or custom projects, I had yet to really delve into creating a Wordpress theme. During the whole process I learned quite a bit about the inner workings of Wordpress and have already applied this knowledge to working on my own blog (and hopefully soon designing a theme for mummey.org). Another thing that surprised me was how straightforward the whole process was, there are so many great tools and plugins for Wordpress that we encountered very few problems throughout the design process.

But before starting any programming or design process, it is important to have a good set of tools and resources at your disposal. So the main purpose of this post is to detail most of the tools I used that may help you along with designing your own Wordpress theme.

Code Base

• 

  Wordpress Sandbox

  
  Wordpress Sandbox – The starting point for my theme. This is a great template that you can just add some formatting and customization and has almost all the functions you need to make a great template.

Development Tools

• 

  Coda by Panic

  
  Coda – I have tried quite a few IDEs and I have found anything that I enjoy working with more than Coda. Everything just seems to flow really well and some some great features like integrated SVN, a great FTP utility, SSH terminal and a lot more. I feel that it is a steal at only 99$.
• 

  Firebug

  
  Firebug – Firebug is a must have for any web developer. It gives you a very detailed look at webpages including the DOM, CSS, JS, HTML and also has a handy inspector for helping to solve formatting issues. I often use it to just quickly play around with different color and formatting values to find ones that work.

Javascript and CSS

• 

  Blueprint CSS

  
  Blueprint CSS Framework – I would say that most of the projects I do a lot of custom design work, I try to incorporate Blueprint. It is a great start for anyone wanting to make clean, multicolumn layouts. It also takes care of a lot of spacing and typography for you and works with IE6 too.
• 

  jQuery JS Library

  
  jQuery – There isn't much to say about jQuery that hasn’t already been said. It is the best JS framework out there and with the new release a lot of new features have been added.
• 

  Google Ajax Libraries

  
  Google Ajax Libraries – This service offered by Google allows you to let them host your javascript/ajax libraries rather than you having to host them. From the site “We take the pain out of hosting the libraries, correctly setting cache headers, staying up to date with the most recent bug fixes, etc. “
• 

  Superfish

  
  Superfish – This is a very cool dropdown menu that uses my favorite javascript framework jQuery. It is very similar to the previous iteration, S.ckerfish, but has some more options and it was very easy to implement into my wordpress template. I also like the support for IE6!

Other Tools

• 

  Fireftp

  
  Fireftp – This is a lightweight, easy to use firefox plugin that has a bunch of great features found in stand alone FTP programs. I like it mainly because it just sits as a tab in my browser and I don’t need to mess around with some other FTP program. You can also store and name all of your connections for easy retrieval.
• 

  Skitch

  
  Skitch – A fantastic screen capture program. Skitch is one of the most well designed programs I have ever used. It has a great user interface and is very useful for taking screen captures. There are also some great tools to add some graphics and text on top of your screen caps. I tend to use this program a lot during my development, especially when I need to send prototype images to my clients.