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.