Types Plugin + WYSIWYG + Content Filter

Hello! I am using the Types plugin to create various post types for a client website about food and recipes.

I'm having trouble with our dictionary post type. Each post type has a photo and basic description of an ingredient/type of food. Underneath that are several expandable divs for "Selection" "Season" "Nutrition Summary" and so on.

Each of these expandable divs are a custom field on the custom type, and many of them are the WYSIWYG type field available through the Types plugin.

The biggest problem I'm facing is that on the front end, the WYSIWYG content is just showing up as a big block of text, without any <p> </p> tags being automatically put in.

The client isn't SUPER tech savvy, so I don't want to make them go to the Text side of the WYSIWYG editor every time and add the <p> tags. So I need the WYSIWYGs to get treated the same way as the main content for the front end.

BUT here's the kicker: the expandable divs have been created via the Collapsomatic plugin, which means all the content for the div is wrapped in a shortcode - further complicating this. So check out what I have in my template:

<?php $nutrition = get_post_meta($post->ID, 'wpcf-nutrition-summary', TRUE); ?>

(to retrieve the metadata from the custom field)

then to display...

<?php if (!$nutrition){
echo '';
} else {
echo do_shortcode('[expand title="<img src=\'/wp-content/themes/twentythirteen-child/images/down-arrow.png\'> Nutrition Summary" swaptitle="<img src=\'/wp-content/themes/twentythirteen-child/images/up-arrow.png\'> Nutrition Summary"]' . $nutrition . '[/expand]');
} ?>

I am open to alternative ways of doing the expandable divs, but if its possible to keep them, that would be preferable. Regardless, please help me figure out the WYSIWYG/front end issue!


  • Ash
    • WordPress Hacker

    Hello @ansley

    I hope you are well today and thanks for asking the question.

    For WYSIWYG issue, please install "tinymce-advanced" and do some setting change. To change the setting just click check box for "Stop removing the p and br tags when saving and show them in HTML editor" and save. Now you can see the p tags in HTML mode.

    I am little confused about expandable div. Would you please explain a little more?

    Please let me know.


  • ansley
    • Site Builder, Child of Zeus

    A creative solution that totally worked!!

    My only hesitation here is that it's adding yet another plugin to an already plugin laden website.

    Is there a way to do this (stop WP from stripping out the <p> tags in the WYSIWYG) in functions.php without installing a whole plugin?

  • Ash
    • WordPress Hacker

    Well, would you please try adding the following line in functions.php before ?> tag:
    add_filter ('the_content', 'wpautop');

    If it doesn't work, then search for in your theme
    remove_filter ('the_content', 'wpautop');
    and remove the line.

    Note that, it won't display the p tag in html editor, but only when the content will be displayed.


  • Ash
    • WordPress Hacker

    Sorry to hear that it didn't work. It worked for me when I was using default wordpress theme. So I believe there is a function the theme that is restricting this behavior.

    As you are happy with that plugin, it's good. but if you really need some changes you can ask the theme developer.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.