Free Web Development Tools

Of course, there are so many excellent free development tools that I can’t cover each one that I use.Â So, here are a few of the most important tools I use to develop and troubleshoot WordPress sites.

My bare-bones arsenal contains:

Operating System:Ubuntu Linux (What can I say, I’m a free software nut?) Mac or Windows are just fine, if you prefer.

Text Editor: Every OS comes with one and there’s no ‘right answer,’ it’s just personal preference.Â Even though it’s not free software, I like Komodo IDE, a development environment tailored to web development languages.Â I tend to prefer a tool that offers:

syntax highlighting

syntax checking

line numbers

multi-line search and replace

Image Editing:the GIMP.Â Photoshop, Fireworks, or another image editing application should do the trick.

Browser:Firefox is my Browser of Choice.Â I love Firefox because it’s open source, standards-compliant, and there are a wealth of well-maintained free software plugins that save me time.Â Safari and Opera are also excellent and arguably even more standards-compliant.

How Free Tools Can Help You Design & Debug Themes

Operating systems, text editors, image editing, and browsers are beyond the scope of this presentation, so let’s spend a little time looking at a few of these free Firefox add-ons so you can see some of the features they offer, and how I use them.

Firefox Web Developer Toolbar

Firefox Web Developer Toolbar

This add-on simply has a staggering number of features.Â I’m not even sure I’ve used them all, and it seems I’m constantly finding new, wonderful things it can do, although sometimes in confusing places.

Once you’ve installed the add-on, you’ll have an additional toolbar in Firefox that gives you easy access to handy tools for developers.

Here are some of my favorite uses for the Web Developer Toolbar:

Edit CSS(CSS/Edit CSS): Edit CSS in real-timeÂ and save changes locally.Â That’s right you can browse to any site, open the Edit CSS window, modify the CSS in real-time, see the results in the browser window, and even save your changes.Â Awesome.

Display Color Information(Information/View Color Information): Creates a page with color swatches and equivalent hex values based on the colors in the web page you’re viewing.Â Really handy to see a quick representation of the palette.

Disable Styles(CSS/Disable Styles/All Styles): A good way to make sure your site markup and organization makes sense.Â Also, it’s a visual representation of what search engines see, and perhaps what people with visual impairments encounter when using screen readers.

Strength: Very easy to save edited CSS/HTML.Â Overwhelming number of helpful tools.

Weakness: Page refreshes can reload CSS causing you to lose changes.Â Background images vanish when editing CSS in some cases.Â Unfortunately, WordPress themes are one of these cases.Â It is listed as a bug to hopefully be fixed in an upcoming release.

This plugin is written and maintained by Chris Pederick and is licensed under the GPL.

Firebug

Firebug for Firefox

Firebug also has a lot of features and I won’t pretend to even understand them all.Â But, there are a few features that I use all the time that have saved me countless hours:

Inspect: This is easily my favorite Firebug function.Â You can inspect any element on the page and see its corresponding DOM, Layout & Style info.Â It even adds a right-click Inspect option on the context menu.

The breadcrumb list of the CSS heirarchy is wonderful, but the representation in the Style tab is priceless.Â It shows a prioritized view of all of the styles that affect the element you’ve selected.

When you inspect an element on the page, it visually shows the corresponding margins, border, and padding, so you can see how much room the element is taking up.

Debug, profile & execute JavaScript on the fly.Â I can’t talk about this much, because I’m a JavaScript hack.Â Incredibly useful feature, though.

Strength: Clear, easy, prioritized view of the style ‘cascade.’

Weakness: Not as easy to save changes (although quite possible).

This plugin is written and maintained by several people including: Joe Hewitt, John Barton, Justin Dolske, and others and is licensed under the BSD license.

Some people prefer Firebug to the Web Developer Toolbar.Â While some of their functionality overlaps, they’re both have such individual strengths that I use them both all the time, usually simultaneously.

I’d encourage you to play around with both and find out what works for you.

GridFox

GridFox

Using grids as guides for design and content placement can help create a more pleasing layouts.Â I tend to divide pages into thirds, but some designers divide their page into as many as 12 or 16 columns.

GridFox lets you easily overlay a translucent mask on a web page and customize the grid width and number of columns and rows to see how the content fits in.Â It’s actually quite customizable, accomodating even very complex layouts.

You can use GridFox in conjunction with the Web Dev Toolbar or Firebug too.

While grids are a great design tool, I heartily applaud those who ‘color outside the lines.’Â The grids are meant to be a guide, not a rule.

Created and maintained by Eric Puidokas and licensed under Microsoft Public License (Ms-PL).

HTML Validator

HTML Validator Firefox Extension

This handy little plugin validates every page you visit and displays the number of errors and warnings in the Firefox status bar.

Double-clicking on these warnings shows you where the errors are and attempts to suggest fixes.Â There are also quick links to HTMLpedia for reference help, and Tidy for help cleaning up the page.

So many layout issues are caused, or exacerbated by, incorrectly formed xHTML.Â Squashing validation bugs is not only fun, it can rewarding.

Developed and maintained by Marc Gueury and licensed under Mozilla Public License 1.1 (MPL 1.1)

So, that’s an overview of a few of the tools I use regularly.Â I very much appreciate the time and energy these developers have put in to develop and share these free tools with us.

Here are a few resources both on and offline that I have really helped me.

Resources That Have Helped Me Create Better Themes

Online

There are tons of useful sites that can help when you’re designing or troubleshooting themes.Â Without a doubt, the three I use most often are:

WordPress Documentation: there’s a metric ton of information in the Codex.Â I spend a lot of time with Template Tags and Conditional Tags.

WordPress Forums: search for answers, post questions to other WordPress users, and even answer a few yourself.

Google.com: It’s almost always easier to find information on WordPress.org using Google than it is using their built-in search.Â Plus, you’ll find lots of other sites with helpful articles and tips.

Offline

I’m still a big fan of the printed page, so here are three books that have helped me tremendously when designing and troubleshooting themes:

WordPress Theme Design by Tessa Blakeley Silver – I wish I’d had this book when I started with WordPress.Â Tessa’s no-nonsense, practical approach to theme design is terrific.Â She walks through the creation of a theme from start to finish and also includes good, basic reference material.

Create a ‘blank’ or stripped down theme template to use as a basis for new sites.Â This is especially helpful when you’re creating multiple WordPress sites.

Spend time going through WordPress Theme tutorials both on and off the Codex.Â Small Potato wrote a tutorial called So You Want to Create WordPress Themes, Huh?, which I found very helpful.Â It’s a tiny bit outdated now, but certainly a good place to start.

You may wish to create multiple theme templates if you routinely create different layoutsÂ (Ex. two or three column).

In my ‘blank’ template, I put in the bare essentials and use my personal naming conventions for classes and IDs, which makes working on multiple sites easier as I don’t have to rediscover what class or ID I used for a sidebar.

I also create all of the major template files including header.php, footer.php, index.php, archive.php, page.php and so on.Â These are adapted as needed with each new theme.

I keep all of the basic styles in the stylesheet, in the organization I’m comfortable with, so I don’t have to recreate it from scratch with each new project.

Get familiar with your must-have plugins. I often use cformsII.Â Because I use it so often, I’m very comfortable with its markup and CSS so it’s easy to create great looking forms.

Start with a pencil and paper. I sketch a quick overview of the site template, including content areas, and think about the markup I’ll use to complete each section.Â Once I have a plan, I start coding the markup followed by the styles.Â When I start designing in front of a PC, I usually just waste time.Â Plus, I love pencils.

The Wrap

I’d encourage you to experiment with some of these free, open source development tools to see if they help make your development faster and easier.

Every day, new bloggers join the WordPress community and every day people ask for help in the WordPress Support forums, often with CSS or other theme issues.Â Having a good working knowledge of CSS, Firebug, and the Web Developer Toolbar can help you spot CSS and markup issues very quickly.

By contributing very little time, you can be a Word Press Support Forum Rock Star and carry the satisfaction of helping others and learning a bit at the same time.

Thanks for being so patient and I hope you got something out of this.Â Please feel free to contact me or post comments if you have specific questions.

Excellent post. I follow very similar methods myself but you have very eloquently put down your thoughts and it was very helpful reading through it. Plus, I am installing GridFox to check it out. Stumbled!

Eric, Sorry I missed your presentation at WordCamp. Just wanted to say thanks for the info about “HTML Validator” add-on. I have always used the web developer toolbar to check, but this add-on looks really great!!!\

I appreciated your session and have availed myself the tools you highlighted. I look forward to a more productive process in rebuilding my WordPress site and other projects. Thanks for making the trip down!