From now through September 14, 2009 you can get a free copy of “The Principles of Successful Freelancing” by Miles Burke by visiting:
http://twitaway.sitepoint.com/

I’ve read the book and recommend it – especially for free. Hurry – the offer is only for two weeks.

I create a lot of sites using WordPress as a content management system, and there are several free tools that I use daily that make designing and troubleshooting WordPress themes much easier.

In this presentation, I’d like to spend a little time talking about:

1. Free Web Development Tools
2. How Free Tools Can Help You Design & Debug Themes
   
3. Resources That Have Helped Me Create Better Themes
4. Tips for Faster WordPress Theme Development

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:

1. Operating System: Ubuntu Linux (What can I say, I’m a free software nut?) Mac or Windows are just fine, if you prefer.
2. 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
3. Image Editing: the GIMP.  Photoshop, Fireworks, or another image editing application should do the trick.
4. 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.
5. Firefox Add-ons:
   1. Firefox Web Developer Toolbar
   2. Firebug
   3. GridFox
   4. HTML Validator

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.

We’ll start with my personal favorite, the Firefox Web Developer Toolbar:

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:

1. 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.
2. Outline Block Level Elements (Outline/Outline Block Level Elements): Puts a border around all, well, block level elements.   This helps visualize where content blocks occur and how much space they use.
3. 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.
4. Resize Browser Window – (Resize . . .): Test sites at different resolutions, such as 800×600 1024×768 1280×1024, etc.
5. Disable Images (Images/Disable Images/All Images): A site should hold up and be navigable even without images.
6. Disable JavaScript (Disable/Disable JavaScript/All JavaScript): Do your scripts degrade gracefully?  Does your site function without JavaScript enabled?
7. 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.
8. Display Ruler (Miscellaneous/Display Ruler): Easily measure heights & widths.  So handy.
9. Display Line Guides (Miscellaneous/Display Line Guides): Helps line up elements on a page.
10. Validate! (Tools/Validate): Validate your CSS, (x)HTML, RSS Feeds, Links, Accessibility, etc.

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:

1. 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.
2. 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:

1. WordPress Documentation: there’s a metric ton of information in the Codex.  I spend a lot of time with Template Tags and Conditional Tags.
2. WordPress Forums: search for answers, post questions to other WordPress users, and even answer a few yourself.
3. 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:

1. 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.
2. Web Standard Solutions by Dan Cederholm – A wonderful guide to meaningful markup and effective CSS.  Dan’s the Man.
3. CSS Mastery: Advanced Web Standards Solutions by Andy Budd – This book reinforces, and builds upon, many of the concepts in Web Standards Solutions.  It covers all kinds of CSS techniques, tips, hacks & filters.

Tips for Faster WordPress Theme Development

This is a collection of just a few random tips that have helped me design themes faster.  This is by no means exhaustive.

1. Know the WordPress Codex. No, you don’t have to read the whole thing, but get familiar with WordPress template tags, conditional tags, and the template hierarchy.  These pop up in every theme, so familiarity with them will help you find solutions quickly.
2. 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.
3. 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.
4. Exercise your CSS chops. Since WordPress Theme layouts are completely CSS driven, improving your CSS skills can only help.
5. 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.
6. Keep morgue files.  Files containing fragments of code snippets, drawings, images, screenshots, links, pages from magazines, etcetera can spur your creativity when it’s running low.  Frequently used code snippets are especially helpful.

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.

I had several goals for the redesign including:

1. overhauling the imagery to better represent me and the site ‘brand’
2. making the site easier to read by using larger/more attractive fonts and better spacing
3. using an elastic layout that works better with different monitor resolutions, and
4. incorporate some new features like the last.fm links in the footer (more to come).

You might ask, “What the heck does ‘sewmyheadon’ have to do with web design, Linux, Open Source, and WordPress?”  Then again, you may not.

If you get a chance, please click around, let me know what you think, and if you encounter any errors.

screencasters.heathenx.org by HeathenX and Richard Querin features video tutorials on Inkscape, a vector graphics program similar to Adobe Illustrator, Corel Draw, or Freehand.

Both programs are free software and run on Linux, Mac, Windows and BSD.

We’ll have our usual bit of discussion and a few presentations on installing and configuring Content Management Systems including:

• WordPress
• Drupal

Look forward to seeing you there!

It’s a wonderful exercise, seeing plain jane markup without the benefit of CSS styling. It illustrates:

1. the power of CSS, and
2. how clean, non-presentational xhtml markup and logical document structure can make a site usable even without the cheery look & feel

As part of site testing, I strip away stylesheets to see what the content looks like to search engines and other devices that don’t support CSS.

Somebody sew my head on please!

Dustin Diaz created this ‘holiday’ to promote Web Standards by stripping away the presentational (CSS) elements on a site to show semantic markup and good structure.

If you’re running WordPress, you automate your site’s undressing using the CSS Naked Day Plugin by Aja Lapus.

I’ve got a little toning up to do beforehand – off to my workout.

I scarfed this book like carrot cake and highly recommend it to anyone interested in Web Standards and creating flexible, usable sites using semantic markup and CSS.

Oh, and if you build websites and aren’t interested in CSS and Web Standards, kiss your sweet job goodbye. Still can’t believe y’all are out there, but I’ve seen your work.