Author: Lance Willett

My name is Lance, I am a blogger, product manager, software developer, and business executive creating high-quality, engaging, and customer-centered experiences for people online. México-born. Chief Product and Technology Officer at Tumblr (Automattic).

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.

Custom Menu Code Samples

Do you find yourself taking older themes and adding support for Custom Menus? Here are code samples that you can use for just that.

To be clear, this isn’t a full-blown tutorial for Custom Menus. See Justin Tadlock’s excellent post, Goodbye, headaches. Hello, menus! or the wp_nav_menu Codex page for all the juicy details.

Continue reading “Custom Menu Code Samples”

Using TextMate for WordPress Code Cleanup

I spend a lot of time cleaning up WordPress themes. During the code cleanup I often perform certain cleanup tasks over and over, which makes them perfect for TextMate commands.

In this post I’ll show you how to add two useful commands to TextMate, then move through the steps I take for theme code cleanup and put the commands into practice.

First, let’s add the commands to a TextMate bundle. If you don’t know how to add commands to a TextMate bundle, or don’t have your own bundle set up yet, start here and add a new bundle. I usually add my own commands to a bundle called @lance so it sticks to the top of my bundle list.

Continue reading “Using TextMate for WordPress Code Cleanup”

Quick and Dirty Widget Testing

Testing widgets with your WordPress theme would be so much faster if you could enable all widgets at once, instead of dragging them one by one.

Here are two small functions to help with widget testing. The first takes all “Inactive Widgets” and adds them to the first registered sidebar in the theme. The second removes all widgets, leaving the widget area empty.

To use, add the code into your theme’s functions.php and uncomment the add_action() calls to trigger the functions. Happy testing!

<?php

/**
 * Quick and dirty inactive widget loading
 * Loads all inactive widgets into first registered sidebar
 *  
 * @global array $wp_registered_sidebars
 */

// To use: uncomment the add_filter call below, then refresh your admin Widgets page
// add_action( 'in_widget_form', 'enable_inactive_widgets' );

function enable_inactive_widgets() {

	// get first registered sidebar
	global $wp_registered_sidebars;
	$first_sidebar_id = array_shift( array_keys( $wp_registered_sidebars ) );

	// get widgets
	$widgets = get_option( 'sidebars_widgets' );

	// if inactive widgets exist, add them to the first sidebar
	if ( isset( $widgets['wp_inactive_widgets'] ) && '' != $widgets['wp_inactive_widgets'] ) {
		$inactive_widgets = array(
			$first_sidebar_id => $widgets['wp_inactive_widgets']
		);
		update_option( 'sidebars_widgets', $inactive_widgets );
	}
}

/**
 * Quick and dirty widget removal
 * This will remove both active and inactive widgets
 *  
 */

// To use: uncomment the add_action call below, then refresh your admin Widgets page
// add_action( 'in_widget_form', 'remove_all_widgets' );

function remove_all_widgets() {
	update_option( 'sidebars_widgets', null );
}

?>