Retain Recipe Microdata Code Toggling between Views – WordPress

By Anil Gupta,  15 Dec, 17       9  Food Blogging Guide

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.


Update 15 Dec 2017, We now use the JSON+LD recipe schema type to show recipe data for search engines including google. This is a new format and much cleaner and better approach. if you use wordpress, you can use a plugin like schema to have this recipe schema automatically to your recipe blog.

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 Micro-data 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.

Loading…

9

  Comments: 9


  1. I’m having the same problem of “code” disappearing when moving from “Text” to “Visual” editor. I’m using Thesis 2.1.x and Classic Responsive theme, will your above fix work for me?


    • Yes, it would work.


      • I’ve added the above code in my Cinch Theme (Thesis child skin) custom.php, but I’m getting error.


        • What is the error?

          Also, the code should be added in functions.php not custom.php.


          • Actually, I’m using the “default” editor of WordPress 4.3. For thesis, the fuctions.php code is to be added in master.php or custom.php. I get the following error. Parse error: syntax error, unexpected ‘[‘ in /home/pall**/public_html/windo***com/te*h/wp-content/thesis/master.php on line 3


            • I don’t think this error is related to the above code. You added it in custom.php and this error is originating in master.php.

              Please check master.php for any unwanted character’s like [.


              • Hello. I added it in master.php only. That’s why it’s giving error there. I don’t know about any unwanted character. I just copied your code into notepad and then pasted in WordPress “master.php” file of Thesis. Any other suggestions.


                • Did you copy it inside the code tags? If not, move it inside.


                  • Hello. I solved it. It’s the “curly” quotes that is giving the problem. Better instruct in the article to not directly copy, instead change the “quotes” to normal ones in Notepad, before pasting in WordPress.

  2. I’m having the same problem of “code” disappearing when moving from “Text” to “Visual” editor. I’m using Thesis 2.1.x and Classic Responsive theme, will your above fix work for me?

    • Anil Gupta says:

      Yes, it would work.

      • I’ve added the above code in my Cinch Theme (Thesis child skin) custom.php, but I’m getting error.

        • Anil Gupta says:

          What is the error?

          Also, the code should be added in functions.php not custom.php.

          • Actually, I’m using the “default” editor of WordPress 4.3. For thesis, the fuctions.php code is to be added in master.php or custom.php. I get the following error. Parse error: syntax error, unexpected ‘[‘ in /home/pall**/public_html/windo***com/te*h/wp-content/thesis/master.php on line 3

            • Anil Gupta says:

              I don’t think this error is related to the above code. You added it in custom.php and this error is originating in master.php.

              Please check master.php for any unwanted character’s like [.

              • Hello. I added it in master.php only. That’s why it’s giving error there. I don’t know about any unwanted character. I just copied your code into notepad and then pasted in WordPress “master.php” file of Thesis. Any other suggestions.