CODEWITHSUNDEEP
csswordpress
Arete
Arete

Reputation: 1004

Wordpress automatically adding paragraph

So I am working on making a child theme of the "twenty fifteen" theme.

So far I have made custom post types with custom fields. It is imperative that I use custom fields for adding Soundcloud embedds. I have used the "Advanced Custom Fieds" plugin to do so.

Now, the problem I have is that whenever I use the custom field to add a soundcloud widget (just by pasting the link) it seems that the WYSIWYG Editor is adding the link inside a paragraph like this

<p>https://soundcloud.com/skitofficial/skit-ghost-dog</p>

This causes (I think) a white line (a new paragraph) to appear below the Soundcloud widget. enter image description here

As you can see in the picture below, if I open the code view of the WYSIWYG I can spot the paragraph lines being added around the link. enter image description here

So all in all, the main problem for me here is the white space below the soundcloud widget. Perhaps it does not have to do anything with the paragraph tag, but either way I the space below the widget looks bad, unprofessional and I need to remove it somehow. Now you may say "why don't you just remove those paragraph tags?" and that is the problem, even if I remove them, they are added automatically.

So, any suggestions would be very appreciated. I have worked my head on this for three days without any progress.

Edit: this question is old and I do not have the site anymore.

Upvotes: 2

Views: 4549

Answers (4)

Dave
Dave

Reputation: 69

I did not have access to the code, nor I had access to any plugins, hence I tried this only using the WYSIWYG editor.

To remove the any unwanted paragraphs from any particular web element like div just follow these steps:

  1. add a class to your div (the div which is containing that unwanted paragraphs).

  2. Write a javascript function using querySelectorAll.

Example Below:

var blankps=document.querySelectorAll('.removePara p');for(var i=0;i<blankps.length;i++){blankps[i].remove();}
<div class="col-xs-12 col-md-3 removePara">
<p></p>
How to Remove Empty Paragraphs. Solved.
<p></p>
</div>

Note: This will remove all the paragraphs inside any div which has class="removePara".

Hope this helps someone.

Upvotes: 0

Plummer
Plummer

Reputation: 6688

Wordpress WYSIWYG pops in <p> tags. If you're not careful, it will <p> all over your content.

https://codex.wordpress.org/Function_Reference/wpautop

Pop this into your functions.php

remove_filter( 'the_content', 'wpautop' );

EDIT

If you're using ACF, the text area field type has an option for whether or not to add the <p> tags. As mevius suggests, depending on your use case, you may want to consider using the URL field type.

OR, you can use this when calling the field in your theme.

the_field('wysiwyg_field', false, false);

Upvotes: 3

rnevius
rnevius

Reputation: 27112

It's possible that the WYSIWYG is adding those <p> tags, due to WordPress's wpautop function.

Rather than completely disabling wpautop, you could remove the <p> tags using a combination of get_field() and wp_strip_all_tags():

echo wp_strip_all_tags( get_field('field_name'), true );

EDIT: On second thought, why are you using a WYSIWYG for this at all? If you're just pasting a link, you should consider using a text field, or a url field.

Upvotes: 1

zgood
zgood

Reputation: 12581

I would just add this style to a global stylesheet:

.SoundcloudEmbedd p { margin: 0; }

seems safe

Upvotes: 2

Related Questions