Extra p tags added to code and not nested properly

This article might help. Copy and paste code into your theme functions.php

https://templ.io/blog/prevent-wordpress-from-adding-p-tags-in-content/

Hi there!

It looks like you are getting some extra <p> tags in your widget area.

Looking at your page code, all this is happening within the widget wrapper area. There’s a <p> at the beginning of your widget, inside the <table>. Then a </p> at the end of the Widget after the table ends.

</table>
                                        <p>
                                            <!-- .widget-wrapper -->
                                    </div>
                                    <div style=&quot;float:right; clear:right; margin:0 1em 0 0.5em; padding:0 1em 0 0.5em;&quot;>
                                        <h3>Are you a Disaster Survivor?</h3>
                                        <table class=&quot;white_comm&quot; style=&quot;width: 20em; border:2px;&quot;>
                                            <!--  <a class=&quot;widget-logo&quot; href=&quot;https://www.fema.gov&quot; rel=&quot;nofollow noopener noreferrer&quot;><img class=&quot;lazyload jetpack-lazy-image&quot; src=&quot;image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-src=&quot;//fema.gov/profiles/fema_gov/themes/unicorn/img/fema-logo-main.png&quot; alt=&quot;US Department of Homeland Security - Federal Emergency Management Agency&quot; data-lazy-src=&quot;https://image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7?is-pending-load=1&quot; srcset=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; /><noscript><img data-lazy-fallback=&quot;1&quot; class=&quot;lazyload&quot; src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-src=&quot;//fema.gov/profiles/fema_gov/themes/unicorn/img/fema-logo-main.png&quot; alt=&quot;US Department of Homeland Security - Federal Emergency Management Agency&quot; /></noscript><noscript><img class=&quot;lazyload jetpack-lazy-image&quot; src=&quot;//fema.gov/profiles/fema_gov/themes/unicorn/img/fema-logo-main.png&quot; alt=&quot;US Department of Homeland Security - Federal Emergency Management Agency&quot; data-lazy-src=&quot;//fema.gov/profiles/fema_gov/themes/unicorn/img/fema-logo-main.png?is-pending-load=1&quot; srcset=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; /><noscript><img data-lazy-fallback=&quot;1&quot; class=&quot;lazyload&quot; src=&quot;//fema.gov/profiles/fema_gov/themes/unicorn/img/fema-logo-main.png&quot; alt=&quot;US Department of Homeland Security - Federal Emergency Management Agency&quot; /></noscript></noscript></a>-->
                                            </p>

This may be your theme trying to balance out the tags.
My first recommendation would be to clean up the syntax on that page. This may be a theme issue, but please check these results for what needs to be fixed.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fevents.stcwdc.org%2Femergency-events-public-interest%2F
Next step would be to double-check the widget to check the code it is putting in there to see if it is including the extraneious </p> tag. Which widget are you using?

		
	

Thank you. That article does explain some things and I tried using the function it recommended but it disabled all the styling in my style sheet for paragraphs and headers.
I searched Google for other suggestions and could only find ways to disable WP adding p tags around content but it also disabled all the br tags.

I want to keep the p and br tags I’ve used in my pages and posts but prevent WP from adding additional p tags around commented out sections and other places it thinks there needs to be extra p tags added to. Especially inserted ones in the wrong places such as before a closing div and after an opening div tag. Wpautop should at least use the correct syntax for nesting elements.

@sdayman Yes, I know those incorrect p tags are being added automatically by WordPress. My question is how to stop them being added at all or at least how to stop them from being put in un-nested properly. They break the code.

I have seen that I can turn off the WPautop feature but that turns off more than just the additional p tags. It also turns off intentional <br> tags, and all the styling I have for specific <p> tags and headers.

WordPress needs to fix the WPautop feature so it nests tags correctly–Use correct code syntax. What good is this feature if it doesn’t follow coding standards?

For example.
The original code is

<p>We especially want to increase the number of judges participating so that they may have more time for thoughtful evaluation of each entry. To volunteer, submit the <a href="https://docs.google.com/forms/d/e/1FAIpQLSfaNN_Z4yZ6rN3FjKkkDSD2IiNMWRreT3v8yMJmLzxDsOp-qQ/viewform" rel="nofollow noopener noreferrer">Judge Information form</a>. (Please note that <strong>you must use the Google Chrome browser</strong> to complete and submit the judging form.) Judge Applications are being accepted through <?php  include './wp-content/themes/aaron-child/includes/comp_deadline_alliance_for_judge_apps.php'; ?></p>
<table id="MEMBS" class="anchor white_comm">
<caption>Committee Members
<details>
<summary>Table contents</summary>
<p>The first column shows the position title, the second column shows the name, and the third column gives the email address.</p>
</details>
</caption>

Why is a spurious closing p </p> being added following <caption>Committee Member line in the rendered code?

<p>We especially want to increase the number of judges participating so that they may have more time for thoughtful evaluation of each entry. To volunteer, submit the <a href="https://docs.google.com/forms/d/e/1FAIpQLSfaNN_Z4yZ6rN3FjKkkDSD2IiNMWRreT3v8yMJmLzxDsOp-qQ/viewform" rel="nofollow noopener noreferrer">Judge Information form</a>. (Please note that <strong>you must use the Google Chrome browser</strong> to complete and submit the judging form.) Judge Applications are being accepted through <span class="blue_electric"><b>Friday, 9 September 2022.</b></span></p>
<table id="MEMBS" class="anchor white_comm">
<caption>Committee Members</p>
<details>
<summary>Table contents</summary>
<p>The first column shows the position title, the second column shows the name, and the third column gives the email address.</p>
</details>
</caption>

I have this same problem. WordPress should be using standard HTML5 coding practices if they are going to insert unwanted code into our posts and pages. It messes up my desired page styling and prevents a page from passing HTML5 validation. This annoys me to no end and took up many hours of frustration trying to figure out why my formatting wasn’t working right. I finally looked at the source file of the page as seen by the browser and discovered many errors in the page because extra p tags had been added and were out of order besides not being necessary.

I can’t figure out how to avoid getting these bad insertions. But I spend a lot of time trying to counteract the bad insertions so my page ends up looking like I wanted it to look and passes code validation tests.

WPautop needs to be fixed to follow HTML5 rules, not used if the site is using a child stylesheet and the Classic editor, or done away with completly.

• This reply was modified 2 years, 2 months ago by mychild.
• This reply was modified 2 years, 2 months ago by mychild. Reason: typos

To prevent it, add a code snippet to your theme’s functions.php file:

// Prevent WP from adding <p> tags on all post types
function disable_wp_auto_p( $content ) {
remove_filter( ‘the_content’, ‘wpautop’ );
remove_filter( ‘the_excerpt’, ‘wpautop’ );
return $content;
}
add_filter( ‘the_content’, ‘disable_wp_auto_p’, 0 );`

***
(From the article mentioned before)