Forget fiddling with plugins for this one—by using the DOMDocument class in PHP 5, you can scrape your Google Shared Notes feed to display your latest shared notes directly on a page within WordPress.

See the finished result: http://www.dquinn.net/notes/

It's actually really easy. First create a template called "page-notes.php." Then, make a page in WordPress and call it "Notes" or something similar, and assign your new page template to it. Here is the code that goes in your template:

<ul class="google-reader">
<?php
$doc = new DOMDocument();
$doc->load('PUT YOUR FEED URL HERE');
$titles = array();
$content = array();
foreach ($doc->getElementsByTagName('entry') as $node) {
     $titles[] = $node->getElementsByTagName('title')->item(0)->nodeValue;
     $links[] = $node->getElementsByTagName('link')->item(0)->getAttribute('href');
     $quote[] = $node->getElementsByTagName('annotation')->item(0)->nodeValue;
}
for ($i=0; $i<count($titles); $i++) {
     echo "<li>";
     echo '<a href="'.$links[$i].'">';
     echo $titles[$i];
     echo '</a>';
     if ($quote[$i]) {
          echo '<span class="shared-note">';
          echo '<span class="shared-avatar"><img width="40" height="40" alt="YOUR NAME" src="http://www.gravatar.com/avatar/PUT YOUR GRAVATAR ID HERE?s=40"/></span>';
          echo '<span class="shared-quote"><span class="shared-pip"></span><em>';
          echo str_replace("YOUR GOOGLE READER USERNAME","",$quote[$i]);
          echo '</em></span>';
          echo '<span class="shared-follow"><a href="PUBLIC URL TO YOUR GOOGLE READER PAGE">Follow Me on Google Reader »</a></span>';
          echo '</span>';
     }
     echo "</li>";
}
?>
</ul>

You'll need to fill in the following values where noted above:

"PUT YOUR FEED URL HERE." This one is tricky to find. Go to your public profile and then click on the link to your Atom Feed. This is the RSS that the script will parse.

"PUT YOUR GRAVATAR ID HERE." I like to have my gravatar appear next to each note (if I've left one). Go to Gravatar to get your encrypted email ID (it's a really long sequence of numbers/letters). You could, of course, substitute this with any image.

"YOUR GOOGLE READER USERNAME." Mine is "alkah3st." The script looks for your username in the XML nodes to parse the note, so this is case-sensitive.

"PUBLIC URL TO YOUR GOOGLE READER PAGE." Mine looks like this: http://www.google.com/reader/shared/djamesquinn

This will generate the latest items in your Shared Notes feed in an unordered list. For items that you shared but didn't write a note for, it will generate the following markup:

<li>
<a href="http://volokh.com/2009/10/27/legal-scholarship-in-the-internet-age/">Legal Scholarship in the Internet Age</a>
</li>

If you did write a note, then it will generate this markup:

<li>
<a href="http://feeds.gawker.com/~r/gawker/full/~3/eynAol1tBZI/french-convict-the-church-of-scientology-of-fraud-almost-ban-it">French Convict the Church of Scientology of Fraud, Almost Ban It [Scandal]</a>
<span class="shared-note">
     <span class="shared-avatar">
           <img width="40" height="40" src="http://www.gravatar.com/avatar/8c35d8ee142dbe5101cf9314236a87fc?s=40" alt="Daniel Quinn"/>
     </span>
     <span class="shared-quote">
          <span class="shared-pip"></div>
          <em>Nice.</em>
     </span>
     <span class="shared-follow"><a href="http://www.google.com/reader/shared/djamesquinn">Follow Me on Google Reader »</a></span>
</span>
</li>

Last, but not least, you can style the markup however you like, but if you want the neat talk bubble like I have, you'll want CSS that goes something like this:

ul.google-reader {
	margin-left: 0px;
}

ul.google-reader li {
	border-top:1px dotted #CCCCCC;
	padding-top: 15px;
}

.shared-note {
	display:block;
	margin-top:15px;
	overflow:hidden;
	padding-bottom:20px;
	position:relative;
}

.shared-avatar {
	display: block;
	float: left;
}

.shared-avatar img {
	border:1px solid #C2D9FF;
	padding: 2px;
}

.shared-quote {
	float: left;
	width: 380px;
	margin-left:20px;
	position: relative;
	background-color: #E1ECFE;
	border: 1px solid #c2d9ff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 10px;
}

.shared-quote em {
	font-size: 12px;
	font-style: normal;
}

.shared-quote .shared-pip {
	display: block;
	position: absolute;
	top: 10px;
	width: 16px;
	height: 16px;
	left: -9px;
	background: url(images/pip.gif) no-repeat;
}

.shared-follow {
	bottom:0px;
	font-family:arial;
	font-size:10px;
	font-style:italic;
	left:80px;
	position:absolute;
	width:300px;
}

You can download the "pip" image here: http://www.dquinn.net/wp-content/themes/sneakers/images/pip.gif

Note: Keep in mind that I have Eric Meyer's Reset CSS in my stylesheet.

Using Flutter to Establish Book-Author Relationships

We've heard a lot about Flutter. The Flutter homepage has accumulated something like 1,592 comments since its release—a bewildering array of bug reports, praise, and feature requests—and the now defunct support forum was a mire of temporary solutions and fixes until it was abandoned by its developers and replaced with a Google Group. The only public place that exists for WP hacks like myself to confer about the plugin in its current state is this group, which has recently been beset by spammers. The Freshout guys occasionally post there, but we’ve heard little about progress on the next release of Flutter, even while bug fixes circulate among members of the community.

Navid Safabakhsh

But we can’t criticize Freshout for being slow about progress, or for the hackiness of Flutter. What VP of Production and Principal of the design house Freshout Navid Safabakhsh has been up to with his team has the potential to transform WordPress into a fully fledged CMS, with content types, custom write panels, and swanky GUI’d custom fields. Even if Freshout abandoned the plugin today and left us with Flutter as is, we should be eternally grateful. In a blog post on Freshout, Navid explains how Flutter evolved from a fork of Custom Write Panel into Fresh Page, and ultimately into Flutter, not as an open source project, but as a real-time solution to Freshout’s clients’ needs. “We have been criticized quite a lot in the past year or so for being slow with support and lack of transparency with the product plan of Flutter. There is a good reason for that,” Navid writes, “It’s because there isn’t a clear product plan that’s centered around the community. The product plan is centered around what our clients ask us to build since that’s our source of revenue.” Navid remains skeptical about releasing a final version of Flutter into the GPL partly because of all the zaniness that erupted from Flutter’s overnight community, and partly because his 25-person team has a business to run and can’t deal with providing support all night for free. But that doesn’t mean Navid and Freshout aren’t open to getting the job done. “Over the next few weeks, we’re getting in touch with anyone who wants to help us put some serious energy back into Flutter. If you’re one of these people, hit me up.”

Now here’s the really cool news: in his post, Navid confirms the rumor that Freshout’s got the attention of Matt Mullenweg, the official king-god of WordPress. On a post in the Google Group entitled “Is Flutter dead?” (to which Navid replies enigmatically, “No, it’s not. We’ll communicate our plans soon”), Google groupie Tammy Hart writes:

Matt Mullenweg was here at WordCamp Birmingham this past weekend where there ended up being a big buzz about Flutter. As he was leaving and saying a final goodbye to me with a handshake, he said, “I really like what you're doing with Flutter, but I don't like how the plugin works... So I'm gonna make it better.”

Wow. Could you imagine CMS functionality on the roadmap? I can’t, but I won’t lose hope. WordPress 2.9 is due out October 31 though the release date looks a little too optimistic for me (there are 623 of 776 active tickets, which sets Milestone 2.9 at 20% completion as of today). Navid writes that we could hear about the game plan for Flutter as early as “the end of October”  or see a release by “Nov 7^th, which will include fixes to the most urgent bugs.” Sounds too good to be true.

Custom Write Panels

And what about all the Flutter clones out there, borne most likely out of frustration with Freshout’s unresponsiveness or itching anticipation for what can be done with GUI’d custom fields in WordPress? Navid isn’t too pleased with dividing up the potential for open source labor: “There are a number of other CMS plugins that were released after Flutter and directly ‘compete’ with us [see Magic Fields, developed by a couple of ex-Flutterers]. This is a concept that I just don’t understand in the GPL world. We’re not competing with any of you. We’re just sharing some of our code for other people that want to use it. That’s really it.”

It’s all very interesting.

Here’s the thing, though, for all you whining WP masses out there: There is already a lot you can do with Flutter, as buggy as it is today. If you troll through all the posts in the Google Group, you’ll find enough fixes to make Flutter usable for the time being. In a version I’ve been patching, I’ve got image uploads working reliably (cropping disabled), my categories don’t disappear, jQuery plays nicely with the Dashboard, and TinyMCE behaves in HTML mode. I’ve also created stable relationships between post “types” through Flutter fields that wouldn’t be manageable for the end user without the grouping capabilities that Flutter’s GUI allows for (see Harvard Common Press, for example—books and authors are intimately related thanks to Flutter. This situation is similar at Fringe Magazine).

So let's not lose hope or beleaguer Navid any more than we already have. I'll see you in November.

UPDATE: Attached is my less buggy version of Flutter, per request. I offer no support for this, as I plan to document the changes I made in a later post.

WordPress's search engine is notoriously unhelpful because it sorts search results by date instead of relevancy. Few plugins out there solve the problem adequately, and those that do must replace the WordPress search engine altogether. (Some time ago, we had a free plugin called The Search Reloaded that sorted results by relevancy, but now it's part of a commercial package. Search Unleashed and Relevanssi are two other solutions, but they have a tendency—in my experience—to interfere with heavily customized themes that employ complex loops.)

Part of overhauling the websites owned by Harvard Common Press (HCP) was the process of converting them to WordPress. You'll notice that The Harvard Common Press website and its microsite, Not Your Mother's Cookbooks (NYMC), search across indexed pages in the following domains:

• http://www.harvardcommonpress.com
• http://www.thejoyofpregnancy.com
• http://www.notyourmotherscookbook.com
• http://www.nursingmotherscompanion.com

So if you search for the book "The Joy of Pregnancy" you will get results from all of these sites, and Google will even suggest the other domains before calling results from within the HCP website. Potentially, we could even add Tori Kropp's personal website to these results (she is the author of the book), even though we don't control that domain.

(I'm still working on converting The Joy of Pregnancy and The Nursing Mother's Companion to WordPress, so those don't use Google Custom Search just yet.)

If your sites are already well-indexed by Google, the custom search offers a vast improvement over WordPress' built-in search (at least for the time being). Users are already accustomed to using Google's services, so the custom search will be a welcomed addition to your site, and it's free if you don't mind the ads. So let's look at integrating the search into our theme.

Installing Google CSE in WordPress

Go to Google Custom Search and sign up for an account.

Search Across Multiple Sites

What you'll need to do is create a custom search engine on your CSE site profile for each website in your ring. So I created CSE for both the HCP website and NYMC. I then had each of these engines search across all four websites listed above in the CSE Control Panel by entering in their domains. For our purposes, we want to embed the CSE as an iframe on our site, so choose that option when you get the CSE code.

You can customize the "Look and Feel" for each engine to your liking, as well as the search results' box width (but keep in mind that if you position ads to the right, the search results box will force a width greater than 780 pixels even if you set the width to something smaller. The best position for ads if you want to control the width is "top and bottom").

Next, I created a template called "searchform.php" in my theme to override the default search bar. The default code for this template is as follows:

<li id="search">
  <label for="s">Search:</label>
    <form id="searchform" method="get" action="/index.php">
      <div>
         <input type="text" name="s" id="s" size="15" /><br />
         <input type="submit" value="Search" />
      </div>
     </form>
</li>

Google will provide you with the following code for the search box:

<form action="http://www.yourwebsite.com/search/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="YOUR UNIQUE CODE HERE" />
    <input type="hidden" name="cof" value="YOUR AD POSITION HERE" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&t13n_langs=en"></script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

To merge the two, you need to:

• Remove the method='get' attribute
• Ensure the cse-search-box id is on the form tag
• Swap out the URL for the action attribute to where you'd like the search results to appear on your site (see below)
• Add the hidden input fields
• Add the javascript
• Change/add the name attributes on the submit and text inputs to match Google's

Here is an example:

<li id="search">
<label for="s">Search:</label>
<form id="cse-search-box" action="<?php bloginfo('url'); ?>/search/">
    <div>
        <input type="hidden" name="cx" value="PUT YOUR GOOGLE VALUE HERE" />
        <input type="hidden" name="cof" value="PUT YOUR AD POSITION HERE" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" id="s" size="15" />
        <input type="submit" name="sa" value="Search" />
        <input type="text" name="q" id="s" />
    </div>
</form>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&amp;t13n_langs=en"></script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
</li>

Great. If you did this properly, you should see Google's logo overlay on your search box. You cab modify how you want this to look in your CSE account.

Now for the search results template and Google' second chunk of code. In your search.php template, we need to remove the loop, the pagination, and the if/else conditionals that handle the search results in WordPress, then put in Google's second chunk of code. If you are using the Default theme, for example, your code would resemble the following:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
/*
Template Name: Search
*/
get_header(); ?>

<div id="content" role="main">

   <h2>Search Results</h2>

   <div id="cse-search-results"></div>
   <script type="text/javascript">
     var googleSearchIframeName = "cse-search-results";
     var googleSearchFormName = "cse-search-box";
     var googleSearchFrameWidth = 710; // PUT YOUR DESIRED WIDTH HERE
     var googleSearchDomain = "www.google.com";
     var googleSearchPath = "/cse";
   </script>
   <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Finally, you need to create a top-level page in the Dashboard called "Search" with the slug "http://www.yourwebsite.com/search/" and assign the Search template to this page via its Page Attributes.

Once this is complete, when you search using your souped-up Google Custom Search box, you'll land on the new search template, and Google will load the results (almost instantaneously) in a paginated iframe!

As it stands, there are no filters in WordPress that allow you to dramatically alter the way the user profile fields (or user meta) are displayed when you visit your Profile in the Dashboard.* The existing profile fields are more or less hard-coded into the WordPress core, and so there's no easy way to add more fields without hacking the core.

Instead, we have to turn to several plugins to get the desired functionality.

First, we need to display a list of all registered users:

Members List will display a paginated list of registered users on a page in WordPress. It lets us sort the list by Last Name, First Name, Registration Date, and Email and search users by some of the default user meta fields. And when you click individual users, it will link to the Author template so we can handle individual user profiles on the front end.

So far so good.

Now, we want to let users upload their own photos for use throughout the site. But we also want gravatars to work if users have them, and additionally we want WordPress to generate a random avatar for users if they don't have a gravatar and they haven't uploaded a photo. (Uploaded avatars should take precedence over all others.)

User Photo is the only plugin that does the job.

Finally, we need to be able to add custom user meta without hacking the core, and have these new fields appear in the Dashboard so users can fill them out.

In PJW User Meta, Peter Westwood demonstrated how we could add extra fields to the Profile and process them in a sample plugin he wrote. We can use his code as a basis for writing theme-specific plugins that add sets of custom user meta without hacking the core.

Setbacks

While the good news is that all this stuff will work up to 2.8.4, we still need to hack the plugins to meet our requirements.

• Members List doesn't know that we're letting users upload their own photos, and so it can't show avatars conditionally like User Photo does. We'll have to give it the necessary code to behave like we want when it shows our list of registered users;
• User Photo has a bug that requires every uploaded photo to be approved by an admin, even if you turn that feature off. We'll have fix that. We also need to make it so that the function that echoes the conditionally selected avatar can optionally return the avatar for use in a variable, in order for it to play nicely with Members List;
• We need to write an Author template to display profiles for individual users.

With that, let's start by creating the Members List archive.

You can view the finished (albeit unstyled) product here:

http://dev.dquinn.net/guest/members/

Next up, Creating a Directory of Registered Users in WordPress »

* There are developments on the horizon as we approach WordPress 2.9 that may make this whole process easier, but for now, we'll have to rely on plugins and hiding fields with CSS as this series prescribes.

1. Download and install the plugin
2. Create a template in your theme called members.php. Put the following code in that template:

<?php
/**
 * @package WordPress
 * @subpackage Name_of_Your_Theme
 */
/* Template Name: Members */
get_header(); ?>

<div id="content" class="narrowcolumn" role="main">

<?php
$members = new tern_members;
$members->members(array('search'=>true,'pagination'=>true,'sort'=>true));
?>

</div>

<?php get_footer(); ?>

Finally, create a page in WordPress called "Members." Assign the "Members" template to that page and Publish.

Okay, great, now you should see your members list:

http://dev.dquinn.net/guest/members/

Of course, 2 problems remain:

• When you click on individual users, you go to the Author archive for that user, instead of an individual profile for the user.
• It's not yet integrated with the User Photo plugin.

Let's fix problem #1 first.

Next up, Creating an Author Template in WordPress »

1. author.php
2. archive.php
3. index.php

All we need to do is make an Author template:

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

    <?php
    if(isset($_GET['author_name'])) :
        $curauth = get_userdatabylogin($author_name);
    else :
        $curauth = get_userdata(intval($author));
    endif;
    ?>

    <h2>About: <?php echo $curauth->nickname; ?></h2>
    <dl>
        <dt>Website</dt>
        <dd><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></dd>
        <dt>Profile</dt>
        <dd><?php echo $curauth->user_description; ?></dd>
    </dl>

    <h2>Posts by <?php echo $curauth->nickname; ?>:</h2>

    <ul>

    <!-- The Loop -->

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <li>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
            <?php the_title(); ?></a>,
            <?php the_time('d M Y'); ?> in <?php the_category('&amp;');?>
        </li>

    <?php endwhile; else: ?>
        <p><?php _e('No posts by this author.'); ?></p>

    <?php endif; ?>

    <!-- End Loop -->

    </ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Pretty nifty, huh? It even has the kindness to display a loop of posts authored by the user. All this thing is doing is dumping the user's meta into $curauth, so that you can request individual profile fields by echoing
"$curauth->name_of_your_field;" this will come in handy later when we make our own custom meta.

Next up, Integrating User Photo with Members List »

We want the cascade of fallbacks to work with Members List and in our Author template. We also need to make the plugin automatically approve new user photos (because, most likely, you don't want to manually approve every user's photo, and the plugin's option to turn this off doesn't work). So go download and install User Photo, and check off both "Serve Avatar as Fallback" and "Override Avatar with User Photo" in its settings. Then add the following code to your functions.php template (thanks to this forum post):

// auto approval in user photo plugin
add_action( 'profile_update' , 'auto_approve_photo' , 1000 );
function auto_approve_photo() {
	global $current_user;
	if ( defined( 'IS_PROFILE_PAGE' ) ) {
		update_usermeta( $current_user->ID , 'userphoto_approvalstatus' , USERPHOTO_APPROVED );
	}
}

All right, perfect—now users can add photos without our intervention. Next, we need to be able to call the plugin's main function without echoing it, so that we can make it play nicely with Members List. We'll need to add an extra parameter to the function to do this. Crack open user-photo.php in the plugin's folder:

Find line 285:

function userphoto($user, $before = '', $after = '', $attributes = array(), $default_src = ''){

And add a new "echo" parameter:

function userphoto($user, $before = '', $after = '', $attributes = array(), $default_src = '', $echo=TRUE) {

Find line 298:

echo userphoto__get_userphoto($userid, USERPHOTO_FULL_SIZE, $before, $after, $attributes, $default_src);

Replace with this:

if ($echo == TRUE) {
     echo userphoto__get_userphoto($userid, USERPHOTO_FULL_SIZE, $before, $after, $attributes, $default_src);
} else {
     return userphoto__get_userphoto($userid, USERPHOTO_FULL_SIZE, $before, $after, $attributes, $default_src);
}

Last but not least, you might want to make some of the GUI stuff more user friendly. Between lines 358 and 376, you'll find the error messages that get displayed to the user for various failed actions. In my version, I also cleaned up the markup involved, and removed the "full size" photo from displaying (since users tend to upload enormous photos).

Next, we need to stop the plugin from emailing us every time a user uploads a photo. Strangely, the plugin will still email us even though the photo is automatically approved:

Find line 449 and comment it out:

//@wp_mail($admin->user_email, "User Photo for " . $userdata->display_name . " Needs Approval",        get_option("home") . "/wp-admin/user-edit.php?user_id=" . $userdata->ID . "#userphoto");

Great. Now all we need to do is fix the relevant portion of Members List so that it makes a call to User Photo.

Make Members List call User Photo

Open up "tern_wp_members.php" in the Members List plugin, and find line 799:

$s .= '<a class="tern_wp_member_gravatar" href="'.get_bloginfo('url').'/?author='.$u->ID.'">'."\n        ".get_avatar($u->ID,60)."\n    ".'</a>'."\n    ";

And replace with the following:

$s .= '<a class="tern_wp_member_gravatar" href="'.get_bloginfo('url').'/?author='.$u->ID.'">';
if(userphoto_exists($u->ID)) {
	$s .= userphoto($u, '','',array(),'',FALSE);
} else {
	$s .= get_avatar($u->ID, 64);
}
$s .= '</a>';

Awesome. We gained both the conditionality that User Photo provides and Members List's highly customizable archive. I tend to prevent plugins from spewing their own stylesheets and scripts into the headers of my themes, so feel free at this point to remove Member List's CSS and apply your own. Search for ".css" in tern_wp_members.php to remove its default stylesheet.

If you would like to use my User Photo and Members list install, you can simply download user-photo.php and tern_wp_members.php.

At this point, you can go back to your Author archive template and display the user's photo/gravatar/identicon. In the definition list, add the following code:

echo "<dt>Photo</dt>";
if(userphoto_exists($curauth->ID)) {
     echo "<dd>".userphoto($curauth)."</dd>";
} else {
     echo "<dd>".get_avatar($curauth->ID, 64)."</dd>";
}

Next up, Adding Custom User Meta Fields to the WordPress Profile »

So far, you've got a nice, browsable archive of your registered users thanks to Members List, with each user's profile being more or less infinitely customizable through the Author template. Plus users can upload their own photos. Naturally, the next step is to extend user profiles with our own custom user meta.

On (the very hacky) Rokkyuu.com, I used an ancient plugin called Register Plus to create new user meta, and had to hack the core to display the new Profile fields in the Dashboard. Hacking the WordPress core sucks, and Register Plus is more or less an abandoned plugin, with very unstable innards. Since we've come this far, we want something more reliable.

As I mentioned before, we're still waiting on WordPress 2.9 (or later) to provide us with the necessary filters to alter the core profile template in the Dashboard. In the meantime, we can create a plugin that will add new fields to the Profile. The plugin you create would be specific to your theme/project, but since it's a plugin, it wouldn't involve hacking the core. We start with a proof of concept from Peter Westwood with a few of my changes:

<?php
/*
Plugin Name: Custom User Meta
Plugin URI: http://blog.ftwr.co.uk/archives/2009/07/19/adding-extra-user-meta-fields
Description: Allows users to configure extra user meta values.
Author: Peter Westwood, Daniel Quinn
Version: 0.02
Author URI: http://www.dquinn.net

Add new custom user meta fields to the user's Profile in the WordPress Dashboard.

*/

class custom_user_meta {

function custom_user_meta() {
    if ( is_admin() ) {
        add_action('show_user_profile', array(&$this,'action_show_user_profile'));
        add_action('edit_user_profile', array(&$this,'action_show_user_profile'));
        add_action('personal_options_update', array(&$this,'action_process_option_update'));
        add_action('edit_user_profile_update', array(&$this,'action_process_option_update'));
    }
}

function action_show_user_profile($user) {
    ?>
    <h3><?php _e('Other Contact Info') ?></h3>

    <table class="form-table">
    <tr>
        <th><label for="extra1"><?php _e('Extra Value'); ?></label></th>
        <td><input type="text" name="extra1" id="extra1" value="<?php echo esc_attr(get_the_author_meta('extra1', $user->ID) ); ?>" /></td>
    </tr>
    </table>
    <?php
}

function action_process_option_update($user_id) {
    update_usermeta($user_id, 'extra1', ( isset($_POST['extra1']) ? $_POST['extra1'] : '' ) );
}

}

/* Initialise outselves */
add_action('plugins_loaded', create_function('','global $custom_user_meta_instance; $custom_user_meta_instance = new custom_user_meta();'));
?>

Save this as "my-custom-user-meta.php" in the plugins folder under /custom-usermeta/. Activate the plugin.

You should now see an extra area in the Profile called "Other Contact Info" with a single new custom user meta field: Extra Value. All users now have access to this new value. The best part is that you can call this value in your Author template as you would any other user meta. To add it to your definition list:

<dt>Extra Custom Value</dt>
<dd><?php echo $curauth->something; ?></dd>
<dt>Twitter</dt>
<dd><?php echo $curauth->twitter; ?></dd>
<dt>Textarea</dt>
<dd><?php echo $curauth->bio2; ?></dd>

You can add any fields you want, first by simply adding new table rows (or entire tables)...

<table class="form-table">
    <tr>
        <th><label for="extra1"><?php _e('Extra Value'); ?></label></th>
        <td><input type="text" name="extra1" id="extra1" value="<?php echo esc_attr(get_the_author_meta('extra1', $user_id) ); ?>" /></td>
    </tr>
    <tr>
        <th><label for="twitter"><?php _e('Twitter Username'); ?></label></th>
        <td><input type="text" name="twitter" id="twitter" value="<?php echo esc_attr(get_the_author_meta('twitter', $user_id) ); ?>" /></td>
    </tr>
    <tr>
        <th><label for="bio2"><?php _e('Bio2'); ?></label></th>
        <td><textarea name="bio2" cols="10" rows="10" id="bio2"><?php echo esc_attr(get_the_author_meta('bio2', $user_id) ); ?></textarea></td>
    </tr>
</table>

...and second, by processing them:

update_usermeta($user_id, 'extra1', ( isset($_POST['extra1']) ? $_POST['extra1'] : '' ) );
update_usermeta($user_id, 'twitter', ( isset($_POST['twitter']) ? $_POST['twitter'] : '' ) );
update_usermeta($user_id, 'bio2', ( isset($_POST['bio2']) ? $_POST['bio2'] : '' ) );

If you want to display each value only if the user has filled it out, you could do something like:

<?php if ($curauth->something) { ?>
    <dt>Extra Custom Value</dt>
    <dd><?php echo $curauth->something; ?></dd>
<?php } ?>
<?php if ($curauth->twitter) { ?>
    <dt>Twitter</dt>
    <dd><?php echo $curauth->twitter; ?></dd>
<?php } ?>
<?php if ($curauth->bio2) { ?>
    <dt>Textarea</dt>
    <dd><?php echo $curauth->bio2; ?></dd>
<?php } ?>

Simple stuff. And thanks for the snippet, Peter.

UPDATE: Some of you asked how you would handle radio buttons, dropdowns, and checkboxes. It's no different than you would normally do these types of input boxes in any PHP form. Remember that with checkboxes, the idea is that the user is choosing one or more items in your list (and the $_POST values from the checkboxes are added to a checkbox array), and with radio buttons, the user is choosing one of the available options. The latter is true of dropdowns too:

<tr>
     <th><label for="penguins"><?php _e('Favorite Penguin'); ?></label></th>
     <td>
          <select name="penguins" id="penguins">
               <option value="" <?php if (esc_attr(get_the_author_meta('penguins',$user->ID)) == "") { ?>selected<?php } ?>>- Choose a Penguin -</option>
               <option value="Happy Penguin" <?php if (esc_attr(get_the_author_meta('penguins',$user->ID)) == "Happy Penguin") { ?>selected<?php } ?>>Happy Penguin</option>
               <option value="Sad Penguin" <?php if (esc_attr(get_the_author_meta('penguins',$user->ID)) == "Sad Penguin") { ?>selected<?php } ?>>Sad Penguin</option>
               <option value="Ugly Penguin" <?php if (esc_attr(get_the_author_meta('penguins',$user->ID)) == "Ugly Penguin") { ?>selected<?php } ?>>Ugly Penguin</option>
          </select>
     </td>
</tr>
<tr>
    <th><?php _e('Potatoes I Like'); ?></th>
    <td>
        <?php
          $potato_array = get_the_author_meta('potatoes',$user->ID);
        ?>
        <ul>
          <li><input value="Hot Potato" id="hot_potato" name="potatoes[]" <?php if (is_array($potato_array)) { if (in_array("Hot Potato",$potato_array)) { ?>checked="checked"<?php } }?> type="checkbox" /> Hot Potato</li>
          <li><input value="Cold Potato" id="cold_potato" name="potatoes[]" <?php if (is_array($potato_array)) { if (in_array("Cold Potato",$potato_array)) { ?>checked="checked"<?php } } ?> type="checkbox" /> Cold Potato</li>
          <li><input value="Salty Potato" id="salty_potato" name="potatoes[]" <?php if (is_array($potato_array)) { if (in_array("Salty Potato",$potato_array)) { ?>checked="checked"<?php } } ?> type="checkbox" /> Salty Potato</li>
        </ul>
    </td>
</tr>
<tr>
    <th><?php _e('Monkeys'); ?></th>
    <td>
         <?php
           $monkeys = get_the_author_meta('monkeys',$user->ID);
         ?>
        <ul>
            <li><input value="Blue Monkey" id="blue_monkey" name="monkeys" <?php if ($monkeys == "Blue Monkey") { ?>checked="checked"<?php } ?> type="radio" /> Blue Monkey</li>
            <li><input value="Red Monkey" id="red_monkey" name="monkeys" <?php if ($monkeys == "Red Monkey") { ?>checked="checked"<?php } ?> type="radio" /> Red Monkey</li>
            <li><input value="Yellow Monkey" id="yellow_monkey" name="monkeys" <?php if ($monkeys == "Yellow Monkey") { ?>checked="checked"<?php } ?> type="radio" /> Yellow Monkey</li>
        </ul>
    </td>
</tr>

In the case of the dropdowns or the radio button, we are checking to see if the variable already exists, and if it does, we add "checked" for radio buttons to the appropriate button, or "selected" for options in a dropdown. In the case of the checkboxes, we need to add the "checked" attribute to any checkboxes that exist in the checkbox array. I've added these values to my dev area, so you can try it for yourself.

UPDATE: Apparently the variables you use need to be all lowercase. Rose (a commenter below) had a problem with fields in the profile not saving if the variables were camelCase. Can anyone else confirm? WP does recommend all-lowercase variables in its coding standards with underscores for spaces, but I didn't realize camelCase would simply not be saved in the db by WP? Server config? Dunno.

UPDATE: Check out Vlad's sweet implementation of this plugin: http://prospace.superfreelancer.com. Of course, for pre-2.9 extended user profiles, we should thank Peter Westwood for having originally written this script... I just made some modifications and answered a few questions

UPDATE: A commenter named Ruben below has shared how he figured out sorting the custom meta fields outside the profile. Check it out in Dutch: http://rubenwoudsma.nl/wordpress-gebruikersprofiel-uitbreiden/

UPDATE: Peter made an update to the plugin, replacing the call to global $user_id with $user->ID. This is reflected in the updated code.

WP Snap Demo

I first used WP Snap on Redivider, the literary journal for Emerson College. But for Fringe Magazine, I needed to organize contributor bios by last name. And at Harvard Common Press, I needed to do the same thing with author bios and the publisher’s title list. So the first thing I did was cordon off Nate’s original WP Snap function in the plugin, so that I could still sort posts as the plugin normally does:

On line 168, change:

$nav = new wp_snap_core();

To:

if ($snapqueryarray['ordertype'] == "names") {
    $nav = new wp_snap_core_names();
} else {
    $nav = new wp_snap_core();
}

This allows us to make two different calls to the plugin:

// and if we want to sort posts by last, middle, and then first name
<?php  if (function_exists('wp_snap')) { echo wp_snap('&ordertype=names); } ?>

// if we want to sort posts by the title normally:
<?php  if (function_exists('wp_snap')) { echo wp_snap(); } ?>

Now all we need to do is install the section wp_snap_core_names() function into the plugin. Search for “$all_posts = $wpdb->get_results($request);” and insert the following code on the line below it:

for ($i=0; $i < count($all_posts); $i++) {
    $name_set[$i] = preg_replace('/^(' . $exclude[1] . ')+((' . $exclude[2] . ')[\s]+)*|^(' . $exclude[2] . ')[\s]+/i', '', wp_snap_core::accents($all_posts[$i]->post_title));
}
for ($k=0; $k < count($name_set); $k++) {
    $word_parts = explode(" ", $name_set[$k]);
    $number_of_names = count($word_parts);
    $the_name = "";
for ($x=$number_of_names; $x>=0; $x--) {
    $the_name .= $word_parts[$x].' ';
}
unset($name_set[$k]);
$name_set[$k] = trim($the_name);
}

What we’re doing here is going through the array of post titles and reversing each word in the string, so that the order is last name, first name, and then middle name. This should work for any number of words in the post title.

Now search for this preg_replace, which is just below the above code:

$word_results[$i] = preg_replace('/^(' . $exclude[1] . ')+((' . $exclude[2] . ')[\s]+)*|^(' . $exclude[2] . ')[\s]+/i', '', wp_snap_core::accents($all_posts[$i]->post_title));

Replace this with:

$word_results[$i] = $name_set[$i];

Finally, search for “// Resorts $wp_snap_posttitles, taking excluded words into account” and add the following code just above that line:

for ($i=0; $i<count($all_posts); $i++) {
    $word_parts = explode(" ", $all_posts[$i]->post_title);
    $number_of_names = count($word_parts);
    $the_name = "";
for ($x=$number_of_names; $x>=0; $x--) {
    $the_name .= $word_parts[$x].' ';
}
unset($all_posts[$i]->post_title);
$all_posts[$i]->post_title = trim($the_name);
}

Okay, now the plugin is all set to display these posts sorted by last name first. When you call <?php if (function_exists('wp_snap')) { echo wp_snap('&ordertype=names); } ?> in your template (following <a>Nate’s regular instructions for using the plugin</a>), you’ll notice that when you click on a letter, you’ll only get posts where the last name begins with that letter:

C

Callaway William
Chau François
Cullen Peter
Cummings R. Brian

Great, this means the posts are actually being sorted by last name first. The only problem now is that because we altered the post titles in the loop, the names are being displayed last name first, which we don’t want. So we add a bit of code to our template to rearrange the post title back to the original order of the words in the string, so that they display first name first:

<?php  if (function_exists('wp_snap')) { echo wp_snap('cat=4'); } ?>
    <?php $wp_query->is_archive = true; ?>
    <?php while (have_posts()) : the_post(); ?>
        <?php $author_name = get_the_title(); ?>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
        <?php // we need to put the names back in the correct order
            $word_parts = explode(" ", get_the_title());
            $the_name = "";
            $number_of_names = count($word_parts);
            for ($x=$number_of_names; $x>=0; $x--) {
               $the_name .= $word_parts[$x].' ';
            }
            echo trim($the_name); ?>
         </a>

And that’s it. Now our names should display normally: William Callaway, François Chau, Peter Cullen, Brian R. Cummings.

For the sake of posterity (and laziness), you can download version 0.8.6 of WP Snap (the one I tweaked) as well as my modified plugin file below:

Original WP Snap Plugin, version 0.8.6: wp-snap.zip

Modified WP Snap Plugin: wp-snap-dquinn.zip

Enjoy.

Note: In order for this setup to work, you need to have PHP installed locally. If you webdev, this will be easy.

So this is what we're going to do: First, we'll write a quick local PHP script that parses the RSS feed of your blog, to get the latest blog post's URL and title. Then, we'll save that information to a .txt file, which you will set as your signature in Thunderbird. Finally, we'll write .vbs and .bat files that will open your script, update the .txt file, and then close themselves as your computer boots. All you need is a text editor to do this.

First, download this RSS parser and drop it in a folder in your webdev directory. Next, create a file in the same folder called signature-get.php, with the following code:

<?php
$doc = new DOMDocument();
$doc->load('http://www.dquinn.net/feed/');
$titles = array();
$permalink = array();
foreach ($doc->getElementsByTagName('item') as $node) {
    $titles[] = $node->getElementsByTagName('title')->item(0)->nodeValue;
    $permalink[] = $node->getElementsByTagName('link')->item(0)->nodeValue;
}
$titles[0] = str_replace("’","'",$titles[0]);
$titles[0] = str_replace("“",'"',$titles[0]);
$titles[0] = str_replace("”",'"',$titles[0]);
$signature .= $titles[0] . "\n";
$signature .= $permalink[0] . "\n\n";
$signature .= "read more @ http://www.dquinn.net"."\n";
$sigfile = "Signature.txt";
$fh = fopen($sigfile, 'w') or die("can't open file");
$sigtext = $signature;
fwrite($fh, $sigtext);
fclose($fh);
?>

Be sure to replace my URL and feed with your own. This was written for a WordPress feed, but with minimal tweaking it should work with any valid RSS. Next, make a blank signature file—mine is called "Signature.txt"—in the same folder. This is what the PHP script will write to. You must assign this file as your signature in Thunderbird, like so:

Thunderbird account settings

At this point, if you run the script from your local webserver, you should find that your Signature.txt gets updated with the latest blog post, like so:

District 9 is Good Science Fiction; Neill Blomkamp Raises the Bar

http://www.dquinn.net/district-9-neill-blomkamp-raises-the-bar/

read more @ http://www.dquinn.net

Now we need to run this guy whenever we start our comp, because we are lazy. We don't want a browser window to open up and stay open when we start up the computer (because that's annoying), so we'll command Internet Explorer to open the URL of our script in the background (I do love ordering IE around to do mundane, non-webpage-related tasks. Since the web is clearly not it's specialty...):

Create a .vbs file in the same folder, called "IE.vbs." (I scrubbed this code from a forum.) Put the following in it:

Option Explicit
Dim objIEA
Set objIEA = CreateObject("InternetExplorer.Application")
objIEA.Navigate "http://localhost/thunderbird/signature-get.php"
While objIEA.Busy
Wend
Set objIEA = Nothing

Okay, so far so good. Make sure that the path "http://localhost/thunderbird/signature-get.php" matches the path to your script on your local webserver. Next, let's run IE.vb in a batch file. Call this guy "update.bat" and save it in the same folder you've saved everything else:

@ECHO OFF
:1
echo >wait.vbs wscript.sleep 30000
cscript wait.vbs
del wait.vbs
cscript.exe IE.vbs
exit

The "exit" may or may not be necessary. Too lazy to double-check. What's happening here is that we create a .vbs script that waits for 30 seconds and then gets deleted after the wait, effectively delaying our setup long enough for your webserver to kick in, before our PHP script runs.

Finally, drag and drop a shortcut to update.bat into your Startup folder in the Start Menu, and you're good to go. At startup, the command window will stay open for a few seconds while the script runs, and then go away by itself.

Obviously, there are better ways to go about doing this, but this works great for me, so I thought I'd share.

First thing's first:

Download YSlow for Firebug if you haven't already, then skim over Yahoo!'s article about the thirteen best practices for speeding up your website:

1. Minimize HTTP Requests - (Don't make me download a lot of crap.)
2. Use a Content Delivery Network (Have someone else serve your shit.)
3. Add an Expires or Cache-Control Header (Stale bread is best for french toast. Really.)
4. GZip Components (Zip it up!)
5. Put Stylesheets at the Top (I need to see your site before I click on stuff, dumbass.)
6. Put Scripts at the Bottom (See above.)
7. Avoid CSS Expressions (Who uses them anyway?)
8. Make Javascript and CSS External (Duh.)
9. Reduce DNS Lookups (Don't be a social media slut.)
10. Minify Javascript and CSS (Nobody wants to see your whitespace.)
11. Avoid Redirects (I came to your site, not theirs.)
12. Remove Duplicate Scripts (Duh.)
13. Configure ETags (Yeah, I didn't know what these were either.)

I also recommend setting up WP Super Cache after all is said and done. So here we go:

• The Unavoidables: Don't Make Me Download a Lot of Crap; or, Sometimes You Just Deserve an F From YSlow, You Shameless Self-Promoter
• Three Sexy Performance Rules for .htaccess on WordPress: Configure ETags, Gzip Compression, and Expires Headers
• Nobody Wants to See Your Whitespace: Minify CSS and Javascript using Yahoo!’s UI Compressor

* Full disclosure: Where do I stand? My front page gets a big fat B (88%) for making you download a lot of crap:

YSlow Score: DQuinn.net Home Page

YSlow gleefully reports that 32 CSS background images is downright sinful.

I'm guilty of this one, I admit: I get a nasty F from YSlow for this trespass. On my front page (we shall not speak of the horror that goes on behind the scenes, once you leave my front page), I make you download 32 CSS background images in order to see all the graphics on my website. Is there a better way to go about doing this? Absolutely! Am I too damned lazy to redesign my graphics to appease Rule #1? You bet!

In all seriousness, however, Yahoo! recommends some (semi-doable) solutions. One idea is to combine all your CSS background images into one enormously fat image, and then use background-position to display portions of that image in different visual areas of the page.

Quite frankly, this is an insane suggestion for a site with any degree of design complexity, but it can be done. You just have to be crazy enough.

Another way is to merge your stylesheets into a single .css file. Same for your scripts (you can use a server-side language to combine them on the fly, for example). Really, you shouldn't need to apply multiple stylesheets to a small-scale blog (or even a medium-sized website). The argument is that, if you can get your reader to download and cache all your styles up front (minified and compressed), her browsing experience across your entire site will be breezier, since that single CSS file encompasses all your selectors. If she's a good girl she doesn't empty her cache often, and we tell her browser to do so on a weekly or monthly basis.

Closing recommendations:

• Use 1 stylesheet for the whole site. Minify and compress it.
• Merge as many of your javascripts into one file as you can, then minify and compress that file. Some of them can be tricky to merge, due to the way they need to load on a page (such as Shadowbox or prototype setups), but if you can turn 5 scripts calls into 2, it's better than doing nothing at all.

Rule #2: I am my own CDN, goddamn it!

Well, the truth is simply that if we weren't all talentless self-promoting hacks, we'd have the cash to shell out for our very own CDN (Content Delivery Network) and ace YSlow's number two performance rule: Use a Content Delivery Network. Too bad we subsist on Frosted Flakes and other people's half-baked marketing schemes. Rule #2 is an "unavoidable," yet another grim reminder that YSlow is just better than us, and there's nothing we can do about it.

Except cheat, of course. To "ace" rule #2, simply tell Firefox that your server is in fact a CDN, and YSlow will be none the wiser.

1. Type about:config into Firefox.
2. Type "cdn" into the Filter search field.
3. You'll see extensions.firebug.yslow.cdnHostnames pop up; double-click on the Value field and then add your domain "mydomain.com" to the list. If there's domains in the list, separate them with commas and put a space before each domain: dquinn.net, mydomain.com, lame.com; etc.

Refresh a lot, close Firefox, reboot your computer, take a shower, mow the lawn. Eventually YSlow will begrudgingly concede that your server counts as a CDN and give you much-deserved praise.

Rule #9: Don't be a social media slut: Reduce DNS Lookups

This one classifies among the unavoidables because, well, if you really want to integrate social media with your site, you're going to increase DNS lookups. Every lookup for a resource on a server that's not where your website is causes parallel downloading, which in turn slows everything down. On some pages, for example, I hook up with Google's Picasa, various investors' Netflix, and Viacom's Lastfm simultaneously to insert feed data into my pages (scandalous!).

My benefit is that these services help manage my activity so that I don't have to (yes, I realize that sounds very Orwellian), but the problem is that I'm passing my laziness off on your browser.

Conclusion: Some sacrifices must be made. Try to connect to social media on inner pages, rather than landing pages, so as to speed up load times and reduce your bounce rate.

To defeat rules #3: Add an Expires or Cache-Control Header, #4 GZip Components, and #13 Configure ETags, we need the following .htaccess swank (thanks to Matt Robertson for noticing that the rules I had here were not compressing CSS or JS):

# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE

# 1-WEEK EXPIRES HEADER
ExpiresActive On
ExpiresDefault A0
ExpiresDefault A604800
Header append Cache-Control "public"

# PUT YOUR WP SUPER CACHE RULES HERE

# KILL THEM ETAGS
FileETag none

# YOUR WORDPRESS PRETTY PERMALINK RULES GO HERE

GZip Compression

In the above, I use mod_deflate compression because I'm hosted on MediaTemple, which doesn't offer gzip compression. The rules turn on mod_deflate for my CSS and Javascript because I'm also using WP Super Cache, which handles compression for everything else. In tandem with WP Super Cache, everything on my site is gzipped, and therefore YSlow gives me an A for rule #4.

If you don't have the mod_deflate module on your shared space, you likely have mod_gzip enabled, so use that:

# IF YOU CAN'T USE MOD_DEFLATE...
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

This won't work on a variety of ancient browsers (pre-IE6, Opera 5, and Netscape, for example), but of course, who the hell cares.

Expires Headers

The idea here is that if you tell the browser the lifespan of your assets, the browser will keep them in its cache longer, which means your readers will be able to browse faster, from page to page, after they've downloaded your assets after the initial page load. Sounds a bit sketchy at first, but then I remembered that most people never CTRL+click Refresh or bother clearing their cache, so we can rely on their laziness.

My example above expires just about any kind of asset 1 week after it's downloaded, but keep in mind that you have a lot of options when it comes to assigning these lifespans. It really depends on how often you change your content on your end.

Assigning Dynamic Images Cache Control Headers in FLIR

After much Interweb soul-searching, I decided that FLIR, the Facelift Image Replacement Method, is the best image replacement method out there (for my purposes, at least). I used sIFR 3 for a long time to render fancy fonts on my site, but every day when I looked at myself in the mirror, I was ashamed, among other things, for having to resort to Flash for such a trivial task. I intend to write an article about image replacement methods and the reason why I ultimately decided upon FLIR, so more on this later, but the point of my bringing this up is that the Facelift Image Replacement WordPress Plugin (which forks off the real FLIR) generates dynamic images for fonts, but doesn't assign them cache-control headers.

Hours of Googling landed me on this page. Here the author provides a solution to the problem. He writes:

New user visits a brand new uncached image, it is generated. They refresh the page, another request is probably made and a 304 not modified is returned. You're right, this is unnecessary.

I think by adding a cache-control to the output_file function the images would then get cached by the browser without causing an extra call to verify that it hasn't been modified. This should stop a lot of unnecessary trips to the server.

The corresponding file in the Facelift plugin is inc-flir.php, located in the plugin's /facelift/ folder. Scroll down to line 395, and add the following:

/* add this line */
header('Cache-Control: max-age=1209600, public, must-revalidate');

/* before the following lines */
header('Last-Modified: '.gmdate('D, d M Y H:i:s GMT', $ts));
header('ETag: "'.md5($ts).'"');

Adjust the expiration time to your liking. Now YSlow won't complain that the dynamic images generated by FLIR have no cache-control headers.

ETags

Last but not least (well yes, maybe least), the mystical "entity tags." These little things creep me out like Leeuwenhoek's animalcules or FMA's homunculi. To paraphrase Yahoo, Etags are just doodads that servers and browsers use to check if the assets in the browser cache match up with original assets from the server. In the performance rules, Yahoo gripes about ETags because they don't quite do what they're supposed to do if your site pulls its assets from multiple servers. Of course, the vast majority of websites aren't doing this because the vast majority of website owners are cheapskates. Nevertheless, YSlow will give us a big fat F if we try to actually configure ETags "correctly." Since there's little space left in our brains to debate such nonsense, Yahoo instructs us to simply turn the little entities off. And frankly, my dear, I don't give a damn.

Now, would-be ultra-"l33t" programmers might enjoy using a command line, but I sure don't. It's a waste of the time Darwinian evolution spent on developing my eyeballs. Instead, swing on by to this cool guy's website, http://refresh-sf.com/yui/, where you can just copy paste your CSS or JS into a text field and get it minified/obfuscated without fiddling with Stone Age command prompts.

What happens when we have to make changes to our files after they've been minified/obfuscated? Since I don't use a fancy development environment to handle my files, I just minify/obfuscate the files that are up on the server and leave my local files alone. If I need to make a quick CSS change, I make them locally and just find/replace the same lines on the server. Janky? Yes. Not ideal? Sure. But it works.

* Keep one thing in mind when you minify/obfuscate: comments get stripped out entirely, and usually the software license or developer credit for freeware is contained in those comments. After some meditation on this matter, I decided that it's silly to keep the comments in after minification; that would be doing it half-assed and ultimately it defeats the purpose. As a compromise, we should have a page in our website that credits the creator of source code we borrow from the open source community. This provides even more visibility for our open source colleagues while allowing us to fully minify our files.

How do we get around this? Well, WP Super Cache creates static html files of our posts so that repeat visitors in a short time span don't force WordPress to engage the database in order to serve posts and pages. Donncha O Caoimh, the creator, describes the plugin's functionality best:

99% of your visitors will be served static html files. Those users who don't see the static files will still benefit because they will see regular WP-Cache cached files and your server won't be as busy as before. This plugin will help your server cope with a front page appearance on digg.com or other social networking site.

This is all fine and good, and works beautifully.* One small problem with WP Super Cache, however, is that if users update the information in their profiles, that information won't appear on the site until WP Cache gets cleared. Also, the second time you Preview a saved draft, you'll be seeing your last saved draft because it got cached.

So the caching drafts is a problem, but why should we care about the cached profile? Well, I ran into this problem on Rokkyuu Magazine, because users can change the color scheme of the site by setting an option in their profile. So even though they may have updated their profile, when they returned to the site, they were seeing a cached version (and their previously chosen color scheme). Moreover, at Rokkyuu, what users enter in their profile while logged in to the Dashboard appears in a members directory on the public site, which also gets cached.

To get around this, and with a bit of Donncha's help, I added the following to functions.php:

/********* WP-CACHE: CLEAR CACHE ON UPDATE PROFILE ***/
add_action('edit_user_profile_update',wp_cache_no_postid(0));

What this does is hook the wp_cache_no_postid(0); function, which clears WP Cache, to the function that gets called when a user updates her profile.

As for the Drafts...

To fix the drafts, we do a similar thing. I couldn't figure out how to hook into the functions that get called when you click "Preview" post or "Save Draft," but I did find a hook that does the job.

/********* WP-CACHE: CLEAR CACHE FOR DRAFTS ***/
add_action('simple_edit_form', wp_cache_no_postid(0));

Adding this to functions.php clears the cache whenever I click Preview post, thereby enabling me to see my latest edits with WP Super Cache enabled.

* Plugins that display up-to-the-minute information using PHP like WP-UserOnline, for example, won't necessarily "not work" as Donncha notes on the plugin page: they'll just be displaying information that's 3600 seconds old.

1. Ad Minister. The best tool for serving banner ads I've come across.
2. The Advanced Excerpt. WordPress' built-in excerpt function, the_excerpt() leaves a lot to be desired because it strips out HTML by default.
3. Advanced Category Excluder. Sometimes I just don't want to go through all the trouble of making sure a particular category doesn't show up in search results or the feed. This little plugin is great because it does all the work for you.
4. All in One SEO Pack. Can't live without this one. SEO-friendly page titles + automatically using post and page excerpts as meta descriptions + automatically using tags as meta keywords = better visibility on Google. It's one of the reasons why my website is on the first page of results in Google if you search for "Boston freelance web designer."
5. Disable WordPress Core Update. Now now, before you chastise me: I recommend disabling WordPress' Core Update nag only if you're diligent about updating yourself. As I said before, one of the difficulties with WordPress is that if your plugins get out of sync with your version of WordPress, this means trouble for the stability of your installation. I check WordPress.org regularly, and prefer to do an update and compatibility check for my plugins all at once, so the nag only ends up annoying me.
6. Disable WordPress Plugin Update. Same here. I often have to modify plugins to suit my needs, so this one's an eyesore.
7. Email Users. A great tool to send out a quick message to all registered users.
8. GD Star Rating. The slickest of the "star ratings" plugins I've seen, since it comes with sweet icon themes and scores via Ajax.
9. Google Sitemap Generator. A must-have for SEO purposes. The plugin generates a fully customizable XML sitemap of all your content so spiders can crawl you more easily.
10. Lifestream. A lovely way to vomit all your social media activity in one place.
11. New Tag Cloud. A classic. This plugin gives just a bit more granular control over the tag cloud than the default one allows.
12. NextGen Gallery. I personally find the Dashboard for NextGen Gallery unintuitive, but as far as galleries hosted on-site go, it's the best option available. I've hacked NextGen to suit my purposes at Rokkyuu Magazine, but out-of-box the plugin combines many of the features that I find lacking in its competition. *updated 8/22/09* As of 2.7, just use WordPress' built in gallery shortcodes. You can upload a whole set of images and "Insert as Gallery," then with a bit of filtering, remove the default CSS for the gallery and use Shadowbox to display the full image as a lightbox. This way thumbnails get automatically created, and if you dump galleries into their own category of posts, you can handle a gallery as you would any other post.
13. Page Excerpt. Why this was removed from WordPress still baffles me (among others)—in conjunction with All in One SEO Pack, Page Excerpt allows you to provide better meta descriptions for your pages, as well as prettier excerpts in search results and archives.
14. PS Auto Sitemap. A fancy, automagically generated sitemap with fancy icons.
15. Redirection. This one's indispensable. I'm no good at writing rules for mod_rewrite in my .htaccess, so this plugin is a lifesaver. If you use Google's Webmaster Tools in conjunction with this plugin, you can have a pretty cleanly running site with no loose ends, as far as 404s and errors in your sitemap are concerned. Would be perfect if it weren't for the fact that its log files, which can't be turned off, eventually get enormous and bloat your MySQL database.
16. Subscribe2. The Dashboard is very clunky, but as a site-wide subscription manager, Subscribe2 does the job.
17. Register Plus. After extensive experimentation with the plugins out there that extend the functionality of the user profile in WordPress, Register Plus appears to be the key to making it work without resorting to writing your own plugins. I'll be writing an article about extending the user profile (a la Rokkyuu Magazine) to include custom fields arranged in a preferred order and user-selected color themes. Great when combined with the User Photo plugin. (Albeit, other than for this purpose, Register Plus is somewhat useless; half of its functionality expired with WordPress 2.6.).*updated 8/22/09* There are a few plugins out there that may make this whole setup even more interesting, such as logging in and editing your profile from the front end. More to come. Read my new series Extending User Profiles in WordPress for more on this. (added *8/29/2009*)
18. Search and Replace. Useful if you need to migrate your WordPress installation from a local environment, to a testing server, and then to its final live host. Simply search and replace http://localhost/a-temporary-path/ with the final domain path and you're done.
19. Subscribe to Comments. A really great way to enable users to follow your comment thread without subscribing to its feed.
20. Codesnippet. An easier method to displaying markup or code in posts, although you'll need to hack the plugin to make it standards-compliant. Normally the plugin generates a <pre> with two <div>'s inside of that, which in turn get squashed inside of <p> tags; I replaced these <div>s with <spans> and then styled the <span>s to be display: block. Of course, then you still have to deal with the fact that WordPress will invariably mangle your inline code if you switch to the Visual Editor. *updated 8/22/09* An even better option is Syntax Highlighter Evolved by ViperBond.
21. Sitemap Generator. If you're looking for a plugin that generates a simple, unordered list of all your posts, pages, etc in a hierarchical fashion, this is it. All you do is create a page template for it and plop it in.
22. Member Access. The best way to make your WordPress members-only.
23. User Photo. A wonderful enhancement for the user profile. If you don't want to approve each user when he/she changes her photo, though, you'll need to cripple the plugin to remove this functionality, and then also rip out the chunk of code that sends you an email (even after you've disabled the moderation feature). More on this later.
24. Viper's Video Quickags. Simply the best way to insert YouTube videos.
25. WP-Ban. Easy as pie. You can ban by IP, referrer, or host name, and display a custom page to blocked users.
26. WP-Commentnavi. Lester "Gamerz" Chan is one of the great plugin masters. I've had to alter his plugin's markup a bit to suit my purposes (which I'll be sure to share), but otherwise his plugins are almost prescient when it comes to much-needed WordPress functionality.
27. WP-DB-Backup. Nothing beats having your WordPress database delivered to you by email once a week.
28. WP-Pagenavi. Another of Lester's, which I use in almost every project.
29. WP-Polls. A nice, ajax-powered polling system (also Lester's). I'll discuss the related tw-sack.js problem later, but otherwise a solid piece of code.
30. WP-UserOnline. Displays a list of spiders and users (anonymous as well as logged in) who are currently browsing your site (as well as what page[s] they're viewing).
31. Posts Plugin Library. And finally, one of the sweetest plugins out there: bypass dealing with multiple loops in a template by making single-line calls to the Posts Plugin Library, which grabs exactly the posts you need. And the great news is, there's a whole suite of options:
    • Similar Posts
    • Random Posts Plugin
    • Popular Posts Plugin
    • Recent Comments Plugin

That's all, folks! Should I come across some other sweet plugins, or if you recommend them, I'll add them here. Stay tuned.

Addendum

So here are a number of plugins I forgot:

1. Last.fm RPS. *added 8/22/09* After trying out numerous Last.fm plugins, this is without a doubt the best out there. Allows you to display information from your latest tracks/albums on Last.fm. Used in conjunction with Last.fm's Scrobbler for iTunes/Windows Media Player.
2. Role Manager. *added 8/22/09* Sometimes you need more granular control over what users can do in the back-end of WordPress, and that's where Role Manager comes in. What's great is that when used in conjunction with Flutter, you can restrict access to Custom Write Panels you create on a user level basis.
3. Search Unleashed. *added 8/22/09* Use this plugin to beef up the relevancy of the WordPress search function. Since Search Reloaded went commercial, this is the only plugin left that will allow you to search by relevancy reliably.
4. Search Excerpt. *added 8/22/09* To further beef up WordPress' search function, why not use Yoast's quick Search Excerpt plugin to return excerpts on the search results page that highlight only the relevant portion of the post that the user requested.
5. WP Snap.*added 8/22/09* I use this plugin when I need to display posts in an alphabetical index. Great for glossaries, indexes, and encyclopedias. Also check out my post about sorting by last name when using this plugin.
6. Picasa Images Express. *added 8/22/09* The alternative to storing all your photo albums on your web server is hosting them off-site, at Picasa or Flickr. Most people prefer Flickr because of its enormous community and sweet photo management features, but I use Picasa because it allows me to create unlimited albums of my photos and the feed for each album is unlimited, as opposed to limited to 200 photos (for free). So if Picasa is the way to go for you, this plugin will integrate with TinyMCE and provide its own upload management library like the Media Library. Then with one click, you can dump linked thumbnails to all your Picasa photos (an album at a time, or photo at a time, whichever you prefer) into your posts.
7. Netflix plugin for WordPress. *added 8/22/09* While I'm using the original Netflix plugin by Albert Banks, Eric VanBergen made a reimplementation of the plugin with new features. The plugin can display your various Netflix feeds, such as images of the movies in your queue (see my footer throughout the site).
8. Facelift Image Replacement plugin, or FLIR, (*added 8/22/09*) is an image-replacement technique I use on my site to display headings in a specific font that end-users won't have on their computer. This is an alternative to the popular Flash-based image-replacement technique, sIFR. It's a bit complicated to use, in that your stylesheet needs to match up with the settings in FLIR, but it works great (and now actually functions on a local installation too!).
9. Excerpt Editor.*added 8/22/09* A very simple tool that will call up the excerpts of all posts and pages on your site, allowing you to check whether or not you made excerpts for these posts. This is especially useful if you use your excerpt as a meta description through the All in One SEO Pack plugin.
10. WP Super Cache. Can't believe I left this one off the list! WP Super Cache turns dynamic WordPress pages into static html files, without using PHP resources to serve the files. That way WordPress (hopefully) won't implode when you're squashed by the "Digg Effect." Setup can be tricky when applying the .htaccess rules, but the plugin is otherwise very friendly.
11. WP CMS Post Control. *added 8/22/09* If you need to hide certain portions of the Dashboard for whatever reason, this is the easiest way to do it, short of attaching your own stylesheet and using display: none.
12. Flutter. *added 8/22/09* There's a lot to be said about this amazing plugin, which is slowly being transformed into "Breeze" by Freshout. While it requires a lot of hacks to use in production, I still use a modified version of it in most of my client projects. Flutter "styles" the GUI of custom fields, so that if you're making a WP site for clients, they won't have to deal with WordPress's custom field variable/value pairs. We definitely need to keep an eye on new developments on Flutter's end, as it has the potential to transform WP into a real CMS.

While I'm not going to show you how to build the Google Maps application in WordPress just yet, I am going to provide you with the fruits of my hard-earned labor: a complete list of all the geocoordinates for the 50 states and each Japanese prefecture.

My girlfriend and I sat for a couple hours and determine the best zoom level for each state/prefecture (that's the number in curly braces) after determining the optimal geocoordinates using this wonderful location to geocoordinate tool from LivePhysics.com.

Geocoordinates for the 50 United States

Alabama (AL) : 32.614471, -86.680740 {8}
Alaska (AK) : 62.890301, -149.054077 {4}
Arizona (AZ) : 34.168091, -111.930344 {5}
Arkansas (AR) : 34.751888, -92.131348 {7}
California (CA) : 37.271832, -199.270203 {5}
Colorado (CO) : 38.997841, -105.550911 {6}
Connecticut (CT) : 41.515572, -72.757477 {8}
Delaware (DE) : 39.145199, -75.418610 {7}
Florida (FL) : 27.9756639, -81.541183 {6}
Georgia (GA) : 32.678131, -83.222931 {7}
Hawaii (HI) : 19.589640, -155.434036 {6}
Idaho (ID) : 45.494419, -114.1432219 {5}
Illinois (IL) : 39.739281, -89.504128 {6}
Indiana (IN) : 39.766201, -86.441254 {6}
Iowa (IA) : 41.938221, -93.389900 {6}
Kansas (KS) : 38.49058, -98.320213 {6}
Kentucky (KY) : 37.822399, -85.691101 {7}
Louisiana (LA) : 30.972260, -91.521797 {7}
Maine (ME) : 45.262379, -69.008301 {6}
Maryland (MD) : 38.823399, -75.923759 {8}
Massachusetts (MA) : 42.163891. -71.717941 {8}
Michigan (MI) : 43.742691, -84.621620 {6}
Minnesota (MN) : 46.441929, -93.365471 {6}
Mississippi (MS) : 32.585159, -89.876381
Missouri (MO) : 38.304611, -92.436653 {6}
Montana (MT) : 46.679440, -110.044472 {5}
Nebraska (NE) : 41.500839, -99.680771 {6}
Nevada (NV) : 38.502460, -117.022720 {6}
New Hampshire (NH) : 44.001301, -71.632828 {7}
New Jersey (NJ) : 40.142780, -74.726723 {7}
New Mexico (NM) : 34.166161, -106.026123 {6}
New York (NY) : 40.714550, -74.007124 {8}
North Carolina (NC) : 35.219410, -80.018333 {7}
North Dakota (ND) : 47.467731, -100.301712 {6}
Ohio (OH) : 40.190269, -82.669403 {6}
Oklahoma (OK) : 35.308960, -98.716942 {6}
Oregon (OR) : 44.114552, -120.514908 {5}
Pennsylvania (PA) : 40.994640, -77.604507 {7}
Rhode Island (RI) : 41.661171, -71.555771 {9}
South Carolina (SC) : 33.624981, -80.947441 {7}
South Dakota (SD) : 44.212391, -100.247101 {6}
Tennessee (TN) : 35.830620, -85.978554 {7}
Texas (TX) : 31.168989, -100.076790 {5}
Utah (UT) : 39.499611, -111.547050 {6}
Vermont (VT) : 43.871769, -72.451218 {7}
Virginia (VA) : 38.003349, -79.771446 {7}
Washington (WA) : 38.890370, -77.031959 {6}
Washington, DC (DC) : 38.890370, -77.031959 {11}
West Virginia (WV) : 38.920101, -80.181808 {7}
Wisconsin (WI) : 44.727242, -90.101562 {6}
Wyoming (WY) : 43.000320, -107.554626 {6}

Geocoordinates for All Prefectures of Japan

- North -
Hokkaido : 43.460388, 142.791718 {7}
Aomori : 40.822118, 141.273544 {8}
Iwate : 39.598911, 141.362823 {9}
Akita : 39.692009, 140.344177 {9}
Miyagi : 38.387989, 140.975266 {9}
Yamagata : 38.433571, 140.092804 {9}
Fukushima : 37.383968, 140.104156 {9}

- Central -
Ibaraki : 36.342159, 140.269928 {9}
Tochigi : 36.677341, 139.809494 {9}
Gunma : 36.521950, 139.033539 {9}
Chiba : 35.501732, 140.311783 {9}
Saitama : 36.018481, 139.305725 {9}
Tokyo : 35.699791, 139.430954 {10}
Kanagawa : 35.404469, 139.357513 {9}
Niigata : 37.645111, 138.767456 {9}
Toyama : 36.627071, 137.265945 {9}
Ishikawa : 36.800350, 136.802399 {9}
Nagano : 36.11410, 138.031982 {9}
Gifu : 35.799351, 136.964691 {9}
Fukui : 35.819550, 136.140884 {9}
Yamanashi : 35.570011, 138.657257 {9}
Shizuoka : 35.120281, 138.311462 {9}

- West -
Aichi : 35.001369, 137.254517 {9}
Shiga : 35.247169, 136.109406 {9}
Kyoto : 35.242569, 135.454666 {9}
Hyogo : 35.149441, 134.860657 {9}
Mie : 34.490238, 136.390717 {10}
Nara : 34.657829, 135.892136 {11}
Osaka : 34.661579, 135.419846 {9}
Wakayama : 33.908810, 135.533966 {9}
Tottori : 35.336170, 133.825729 {9}
Shimane : 34.953468, 132.497421 {9}
Okayama : 34.891079, 133.839996 {9}
Hiroshima : 34.649590, 132.746521 {9}
Yamaguchi : 34.256390, 131.555557 {9}

- South -
Kagawa : 34.206249, 133.998749 {9}
Tokushima : 33.892609, 134.205490 {9}
Ehime : 33.520290, 132.852783 {9}
Kochi : 33.302269, 134.149185 {9}
Fukuoka : 33.484959, 130.615128 {9}
Saga : 33.253571, 130.150696 {9}
Nagasaki : 32.984489, 129.967224 {9}
Oita : 33.214211, 131.455093 {9}
Kumamoto : 32.645000, 130.844879 {9}
Miyazaki : 32.099789, 131.294632 {9}
Kagoshima : 31.590900, 130.656036 {9}
Okinawa : 26.474991, 127.982109 {9}

Okay, so this one wasn't exactly a WordPress tutorial, but for anyone working with Google Maps and WordPress, you'll thank me later.