I’ve been using the betas for a while and have grown to love it, especially:

• the design and increased usability of the admin interface (backend)
• upgrading WordPress from within WordPress
• adding new plugins from within WordPress

Download WordPress 2.7

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

Being a bit boneheaded, every time I do this, I spend ten minutes searching for instructions, so I thought I’d post them here both for myself, and for anyone else it may help.

Steps to Compact a VirtualBox WinXP Guest in Linux

1. While in your Windows XP virtual machine, download the sdelete program and save it to your c: drive in Windows.  This program allows you to ‘zero out’ the free space on the drive by writing zeros to the unused sectors.
2. In WinXP go to Start/Run and type ‘cmd‘ to open a command prompt.
3. Change directory (cd) to the location where you saved the sdelete.exe file.
4. Enter ’sdelete -c c:/’ to execute the program.
5. Once sdelete is finished, shut down the Windows virtual machine.
6. Open a terminal in Linux and cd to the directory that contains the VDI you’d like to compact.
7. Type ‘VBoxManage modifyvdi xxxxx.vdi’ compact where xxxxx.vdi represents the filename of the virtual disk you’d like to compact.
8. After the command is runs, your VDI will be reduced in size.

There’s a ton of information on Sun’s VirtualBox site and forum.  Here’s a forum thread that I found especially helpful.

For months, I’ve subjected my lovely wife to countless hours of MSNBC, CNN, and The Daily Show. Like an addict, I jones for the latest political news from the moment I wake up, and have even had political nightmares, waking up in a cold sweat.

If you haven’t voted, and you’re here in America, tomorrow’s the big day, so get off your duff and exercise your rights, dang it.

Not sure what I’ll do once the election’s over, but in the meantime, I’ll post a geeky widget because, well, that’s what geek news junkies do, right? [widget removed 11/06 - see MSNBC for full details]

Final Electoral Results: Barack Obama 364/173 John McCain

P.S. Watch Rachel Maddow. She’s darling, goofy, and wicked smart.

P.S.S. If you’re having trouble deciding who you should vote for, I believe the correct answer is Barack Obama!

Tracking Time with Hamster

Hamster is a Gnome application that sits in a panel so you can access it easily. It’s available in the repositories of several Linux distributions and, if you’re an Ubuntu user, there are APT sources you can add to install via Synaptic.

After tracking my time for several months, I’m consistently surprised at the blatant discrepancy between how much time I thought I spent on a project and the actual amount of time I actually worked.

If you’re looking for a way to better understand and influence where your time goes, give Hamster a try.

By ‘footer,’ I don’t mean the footer.php file that is often found in WordPress themes, but rather just to the line or two at the bottom of sites that displays site information:

Footer Markup

Here’s the basic markup for the footer pictured above:


<ul id="site_info" class="footerfirst">
<li class="no_disc">&amp;copy;
<?php
ini_set('date.timezone', 'America/Los_Angeles');
$start_year = 2002;
$this_year = date('Y');
if ($start_year == $this_year) {
echo $start_year;
}
else {
echo "{$start_year}-{$this_year}";
}
?>
<?php bloginfo('name'); ?></li>
<li><a href="<?php echo get_permalink(18); ?>">Privacy Policy</a></li>
<li><?php wp_loginout(); ?></li>
<?php wp_register('<li>','</li>'); ?>
<li class="no_disc credits"><a href="http://www.ivycat.com">website by ivycat</a></li>
</ul>

Let’s dissect this baby and see what each bit does.

Make a List

First, the entire markup is an unordered list with an ID of site_info. Why? Well, it’s a list of links and I usually prefer to make navigation from lists. Just makes semantic sense to me.

I call this div site_info because that’s really what it is and it’s possible that it may not be located in the footer in future redesigns, so I’m going with a safe, descriptive identifier.

Also, since lists are block-level elements, they can be manipulated in CSS just like divs, paragraphs, headers, or any other block element.

This example list contains four list items:

1. Copyright Information
2. Privacy Policy Link
3. Login & Site Admin Links
4. Credits

Copyright Information

The copyright date is self-updating, so you never have to update it again.

<li class="no_disc">&amp;copy;
<?php
ini_set('date.timezone', 'America/Los_Angeles');
$start_year = 2008;
$this_year = date('Y');
if ($start_year == $this_year) {
echo $start_year;
}
else {
echo "{$start_year}-{$this_year}";
}
?>
<?php bloginfo('name'); ?></li>

This block of code establishes the start year and the current year (based on server time) and checks to see if they are the same. If so, it shows the current year, otherwise it displays the start year and end year, separated by a dash, followed by the blog name.

I learned this technique from PHP Solutions, by David Powers, which I highly recommend if you’re a designer trying to learn a bit more PHP.

I’ve added a class=”no_disc” to this list item so we can remove the bullet using CSS.

Privacy Policy Link

The next list item is a link to the site’s privacy policy:

<li><a href=”<?php echo get_permalink(18); ?>”>Privacy Policy</a></li>

Pretty easy to see what’s going on here. We’re using the get_permalink template tag to find the permalink of the Privacy Policy page by ID number.

There are several other ways you can link to pages, but I find this suits this situation well. Of course, you can add links to whatever you like.

Login & Site Admin Links

The next two entries provide site administration links.

<li><?php wp_loginout(); ?></li>
<?php wp_register(’<li>’,'</li>’); ?>

The first line displays uses the wp_loginout template tag to display login link. When a user is logged in, this link changes to a logout link.

The second line uses the wp_register template tag to display a ‘Site Admin’ link when a user is logged in. If you’ve configured your site to allow users to register themselves, it will display as a ‘Register’ link if users aren’t logged in.

Credits

The final list item displays site credits. Giving it two classes allows us to take the bullet away from the list item and float it to the right.

<li class=”no_disc credits”><a href=”http://www.ivycat.com”>website by ivycat</a></li>

Footer Styles

Styling our list is pretty easy and involves a few simple floats.

#site_info {
float:left;
clear: both;
width:100%;
background: #666;
color: #FFF;
}
#site_info li {
float: left;
list-style-type: disc;
margin: 0 0.5em 0 1em;
}
#site_info li.credits {
float: right;
margin-right: 1em;
}
#site_info a {
color: #FFF;
font-size: .9em;
text-decoration: none;
}
#site_info a:hover {
color: #ccc;
text-decoration: underline;
}
#site_info li.no_disc {
list-style-type: none;
}


These styles are pretty self-explanatory, but here are the major parts:

1. We’re floating the entire list to the left, making sure it clears any elements above it, and setting background and font colors
2. Then, we’re floating our list items to the left, with the exception of the one with the class of “credits,” which floats right.
3. Finally, we throw in a bit of margin, and some link styles and we’re done.

Of course, this is a framework and you’ll likely have to tweak the styles a bit to fit it in your theme, but that’s the fun part, right?

You can see an example of this footer used on sewmyheadon.com.

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.

My company, IvyCat.com, is one of the sponsors and we’re giving away a few hosting accounts as door prizes.

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

I’ll post notes for the session in the morning.  Hope to see you there.

You’ll even see my name in the list of speakers. I’ll be leading a breakout session at 2pm called “Design & Debug Themes with Free Tools,” which will cover using free and open source tools like Firebug and the Firefox Web Developer Toolbar to build, edit, and troubleshoot WordPress Themes.

I’m excited and a bit nervous.

If you’re a user, developer, or are just interested in WordPress and would like to learn and network with other WordPress folks, come on down.

I hope to meet you at WordCamp Portland.

WordCamp was only one day long this year, but it offered two different tracks: one for developers and another for bloggers.

I was able to see several terrific presentations, my favorites being:

• Tantek Çelik’s presentation on “WordPress & Microformats: Past, Present & Future.“ I’ve been using Microformats on all recent projects and was happy to learn more about how they have become, and will continue to be, an awesome tool for making data more useful on the web.
  
• Noel Jackson’s “Color Theory and the Making of Monotone“ explained the color theory and slick PHP coding he used to create the Monotone and upcoming Duotone themes, which can automatically select theme colors based on colors of images in a post.
• Liz Danzico and Jane Wells “Riding the Crazyhorse” highlighted some user testing that they conducted with Automattic on the WordPress 2.5 admin pages and the resulting changes that they’re recommending for upcoming versions of WordPress.

Other things I learned from my seat in the back of the auditorium:

1. Twitter is like crack to bloggers.  At any given moment, 25 to 50% of the laptops were tuned to Twitter.  Those using their laptop for other reasons often Twittered with an iPhone.
2. WordPress folks love Apple.  I’d guess that between 50 and 70% of the laptops carried by attendees were Macs.  I only spied one other person running Linux at WordCamp; a lady in front of me using an Asus EEE PC, running Xandros.

I’m quite surprised that more WordPress enthusiasts aren’t Linux geeks.  I realize that Apple’s hardware is gorgeous and the Mac OS clearly outperforms Windows and is arguably prettier, but from a Free Software perspective, Apple is pretty abysmal.

One terrific new feature at WordCamp this year was a ‘Genius Bar’ where helpful volunteers were busy troubleshooting and answering questions about WordPress, themes, and plugins.  I even got to hit up Lloyd Budd for a few answers and he was quite nice and helpful.  I know he’s a Linux user.

At future WordCamps, I’d love to see:

1. Dates, times & locations announced much sooner, so people can make plans more than a month ahead of time.  It really helps if one is coming from out of town.
2. More content related to using WordPress as a CMS on non-blog sites.