Web Dev, Linux, WordPress & More

Design & Debug WordPress Themes Using Free Tools

by eric on September 27th, 2008 in: Web DesignWordPress



Following are excerpts, notes, and links for my presentation at WordCamp Portland 2008 titled ‘Design & Debug Themes Using Free Tools.’

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

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 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

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

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.

13 Responses to ' Design & Debug WordPress Themes Using Free Tools '

Subscribe to comments with RSS or TrackBack to 'Design & Debug WordPress Themes Using Free Tools'.

  1. September 28th, 2008 at 21:32

    Wow – really wish I’d have caught this yesterday, but thanks for your detailed notes/links!

  2. K said:

    September 29th, 2008 at 06:24

    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! :-)

  3. Mike Mathews said:

    September 29th, 2008 at 10:47

    This was a great presentation, thanks.

    I spent a couple of hours playing with your suggestions and then applied them to a small non-profit site I built and these solved a bunch of problems and worked wonders.

    Thanks again!

  4. eric said:

    September 29th, 2008 at 11:01

    Thanks for the kind words. Glad this presentation and post helped a few people. :)

    I’m so glad I was able to attend and present at WordCamp Portland – it was a great time.

  5. mfields said:

    September 30th, 2008 at 06:48

    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!!!\

  6. Ron Ares said:

    September 30th, 2008 at 16:42

    Eric,

    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!

  7. eric said:

    October 3rd, 2008 at 14:09

    mfields – Glad you’re digging the HTML Validator add-on; it sure helps me out.

    Ron – glad you enjoyed the session. Hope to see you at WordCamp Portland next year.

  8. October 5th, 2008 at 18:40

    [...] Eric Amundson – Design & Debug WordPress Themes Using Free Tools [...]

  9. October 17th, 2008 at 17:51

    [...] Also, I’ll be leading a session at 3pm titled Design & Debug WordPress Themes Using Free Tools. [...]

  10. henry said:

    March 3rd, 2009 at 18:19

    haha ^^ nice, is there a section to follow the RSS feed

  11. eric said:

    March 4th, 2009 at 09:32

    Not sure what you’re referring to, Henry. Do you need the feed for this site or thread?

  12. February 12th, 2010 at 07:45

    [...] 12 – Design & Debug WordPress Themes Using Free Tools [...]

  13. emma said:

    March 9th, 2010 at 09:53

    Thank you, this is very helpful.

Leave a Reply

%d bloggers like this: