You are here: Home » hRecipe – WordPress editor support for recipe microformat

hRecipe – WordPress editor support for recipe microformat

by David M. Doolin, PhD · 113 comments

All of the big recipe sites are using recipe microformatting to drive search results. If you aren’t using it, in the long run, you’re toast.

>>>UPDATED 3/4/2011: This page is seriously out of date, yet continues to get a lot of traffic. 2 things:

  1. http://hrecipe.com/ is the main site now. Please sign up for the newsletter over there. (Or sign up below, it’s the same newsletter.)
  2. If you have a question, post a comment somewhere. I get notification via email, and will respond within a day or two.

>>>UPDATED: 10/7/09: Upgraded local development tool chain, looking forward to doing more work on hRecipe.

>>>UPDATED: 8/31/09: Off to Burning Man for a week. hRecipe work will resume when I return.

>>>UPDATED: 8/22/09: Ingredients list formatting screenshot with instructions written.

>>>UPDATED: 8/21/09: Recipe Theming programming design work is underway. Feel free to modify hrecipe.css to your personal taste, just remember to save it somewhere outside the plugin directory when you upgrade hRecipe.

>>>UPDATED: 8/1/09: Version 0.4.2.2 released.

>>>UPDATED: 7/31/09:

  1. Default enclosure is now a <div> element rather than a <fieldset> element. User option for choosing is implemented. Text for “Instructions” is now a user option.
  2. Anu Kumar of the The Spicy Yatra sent some options coding for Vietnamese and Marathi cuisine.
  3. Cleanup on the hRecipe options page. Split structure and styling into different sections.
  4. Started adding help text toggles on admin page.

>>>UPDATED: 7/30/09: TRACKBACKS: The latest version of hrecipe has a trackback that’s enabled by default. This has been incredibly useful for me to check out problems people may be having when using hRecipe. You will also get a link back to your recipe when it’s enabled. Once you have a few links back, go ahead and disable the trackback.

>>>UPDATED: 7/29/09: Greetings! hRecipe is getting a LOT of traffic last few days. I’ve been taking a break to recuperate… I’m definitely overdue for spending some quality (and quantity) time here. Thanks to everyone whose been testing. Even if you don’t use it, I do follow the trackbacks to see what you’ve got, and that information is useful to me for further development.

>>>UPDATED: 7/21/09: Finishing up the WordPress 101 over on Website In A Weekend. A few more days… 9 more articles (about 10,000 words!).

>>>UPDATED: 7/9/09: Started work on custom page template for hRecipe and other plugins. Thinking about what to do next… changing from fieldset to div is highly likely. div tags are more flexible.

>>>UPDATED: 7/1/09: Russian translation courtesy of Fat Cow web hosting.

>>>UPDATED: 6/29/09: Extensive rewiring in the back end. Class structure built and hooked up. Will be tedious and nit-picky. Follow in hrecipe/branches/hrecipe-class. Known svn file commit issue bit release 0.4.2.0, use 0.4.2.1

>>>UPDATED: 6/21/09: Changing roadmap, backend rewrites for plugin class structure are going into Version 0.5. CSS moves to Version 0.6. Danish translation committed.

>>>UPDATED: 6/20/09: Version 0.4.1 released. Danish translation coming from Kristian Petersen.

>>>UPDATED: 6/19/09: Jean-Philippe Daigle sent in the French translation late last night. Look for it in the repository shortly. I have requests out for Greek and Persian (you know who you are!), haven’t heard back yet. Spanish anyone?

>>>UPDATED: 6/17/09: Carsten Peters used the new hrecipe.pot file to create full German and Brazilian Portuguese translations. Expect to see these show up in 4.1 or 4.2, tentatively the last week of June.

>>>UPDATED: 6/15/09:

  • hRecipe needs a Spanish translator! I’ll have the .po file posted shortly. Even a partial translation would be very helpful.
  • This translation business is an ongoing process. It’s going to take a few iterations to get the process figured out.
  • Here’s the current version of the hrecipe.pot file. It’s reasonably complete, I don’t anticipate big changes before a total front end rewrite.
  • Thanks to Carsten Peters for Brazilian Portuguese and German translations, both of which are now underway.

>>>NEW! Here’s a link to the hRecipe development RSS feed. Right click and “Copy Link.” Paste the link into your favorite RSS reader. I use Google Reader. Clicking on an item in the feed will show you the svn commit message. Clicking on the title item will take you directly to a Trac web page for that revision. You can follow along in almost real time! It’s great to see the changes to the code! Open source is great!


Designers: Would you like to help?

The layout of the editor plugin has become unwieldy. It’s too big. You have scroll down to fill all the fields. I’d like to change that. If you’re a whiz at UI design and layout, I would be delighted to implement your suggestion for improving the editor plugin. It would be even cooler if you knew how to handle the HTML/CSS, but that’s not strictly necessary. Show me a good design on a napkin, I’ll code it.

Since the current layout of the editor plugin is starting to annoy me considerably, I’m inclined to improve it before tackling the database work.

hRecipe Plugin for WordPress


The hRecipe Plugin for WordPress provides a popup window from the post and page editor with text fields and text areas that allow the author to conveniently enter the various parts of the hRecipe microformat, then inserts the formatted recipe into the page or post. The formatting has the hRecipe class specifications.

Roadmap

Note: This section has been moved to the hRecipe Feature Request page at Website In A Weekend.

Note: dates and features for future work are speculative, and will be implemented on a time-available basis.

  • Version 0.9 [target 10/15/2009] Recipe sharing by email. Video URLs? More?
  • Version 0.8 [target 9/15/2009] Import/export capability. Recipe printing.
  • Version 0.7 [target 8/15/2009] Recipe relational database storage.
  • Version 0.6 [target 7/15/2009] User-specified CSS in hRecipe Administration pages. Pre-selectable format themes. Embedded images.
  • Version 0.5 [target 6/28/2009] Implement internationalization, goal is having 12 different languages. Backend rewrite into PHP class and bug fixing. Moved from 0.4:
    1. Published

ChangeLog

>>>NOTE: The hRecipe ChangeLog has been moved to hRecipe ChangeLog | Website In A Weekend.

  • Version 0.4.2.2 [7/31/2009]
    1. Default enclosure is now a <div> element rather than a <fieldset> element. User option for choosing is implemented. Text for “Instructions” is now a user option.
    2. Anu Kumar of the The Spicy Yatra sent some options coding for Vietnamese and Marathi cuisine.
    3. Cleanup on the hRecipe options page. Split structure and styling into different sections.
    4. Started adding help text toggles on admin page.
    5. Russian translation courtesy of Fat Cow web hosting
  • Version 0.4.2.0 [6/29/2009]
    1. Moved options html to hrecipe_otions.php to clean up base file.
    2. Moved Javascript formatting code to it’s own file.
    3. Added activation/deactivation hooks, moved initialization calls.
    4. Implemented hrecipe php class.
    5. Added author byline field
  • Version 0.4.1.1 [6/21/2009] Changelog in readme.txt now follows new procedure.
  • Version 0.4.1.0 [6/20/2009] Internationalization started. Brazilian Portuguese, French and German translations are now available. Danish pending. Try it out, let me know.
  • Version 0.4 [6/11/2009]
    1. Added Copyright option.
    2. Added Link Love option.
    3. Finished parameter passing clean up.
  • Version 0.3.4 [6/8/2009]
    1. Added Yield.
    2. Started parameter passing clean up.
  • Version 0.3.3 [5/19/2009]
    1. Fixed CSS issue.
    2. Added cooking time.
  • Version 0.3.2 [5/11/2009]
    1. More diet information (low carb, high protein, etc.) added.
    2. Admin page footer link removed. Too obnoxious.
  • Version 0.3.1 [5/4/2009]
    1. Ingredients list can be formatted by numbers or bullets, set by the user on the administration options page.
    2. Type of diet (vegetarian, vegan, etc.) added.
    3. Admin page footer link added.
  • Version 0.3 [04/27/2009]:
    1. Background color can now be specified on the options page. I’m willing to add as many user-specified css formatting options as anyone wants, just let me know.
    2. Meal types such as breakfast, lunch, dinner, etc. can now be specified.
  • Version 0.2 [03/30/2009]:
    1. Outer block element changed to fieldset
    2. Fixed recipe label in popup
    3. Added “Culinary Tradition”
  • Version 0.1 [03/25/3009]: Basic port from Andrew Scott’s hReview. Added necessary fields, tweaked the css to match. As few changes as possible for this first version.

Download hRecipe

hRecipe plugin been accepted into the WordPress.org plugin directory. You can also download it using the following link:
Download hRecipe v0.4.2.0

Installing and using hRecipe

Installation is simple and works just like all other plugins:

  1. Download the zip file and extract the plugin directory.
  2. Upload the plugin directory to your WordPress site, typically into /wp-content/plugins
  3. Use the editor buttons to call a popup window, and fill in the text fields and text areas.
  4. The text areas (Ingredients, Instructions) should accept HTML formatting.
  5. NOTE: List building with “*” is supported! Just use a single “*” for delimiter between each ingredient and each instruction, and the plugin will build a numbered list.

Example recipe: Garlic Ancho Soup

 
This recipe is displayed exactly as v0.3.1 of the hRecipe editor plugin inserted it into the post, with no other formatting or class specification.

Recipe: Garlic Ancho soup

Summary: A great and fairly easy soup to make.

Ingredients

  • 4-5 ancho chiles. The original recipe calls for 3 large dried pasilla chiles, which I couldn’t find. The ancho chiles I used are sold as Pasillas under the Milpas brand name.
  • 1 quart hot water
  • 3 tablespoons olive oil
  • 1 medium onion, coarsely chopped
  • 1 head garlic, cloves peeled and coarsely chopped
  • 1 large tomato, cut into 1-inch dice (I used a Roma, it was the only ripe tomato I could find for a reasonable price.
  • 1/2 teaspoon dried oregano, preferably Mexican
  • Salt
  • Herb croutons. The original recipe calls for 1 cup 1/2-inch dice of country bread or baguette, but that’s going a little over board in my opinion, unless you happen to have a stale baguette laying around.
  • 1/4 cup of fresh cotija cheese. The original recipe calls for 1/4 cup crème fraîche or sour cream. That would have been fine, except I had the cotija, and didn’t have either of the other.
  • 1 Hass avocado, cut into 1/2-inch dice
  • 1/4 cup cilantro leaves
  • 2 tablespoons blackstrap molasses. The original recipe does not call for molasses, but I find that a small amount of blackstrap provides a lot of depth without much sweetness. In this case, the molasses cut the slightly bitter aftertaste of the chiles without ruining the chile flavor.

Instructions

  1. In a large bowl, cover the chiles with the hot water; set a small plate over the chiles to keep them submerged. Let soak until softened, about 20 minutes. Make sure all the chiles are completely submerged. Stem, seed and coarsely chop the chiles. Strain the seeds from the soaking liquid and save it for simmering the soup.
  2. If you’re making your own croutons, preheat the oven to 400°.
  3. Onions and Garlic: In a large saucepan, heat 2 tablespoons of the oil. Add the onion and garlic and cook over moderate heat until softened, about 5 minutes. Add the chopped chiles and cook, stirring, for 1 minute. Add the tomato, oregano, a pinch of salt and the strained chile soaking liquid and bring to a boil. Cover the soup and simmer gently over low heat for 20 minutes.
  4. If you do have a stale baguette, make your own croutons. In a cake pan, toss the diced baguette with the remaining 1 tablespoon of olive oil and spread in an even layer. Bake until golden brown, about 8 minutes.
  5. Puree the soup in a blender, batching if your blender isn’t big enough or burly enough. Return the soup to the saucepan, bring to a simmer and season with salt. Ladle the soup into bowls. I like to run very hot water over the bowls to warm them up first.
  6. Top with crumbled cotija cheese (or crème fraîche, sour cream), avocado, cilantro leaves and croutons and serve.

Meal type: dinner

CulinaryTradition: USA (Southwestern)

My rating:4.0 Stars
****

Screenshots

Here’s what the editor support looks like for v0.1 (v0.2 is very similar):

Screenshot of v0.1 of editor support.

Screenshot of v0.1 of editor support.

NOTE: Click on the image to see how to use “*” as a delimiter for listing out ingredients.

More wanted features

There’s lots to do! Specifically, I’m interested in adding the following:

  • [Fieldsets are now the default option for display.] Better formatting: Recipes should be laid out in an attractive manner, inviting and easy to read. Here’s a cardamom recipe laid out using fieldsets.
  • Photos: People like to see what food looks like!
  • Wine pairing: The hRecipe microformat doesn’t have a field for wine pairings, but for many people wine is an essential—integral—part of a meal. Again, not part of the hRecipe specification, so it wine pairing can be ignored by hRecipe processing tools.
  • Diet type: Vegetarian, Vegan, Pescetarian, Macrobiotic, etc. can be listed in a check box. Qualifiers could be added: Kosher, Halal, Buddhist, Raw, etc.
  • Label preferences (Suggested by Alex): The microformat specifies the necessary classes, but labels for the blog post could be arbitrary and set by the user. This isn’t that hard to do, but it could lead to an “option explosion” when a better idea might be to implement internationalization.
  • Custom fields (Suggested by Alex): possibly very useful, but could be tricky to implement in a secure way. Examples of WordPress plugins that implement custom fields would be very helpful.
  • Prettyprinting the raw output from the editor plugin in HTML mode would be much nicer than the the single block of elements it currently produces. There are some subtlities here on passing newlines, just using “n” in the PHP output strings doesn’t work.
  • Processing markdown to allow the user more control over appearance of final output. Here some links on markdown formatting:
  • (Suggested by Sourena) Formal language translation files, i.e., i8n. Good idea, and a project for the summer.
  • Importing and exporting recipes is something on the longer term schedule, and I’ve been thinking about off and on since starting out. Exporting is much easier, and having a definite target for export would be even better. Import is considerably more difficult, unless the import is restricted to hRecipe plugin epxort. (Also suggested by Sourena). Here’s five reasons why this would be nice:
    1. It’s easier to change or fix recipes once the db interface page is written
    2. Easier to export just recipes
    3. Easier to do queries on recipes (List out all vegan recipes)
    4. Once in the database, the recipe could be used on multiple post/pages, or could be used as a randomly selected insertable block on a page.
    5. Wider variety of export formats code, the microformat would be just the first “export” format.

    The disadvantages are mainly due to implementation:

    • More coding to layout schema and handle WP table
    • More maintenance of above
    • More coding to handle interface page in WP admin

Some of these issues could be dealt with using WordPress tags, but that’s not really convenient unless the recipe is posted on a site that handles only recipes.

Bugs

  • Star image display may be broken in the WordPress-distributed plugin zip file. It should work correctly in the download zip file on this page. There’s a URL mismatch between plugin name and path to images and style sheets between the two. I know what happened, but I don’t know how to fix it easily. These people had the same issue:

    This is not a difficult problem to fix, simply adjust the path in the recipe’s HTML code.

I’m open to suggestions. Let me know how hRecipe works for you, and what I can do to improve it.

{ 36 comments… read them below or add one }

Leave a Comment

CommentLuv badge

{ 77 trackbacks }