I’ve already upgraded two sites using the automatic update from within the WordPress Dashboard and everything went off without a hitch.

There are a slew of new features and under-the-hood optimizations making WordPress even more pleasurable to develop with and use.

Check out the new WordPress 2.9!

What Does “Bulletproof” Mean to me?

A bulletproof site is:

• Usable
• Accessible
• Secure

Most importantly, a bulletproof site provides both your users and you with a satisfying experience, regardless of browser type, network speed, physical abilities, or preferences.

I’m going to highlight some easy tools to help you:

1. Keep on top of backup and maintenance
2. Tighten up security
3. Speed up performance
4. Identify usability & accessibility issues
5. Increase usability by improving search

Backup & Maintenance

Here are some important things you need to know about backup and maintenance:

Backup regularly: I know it should go without saying, but I’ll say it again anyway: Backup regularly!

They say “it’s only important to backup the stuff you want to keep,” which for me includes custom themes and plugins and, most of all, databases.

Know your host’s backup policies and tools: Your web host should provide you with handy-dandy backup tools; spend some time familiarizing yourself with them.

Find a plugin that makes backup and maintenance easier: There are a bunch of great backup plugins. One of my favorites is WP DB Manager by Lester Chan.

WP-DBmanager Backup

WP DB Manager lets you configure automatic backup and maintenance on your WordPress database and will even email you regular backups. I highly recommend having regular backups of your database emailed to you–better safe than really, really sorry!

Beef Up Security

Another thing that should go without saying–but merits oodles of repeating anyway–is KEEP WORDPRESS AND YOUR PLUGINS UPDATED! Yes, it’s so important it even needs to be written entirely in caps.

Paying attention to security has saved my bacon enough times to supply a year’s worth of deliciously high-cholesterol breakfasts!

Tips for beefy security:

• Use the secret key in your wp­config.php
• Read the heck out of the invaluable “Hardening WordPress”
• Use SSL for Admin Pages or the helpful Admin SSL plugin by Ben Green
• Audit your WordPress setup with WP Security Scan by Michael Torbert

WP Security Scan

WP Security Scan - Audit Security on Your Site

WP Security Scan looks at your WordPress setup and file system configuration for potential security vulnerabilities and provides tools and advice on how to patch them.

Speed it Up!

A bulletproof site is a speedy site!

Google claims that a 500 millisecond increase in loading time reduces their traffic and advertising revenues by 20%! Amazon has reported that each 100 millisecond increase in load times reduces their conversion rates by 1%.

These are pretty darn convincing argument for the importance of speed.

Here’s what you can do to ensure your site has all the zip it needs:

Be prepared for traffic:

Yahoo's YSlow Plugin Finds Performance Bottlenecks

• Have good hosting infrastructure & make sure your host can quickly and easily support your site’s growth
• Tailor images & code for use on the web
• Reduce the number of requests to the server
• Offload media to other domains
• Use plugins judiciously
• Enable a caching plugin like WP Super Cache by Donncha O Caoimh

Test your site’s speed with these Firefox plugins:

• Yahoo’s YSlow
• Google Page Speed

Both YSlow and Page Speed are Firefox plugins that help identify and fix performance bottlenecks. You definitely want to avoid having a rotten rating like this!

Use the Firefox Web Developer Toolbar

Why? Because it’s amazing!

The Firefox Web Developer Toolbar by Chris Pederick is easily my favorite tool for:

• Development: Write CSS & HTML and see the effects in real time
• Troubleshooting: Troubleshoot HTML markup & CSS
• Testing: Test sites for common usability & accessibility issues

Firefox Web Developer Toolbar

Development:

Test changes on the fly with the Web Developer Toolbar

With the Web Dev toolbar, you can view and change CSS and HTML and see the effects instantly. It’s a great way to locate troublesome layout issues.

You can even use it to save changes locally; in fact, this is how I code 95% of my CSS.

Troubleshooting:

If you visit the WordPress forums, you may notice that people have tons of layout and theme issues caused by simple HTML or CSS mistakes.

The Toolbar helps you find and fix errors by making it easy to validate online, or local, HTML and CSS.

Testing

Testing your site is very important and often overlooked. The Web Dev Toolbar is an invaluable testing tool. Here are some ways I use it:

Disable CSS

Disable CSS:

Stripping your site bare by disabling CSS gives you a good idea what search engines and screen readers encounter when they visit your site.

A bulletproof site makes sense and is easy to navigate even when it’s not dolled up with fancy CSS makeup. Good, semantic markup helps both users and search engines.

Disable images:

What happens when you turn off images? There are still people on dial-up, and eliminating images can really speed up load times.

Disable Images

The New York Times website is a great example of the way a bulletproof site functions without images. For your site to be bulletproof, you should be able to answer “yes” to the following questions:

• Can you still navigate and make sense of the site?
• Is there alt text for the images?
• Is the site branding still visible?

Disable JavaScript:

It’s not uncommon for users or security software to disable or filter JavaScript, and the Web Dev Toolbar makes it easy to see how your site functions without JavaScript.

Disable JavaScript

Here’s a great example from Fickr, whose site makes wonderful use of JavaScript. Notice that even with JavaScript disabled, Flickr still works. They even present us with a handy message letting us know that our experience would be better if we had JavaScript. That’s graceful degradation!

Disable JavaScript with the Web Dev Toolbar and ask yourself:

• Does the site degrade gracefully?
• Is there an alternate version or message for users without JavaScript?
• Can you still navigate the site?
• Do forms and behaviors still work?

Validate WAI/508 Accessibility:

Test Accessibility

Just as you can validate HTML and CSS with the Web Developer Toolbar, you can also use it to send your pages through Section 508 and WAI Accessibility validators.

The Toolbar will:

• Show you major accessibility issues
• Link to usability checkpoint definitions

While automated online tests aren’t the best way to test accessibility, they’re a great start, so take advantage of this handy feature.

Improve Search for Better Usability

I can’t emphasize enough how important search is for a website’s usability and accessibility. There’s a reason Google is a household name — they’ve proven that better search equals better usability… which equals more traffic!

As sites grow, search only becomes more critical. WordPress has a search feature that was created for blogs. Unfortunately, it just ain’t good enough for a bulletproof site. (Please don’t tell WordPress search I said that, though; there’s no need to go hurting its feelings.)

Here’s How WordPress search is flawed:

A WordPress search for “hosting” on our WordPress-powered business site produces this:

WordPress Search Results

• The results are listed in reverse chronological order, which is okay for blogs, but isn’t necessarily good for businesses
• The results aren’t the most relevant
• The search terms aren’t highlighted
• When content grows, search gets worse

Meet Relevanssi, the bulletproof WordPress search solution:

Fortunately, I found a solution with Relevanssi, a fantastic search plugin by Mikko Saari. Yay!

Here’s what happens when I search for “hosting” using Relevanssi:

WordPress Search with Relevanssi

The results are ordered by relevance and the search terms are highlighted. But that’s not the only reason that Relevanssi instantly became one of my favorite plugins!

Relevanssi lets you:

• Include only posts, only pages, or both
• Index comments, tags and custom fields
• Expand shortcodes before indexing
• Limit results to certain categories or tags
• Log searches
• And much more!

Best of all, the more content you have, the better your search becomes! Now is that spiffy or what?

The Wrap

I know this is a lot of info, and it just scratches the surface of each topic, but hopefully you’ve found something helpful. Feel free to contact me if you have any questions.

I appreciate all those who attended, organized and sponsored WordCamp Seattle and I look forward to seeing you at an upcoming WordCamp!

Again, if you’d like to see me speed-talk my way through this presentation, head on over to WordPress.tv to view video of this presentation

They’ll be filling an hour with some focused, five-minute presentations that zero in on a WordPress-specific topic.

More info at:
http://www.wordcampseattle.com/2009/09/ignite-wordcamp-seattle-speakers-needed/

WordCamp Seattle is September 26th, 2009 and there’s already an impressive line-up of speakers.

WordCamps are informal conferences where you can learn about the world’s most popular blogging platform, WordPress.- WordCamp Seattle

I’ve registered – if you’ll be there and want to connect, contact me.

More details at www.wordcampseattle.com

Edit: I’ll be giving a 5 minute Ignite presentation at WordCamp Seattle entitled “5 Free Ways to Bulletproof Your WordPress Site” – hope to see you there.

Relevanssi - WordPress Search Reborn

I’ve never been crazy about WordPress search, often preferring to use Google to search a site, rather than use WordPress built-in search. This goes for WordPress.org too – it’s always much easier for me to find answers in the WordPress Codex using Google searches.

WordPress search is intended for the average blog and it works alright, but when constructing a more fully-featured site, or using WordPress as a CMS, the simple, unweighted, reverse-chronological results that WordPress search provides just don’t cut the mustard.

I tried several different plugins and hacks before finding Relevanssi, a plugin by Mikko Saari, which singlehandedly fixes WordPress search, providing more relevant search results and several options to tailor result presentation.

Since I began using Relevanssi last month, Mikko has been actively developing and improving the plugin with some help from the community, and it’s quickly become one of my top five WordPress plugins. Heck, I’m even using Relevanssi on sewmyheadon.com, if you’d like to give it a try.

Relevanssi is an indispensable WordPress plugin and I encourage anyone using WordPress to try it and support its development. Trust me, you’ll never go back.

WPTouch Plugin

Being an iPhone user, I’m always happy to find sites that have mobile-friendly versions.

Despite the Safari browser that comes with the iPhone and iPod Touch,  I find many websites difficult to navigate using such a small screen.

Looking into some WordPress iPhone plugins, I installed and configured WPtouch, which automatically displays a mobile-compatible version of a WordPress site for users browsing with iPhone, iPod Touch, or Android Touch devices.

Looks alright on my iPhone.   Let me know what you think.

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

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 smho_loginout(); ?></li>
<?php smho_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 smho_loginout(); ?></li>
<?php smho_register(’<li>’,'</li>’); ?>

The first line displays uses the smho_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 smho_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.