10 Tools that Built the Skillful WordPress Theme

I have been having lots of fun working on getting some new features and speeding up Skillfulmeans.  My real intention was to start wrapping my mind around CSS, PHP, and finally speed up my little blog a bit.  I learned quite a bit along the way.  I’m hoping that my changes can help some of the issues that have been queuing up.  One issues specifically was my one friend’s difficulty in getting around the blog.  I’m hoping all the pretty pictures will help him along the way (yes, Stevie those were for you… hope they help).

As I have been chunking away at various things, I have found some new and old tools that have really helped me along the way.  I thought I would share the 10 most helpful tools I found (in no particular order):

1. Development Environment

I can’t say enough about how much time it has saved me developing, tweaking, and debugging CSS and PHP on my own workstation, only moving the themes up to the production server once I’m ready.  Here is the article where I talk about installing the WordPress environment on a windows operating system: Creating a WordPress Development Environment on Windows XP/Vista

2. Browsers

If you have played around with developing web pages for a while, you probably don’t remember a time when all browsers rendered of HTML the same way.  I’m thinking back as far as I can, and I can’t.  Nothing new here.  So I decided to test my new CSS against three main browsers, Firefox, IE (I started with 7.0 & 8.0), and Safari. 

The blog looks best running Firefox.  IE and Safari don’t have the nice curves that are rendering in Firefox, but it doesn’t look too shabby either.

3. Firebug for Firefox Add-in

If you don’t got it, get it.  Firebug is just wonderful.  Not only could I get down into the details of the CSS right quick, I used it for performance testing of the blog. 

Download: Firebug

4. NotePad++

Another wonderful tool.  Notepad++ was just the editing tool I needed to look search and edit cross files so I could quickly see what the cross files changes to my CSS were effecting. 

Download: Notepad++

5. WordPress Plug-in -Theme Tester

In the post: Working on the New "Skillful Means" Template I talked about trying out the WordPress Theme Tester Plug-in.  If you are doing some editing to your live system you may want to give this a try.

6. GIMP – Creating Category Icons

GIMP (also known as GNU Image Manipulation Program) is an open source tool (free) that allows you do edit images using layers much like the much more expensive Photoshop.  

One experiment that I was trying out was to see how GIMP would perform certain things in comparison.  Now I’m not an expert at either Photoshop or GIMP, and GIMP is free. So I decided to watch some videos on creating icons with Photoshop and then with GIMP.  I wanted to see if I could get all the functionality with GIMP.  What I found was great.  I’m not a power user (I’m sure a power user might find things differently), but so far I was able to do everything I had wanted to try and more.  If you don’t have Photoshop and need a cheap alternative, definitely give GIMP a look see.

Now creating icons probably took me quite a bit of time.  I think most of the more artistic tasks probably does take a bit more time for me.  Choosing and tweaking the colors of the blog definitely took me a while, creating icons came in a close second.  Here are some of the icons I came up with:

It definitely took me a while to pick and choose just what would represent each category.  So far I don’t think it is too bad for a first draft.  GIMP was a great help.

Download: GIMP

7. Gimp & a Great Web Site– Favicons

Did I already mention GIMP.  Yes, I did.  I also used GIMP to create the Favicon you see in the address bar of your browser, or on the tab (if you are using tabbed browsing).  I also found a wonderful post showing me how to get all those images into one ico file: Creating a multi-resolution favicon including transparency with the GIMP.

8. Colorblender

I mentioned this before, but getting the colors worked out on the blog was quite a challenge.  I still think I will have more tweaking yet.  One site that was very helpful was: Colorblender. It really helped when I needed to split hairs between one variation of a color or another.  Check it out.

9. WordPress Plug-in – WP Super Cache

Most of the other tools I mention in this post have to do with editing the wordpress template or the code behind it.  WP Super Cache is a WordPress plug in that allows you to generate a static HTML page that is delivered to the viewers of your WordPress blog.  This speeds things up quite a bit.  I have been using this plug in for some time and I highly recommend it.

Download: WP Super Cache 

10. WordPress Plug-in – WP Widget Cache

The last tool I will describe today is the WP Widget Cache.  I also have had this one installed for some time but I had not configured all of the Widgets to use it.  Now that I did, it was definitely worth it.  Like the WP Super Cache, this plug-in creates caches for all of the configured wordpress plug-ins.  This is especially nice if  your plug-ins want to go out to another site to download some data each time unnecessarily.  Much of the speed increases you may have noticed with the blog have come from the use of this plug-in.

Download: WP Widget Cache

Making a Difference?

Well, now I will have to see if my friend can now find anything he is looking for in the blog.  HAhahah… I think I just possibly
figured out why he can’t find what he is searching for in this blog… oh dear…