Support

Account

Register Login

Home › Forums › General Issues › No p tags with wysiwyg field

Solved

No p tags with wysiwyg field

  • The wysiwyg editor within ACF isn’t working like the native editor in WordPress. Double line breaks do not translate to paragraphs, or even to double line breaks. They come across in the page source, and on the rendered page, as completely unformatted text.

    Actually, when I click the source code button to check, I’ll see something like this:

    <p><strong>This is an experiment.</strong></p><p>Just to see if this <em>displays in paragraphs.</em></p><p>As it's <span style="text-decoration: underline;">supposed</span> to.</p>

    But in the actual source code from the final page, that will look like this:

    <strong>This is an experiment.</strong>

Just to see if this <em>displays in paragraphs.</em>

As it's <span style="text-decoration: underline;">supposed</span> to.

    Everything is correct, except that the paragraph tags are missing.

    Is this a known issue? Is there some setting I missed when setting this up?

  • Hi @skd

    I’m afraid I don’t understand your issue. Could you please share some screenshots of it and explain it in more detail?

    If you want to remove the <p> tag, I believe you can do it by using this code:

    function my_acf_add_local_field_groups() {
    remove_filter('acf_the_content', 'wpautop' );
}
add_action('acf/init', 'my_acf_add_local_field_groups');

    Thanks!

  • James —

    I set up a page that replicates the problem and explains it at the same time. You can access it here.

    Thanks for you help…

  • Hi @skd

    I believe the WYSIWYG field will add the <p> tags automatically like the WordPress editor. The code I gave you before is used to remove the generated <p> tags, so the result will be something like the issue you have.

    It’s possible that you have a custom function that removes the <p> somewhere else. Could you please try to reproduce the issue on one of the WordPress’ stock themes (like Twenty Fifteen) with other plugins deactivated? If it disappears, then you can activate the theme and plugins one by one to see which one causes the issue.

    Thanks!

  • James —

    The function.php file is blank. I deactivated every other plugin, and the problem persists.

  • Update —

    I copied over the wysiwyg.php template to Twenty Fifteen, and activated that theme…and the problem went away. So it apparently isn’t a custom function, since there isn’t one, but one that exists in Twenty Fifteen that doesn’t exist in the custom theme. Do you have any insight into what that might be?

  • Update the Second —

    I take it all back. The rendered display looked okay…but checking the page source reveals that the paragraph tags are still missing.

  • Hi @skd

    Could you please create a staging site and then open a new ticket here: https://support.advancedcustomfields.com/new-ticket? Please include the URL to this thread and the admin credentials to your staging site in the new ticket. This will allow us to provide you better support.

    Thanks!

  • James —

    I don’t know what you mean by “staging site.” The URL I gave you is to a private development site that contains nothing proprietary or confidential, and I can give you an admin login to it. Is that what you mean?

  • Hi @skd

    What I mean by staging site is a development site where you try the changes before you do it on the live site. You can clone your live site to create a staging site. That way you’ll have the same setup and issues. If you are not afraid that something bad will happen to the site you gave me before, then you can provide the credentials to that site instead.

    Thanks 🙂

  • James —

    I found the problem; it was in the template.

    I was using the generic WordPress function for calling the value of custom fields, which apparently works with just about everything but the wysiwyg editor. I employed this form:

    <?php echo get_post_meta($post->ID, 'text', true); ?>

    instead of

    <?php the_field('text'); ?>

    Once I changed it, everything worked fine.

    So always assume an ID 10t error when something like this occurs. Thanks for all your help; sorry to have been a time-waster.

  • I am having the exact same issue. Unfortunately, your solution didn’t work. This is my code, which does output the Custom Field “article_source”, but without the paragraph tags.

    <?php if( get_field('article_source') ): ?>
<?php echo "<div class='article_source print-only'>"; ?>
<?php $article_source = get_post_custom_values("article_source"); ?>
<?php if ($article_source) echo " " .$article_source[0]. " "; ?>
<?php echo "</div>"; ?>
<?php endif; ?>

  • Update, actually the WP way does work:

    <?php if( get_field('article_source') ): ?>
<?php echo "<div class='article_source print-only'>"; ?>
<?php the_field('article_source'); ?>
<?php echo "</div>"; ?>
<?php endif; ?>

    Not sure what was going on there but it’s good to go now…

  • Hello. I’ll add my situation on this thread.

    I am consuming data from ACF in a JavaScript front-end application. Because of our product, we have a lot of <sup> going on in a lot of places. I would love to just use a ‘text’ field, but because of this – I have to use WYSIWYG fields for almost everything.

    The prime example, is that we have an H2. It needs to have a WYSIWYG.

    It is used in the template like this:

    <h2>{{{model.acf.field-name}}}</h2>

    Now because the field is a WYSIWYG, that generates something like this:

    <h2><p>Something with a <sup>â„¢</sup></p>/h2>

    And – you can see how that is a problem with my article type system / styling wise (as well as crawler document structure.

    I *could* remove all p tags from the editor… but I also need those in all of the other cases.

    Any ideas – or ways you’ve worked with this?

    An option in the field would be the best – but I can also just teach my team to write sup in the headings / since it’s only a third of them. A WYSISYG that is known to be only one line etc. ?

    If the WYSISYG weren’t so tall by default, that would also be a part of my choices.

  • I have the same problem (@sheriffderek: you have another problem, this is offtopic), but I use the Timber plugin and Twig templates.

    {{ module.richtext }}

    … renders the content of the WYSIWYG editor w/o the p tags. How can I get the right HTML code using Twig?

  • Can confirm same problem.
    Custom theme using Timber (Twig engine), if i output default editor – all tags (br, p) are in place. Same output for ACF PRO WYSIWYG field – tags are stripped.

    Tried to play with raw twig filter, add_filter autop – nothing.

    As SKD mentioned changed function to the_field (in timber\twig case {{ fn(‘the_field’,’episode_editor’) }} ) – everything works as it should!

    Note – there is no <p> tags in text editor (they gone if you click visual back) but wordpress rendered them on page.

    ACF PRO version 5.7.5, WP 4.9.8

  • I found the solution on another website.

    Use this in your PHP code:

    $content = apply_filters('the_content', $content);

    This also renders the inline elements / shortcodes.

    Regards from Berlin
    Oliver aka Keks

  • I think I have the same problem with Timber and Twig, which is not applying any p tags in my acf wysiwyg field.

    I don’t quite unterstand oyyplays solution.

    Could you explain a bit more in detail what you mean by that? {{ fn(‘the_field’,’episode_editor’) }}

    Or are there any other solutions around?

    Thanks everyone

  • @lalasalama you should output this field as {{ fn(‘the_field’,’YOURFIELDNAME’) }} instead of {{ YOURFIELDNAME }} in your twig file. On backend this uses different function to output field and everything works.

  • @keks Thank you so much. That worked for me perfectly.

  • @bavila 😊

  • Solution!!! The Advanced Editor Tools (previously TinyMCE Advanced) plugin worked for me. I couldn’t get the p tags to render using ACF wysiwyg. I would save, view page and no p breaks. Read a ton of threads, didn’t want to touch functions.php or anything of that nature, then got lucky and stumbled upon a forum post where some dude mentioned the aforementioned plugin.

    Held my breath, installed the plugin (search for “TinyMCE Advanced”), went to the “classic editor” settings tab, scrolled down to advanced options and toggled “Keep paragraph tags in the Classic block and the Classic Editor” and it worked! Literally jumped out of my seat after spending 4 hours digging for a solution.

    I hope this helps someone else in the same spot 🙂

  • The Advanced Editor Tools plugin worked for me. Thank you @joer!! I’ve been trying to solve this issue for years.

Viewing 23 posts - 1 through 23 (of 23 total)

The topic ‘No p tags with wysiwyg field’ is closed to new replies.