powered-by-theme

Powering Your Design With WordPress

Can you use WordPress to power your web design work? Of course you can. But how? That was the subject of a talk I gave at the 2011 Future of Web Design conference this May in London. If you missed FOWD you missed a great time and some awesome presentations but you didn’t miss everything. The video is available on WordPress.tv and I’m going to share some of the ideas I brought up in my talk right here. Including a free custom theme for you to use in your own projects.

I’ll presume here that you’re already interested in WordPress if you’re reading this but in case you’re not, why WordPress? What’s the big deal? Well, right now, about 14% of the web is built on top of WordPress. That means, as web designers, it’s important that we get this whole theming thing right. Tipping point numbers like that mean more and more of your clients are going to be asking for WordPress. It’s probably starting to happen to you right now.

You’re already a web design expert. You should be a WordPress theme expert too.

Continue reading

WP_Filesystem Tutorial on ottopress.com

Tutorial: Using the WP_Filesystem

Writing files from code, whether it be from a theme or from a plugin, is generally bad mojo. However understanding why you shouldn’t is confusing to many, and then understanding why you shouldn’t do-it-yourself and should use the WP_Filesystem is even more confusing.

A great writeup by Otto on how, why, and when to use WP_Filesystem to write files from a WordPress theme or plugin, including code samples and a demo plugin.

HTML5 Edition for Web Developers

If you’re like me and dread reading detailed specs for web technologies, but want to dig into and learn the details that matter to your work, check out the WHATWG HTML5 specification for web developers by Ben Schwarz.

The focus of this specification is readability and ease of access. Unlike the full HTML specification, this “web developer edition” removes information that only browser vendors need know.

Subversion Cheatsheets

Version control is a key part of a successful software project, and we use Subversion heavily at Automattic. All our themes, side projects, and even PSD files go into SVN repositories.

We often talk to theme designers that are getting into more advanced theme development who need a quick crash course on using Subversion. As part our tips for version control we recommend keeping a handy reference guide at your fingertips for common Subversion commands.

Continue reading

CSS Tip: Hiding Content with Clip

In our themes on WordPress.com we often hide text from screen display but still want it to remain for screen readers. Typical techniques like text-indent and absolute positioning work fine until you try to add RTL support to the theme. After adding RTL styles those techniques cause layout issues; most commonly a huge horizontal scrollbar in certain flavors of IE.

Here’s a technique I came across on Adaptive Themes (Professional Drupal themes and design services) that works really well for this situation.

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

In our testing it seems to work great across all our target browsers.

See the full post on the Adaptive Themes site: Using CSS clip as an Accessible Method of Hiding Content.