Retain Recipe Microdata Code Toggling Between Views – WordPress


Retain Recipe Microdata Code Toggling between view in wordpress – This is small fix that would not strip the span tags from TinyMce for Google structured data.


As you might already know that we use wordpress for running this recipe blog and obviously the Google’s recipe structured Microdata, we encountered a problem with wordpress and Tinymce editor.

I suspect that you may have also seen the error after you upgraded wordpress to 3.9.

The problem

The TinyMce editor strips all the Microdata tags if you switch the view from text to visual.

For example,

  1. The following span tags are completed stripped by TInyMCE automatically
    <span itemprop="ingredients" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
          Thinly-sliced <span itemprop="name">apples</span>:
          <span itemprop="amount">6 cups</span>
    </span> 
    
    
  2. If you are using itemprop=”image” in the <img> tag, that also gets stripped.
  3. The <div itempprop=”instructions”> strips the itemprop=”recipeInstructions” from the div tag.

If you do not switch and save the text within the text view, it would save the tags but would again strip them when you open it for editing next time.

Retain Recipe Microdata Code Toggling Between Views – WordPress – Solution

If you are struggling to fix this issue, then here is the solution that we have tried and tested to be working.

This is a bit of technical stuff and you might have to consult your web administrator if you have never touched your WordPress theme code.

For this fix, you would need to modify the functions.php file.
You can find this file in the following folder of your wordpress website:

[YOUR SITE NAME]/wp-content/themes/[YOUR-THEME-NAME]/functions.php

OR to edit this file using WordPress Administrator:

Go to [YOUR-WEB-SITE]/wp-admin ->Log in to the site as administrator -> Click ‘Appearance’  -> ‘Editor’ -> Select the theme – > Select the functions.php file -> edit and Save.

Add these lines of code anywhere in this file:

function mce_mod($init) {
$init[‘extended_valid_elements’] = “span[*],img[*],br[*],div[*]”;
return $init;
}
add_filter(‘tiny_mce_before_init’, ‘mce_mod’);

NOTE: If you are using a child theme, you should edit the functions.php file located in your child theme.
This code just tells TinyMCE (the editor where you write the recipes in wordpress) to allow the span, img and div tags to have any attributes which it thinks illegal otherwise.

Retain recipe microdata code toggling between views - wordpress

Retain recipe microdata code toggling between views – wordpress

Let us know if you face any issues in the comments and I will try to answer to the best of my knowledge.



© Copyright   inHouseRecipes

  Follow Us

This story was originally published at inHouseRecipes. This printer-friendly version is made available for your personal and non-commercial use only.
              
© Copyright 2017   inHouseRecipes