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!

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.