I no longer use this method. It worked for a bit, but then it became problematic. I didn’t like the free plugins available and didn’t have the funds for premium recipe plugin WP Tasty, but it’s definitely something to prioritize if you want to take your recipes to the next level and/or post recipes more than once in a blue moon.

I wanted every freedom possible when publishing my recipes—linked ingredients (I’d like to make my own barbecue sauce, for example, and link to another post with that recipe), pictures by the instructions, linked instructions, the CSS for the recipe DIV (no inline styling)—without having to pay for a plugin. I can code it in myself, so why should I pay for a plugin and have to rely only on someone else to decide whether to implement the features I’d like to have in said plugin?

What’s more, I’d like to avoid more database mess and inline CSS. I also don’t use a search engine optimization plugin and do the SEO stuff myself—I know what works best for my blog and I, and I know what SEO “must-haves” I’d like to avoid. I’m trying to format 6birds in a way that makes it easier for people to find me, namely those interested in reading about life as an autistic adult and/or with allergies.

I originally had this long explanation about other reasons I no longer want to use a recipe plugin, but…eh, I’ll spare you the reasons. I can let you know in an email if you’d like, but long story short: I like having control over my blog and try to use as little an amount of third parties as possible.

Creating the shortcodes

I struggled when I made it to the lists, because I wasn’t sure how to add a shortcode to li without forcing myself to also have to make shortcodes for <ul> and </ul>, because WordPress is facetious and likes to format stuff on its own, even if you’ve checked the box for it to not correct invalidly nested XHTML. Whatever. So, even though I didn’t really want to, I decided to wrap the ingredients in span tags.

Obviously, if you want something easy—and blanks to fill in—this method isn’t for you. o.-

In my functions.php file, I added the following:

    // BEGIN SCHEMA RECIPE
// - recipe div
function schema_recipe_div() {
    return '<div itemscope itemtype="https://schema.org/Recipe">';}
add_shortcode( 'recipediv', 'schema_recipe_div' );
// - close div
function close_div() {
    return '</div>';}
add_shortcode( 'enddiv', 'close_div' );
// - prep time
function schema_recipe_preptime( $atts ) {
    extract( shortcode_atts(
        array(
            'pt' => '',
        ), $atts )
    );
    return '<meta itemprop="prepTime" content="' . $pt. '">';}
add_shortcode( 'preptime', 'schema_recipe_preptime' );
// - cook time
function schema_recipe_cooktime( $atts ) {
    extract( shortcode_atts(
        array(
            'pt' => '',
        ), $atts )
    );
    return '<meta itemprop="cookTime" content="' . $pt . '">';}
add_shortcode( 'cooktime', 'schema_recipe_cooktime' );
// - yield
function schema_recipe_yield( $atts ) {
    extract( shortcode_atts(
        array(
            'yield' => '',
        ), $atts )
    );
    return '<meta itemprop="recipeYield" content="' . $yield . '">' . $yield . '';}
add_shortcode( 'recipey', 'schema_recipe_yield' );
// - ingredients
function schema_recipe_ing( $atts , $content = null ) {
    return '<span itemprop="recipeIngredient">' . $content . '</span>';}
add_shortcode( 'ing', 'schema_recipe_ing' );
    // END SCHEMA RECIPE

I had to create enddiv, because WordPress’ incessant formatting wouldn’t allow recipediv to engulf the entire recipe section, even though it should have been self-enclosing.

I also left out the meta stuff for the instructions, because I didn’t see much reason for them being displayed elsewhere, and the instructions property doesn’t seem to be required.

What recipes look like now

Because the short codes actually work, they will change into HTML if I edit this entry again…so I put it in a .txt file.

The HTML is the desired result, though!

<h3>SunButter Granola Bar in a Cup</h3>
<div itemscope itemtype="https://schema.org/Recipe">
<p><strong>Prep time:</strong> <meta itemprop="prepTime" content="2M">2 minutes<br />
<strong>Cook time:</strong> <meta itemprop="cookTime" content="3M">3 minutes<br />
<strong>Makes</strong> <meta itemprop="recipeYield" content="1">1</p>
<h4>Ingredients</h4>
<ul>
<li><span itemprop="recipeIngredient">testing</span></li>
<li><span itemprop="recipeIngredient">another <a href="#">one</a></span></li>
</ul>
<h4>Directions</h4>
<ol>
<li>la la ti dah</li>
<li>the smell of your skin lingers on me now</li>
</ol>
</div>

Just how I wanted it! It’s probably not ideal if you don’t want to have to type everything out every single time, but this is what I feel works best for me, especially since I don’t know if I’ll be on WordPress forever. I just wanted more control without having to rely on someone else to consider whether they wanted their plugin to have feature X or Y or not…and because I really don’t like inline styling.

I also wanted to be compatible with Pinterest’s “Rich Pins” feature, because it’s a helpful feature; I find a lot of recipes on Pinterest, and when the ingredients are already listed without making me have to click through to the site, I can quickly decide whether the recipe would really be allergy-friendly or not.[1. For something to be labeled “allergy-friendly” or “allergy-free” in the States, it must be free from the top 8 allergens—milk, eggs, fish, crustacean shellfish, tree nuts (including coconut), peanuts, wheat and soybeans.]

Examples

Unfortunately, SunButter Granola in a Cup hasn’t been published yet, but I have converted my old recipes:

• Honey Nut-Free Cheerios
• Easy Chicken Enchiladas
• Chicken Cordon Bleu

In time, I’ll get around to fixing all the pictures to better ones. 🙂 Just…not in the mood for the latter two, and honey nut-free Cheerios taste best when warm. 😉

Sources

• Georgie (she helped educate me a little :3)
• Generate WP
• Schema.org/Recipe