How to add recipes to WordPress without a plugin

I no longer use this method. It worked for a bit, but then it became problematic. I have since started playing with WordPress plugin development and may very well create a recipe plugin of my own in the near future (I’ll share about it when I do).

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="http://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="http://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.

Example of Pinterest's "Rich Pins" feature for recipes

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

Examples

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

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

  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.

Sorry, but comments are closed on this post.

Comments on this post

Georgie’s gravatar

Glad I could help and glad you got it sorted! I’m really passionate about micro data but getting it to work with WordPress is a bit of a challenge. I think I only had to work with post images so I implemented it into my posts, but awesome of you to go a step further since you wanted a custom option. 🙂

Liz’s gravatar

Thanks! And micro data seems pretty cool. When I was reading about the meta properties for the recipes, I found other types or schema(s?) for all sorts of things&mdaash;for example, they’re apparently available for various types of reviews, not that I’m interested in that…blah. Seems like another headache to have to handle.

Christine’s gravatar

I am still stuck in my recipe plugin. I’m okay with it though because I don’t post enough recipes to actually code them in. But, they look nice here! Sunbutter granola in a cup is LIFE! Weird, but have you ever put Sunbutter in your cold cereal or muesli with milk? I didn’t think SB could get any better, but it does! It’s chewy and cold and refreshing!

Liz’s gravatar

Haha, I felt the plugin really limited me. :/ Yes! It really is awesome. 😀

Nope. I actually haven’t had muesli. I try to go easy on the oats, though, because sometimes my throat hurts after eating them. D; And I’m not sure SunButter would taste good with fruity cereal. :p

Carrie’s gravatar

WordPress has truly improved since I used to design websites back in 2012. A plug-in for recipes? That’s amazing!! Never even would have known that until I came across your blog.

Thanks for sharing!

Liz’s gravatar

There have been recipe plugins for several years now, even tracing back to 2012.

[…] This also kind of goes for plugins: a popular, premium recipe plugin has been having issues lately, and the developer is MIA. A year ago, the ZipList plugin ceased to exist. Sometimes, doing your own thing may be your best bet (that’s what I did for my recipe stuff). […]