add_filter( 'the_content', 'add_listen_button', 99 );

This is because as it’s right now, WordPress is using the wpautop function and then the button is being inserted into a paragraph. With priority > 10 this is fixed.

regards,

function featured_props_output( $atts ){  	$attr = shortcode_atts( array(		'post_type' => 'featured_props'	), $atts );    $props = get_posts([      'post_type' => $attr['post_type'],      'post_status' => 'publish',      'numberposts' => -1,      'order'    => 'ASC'    ]);  	global $post;    ob_start();  	?>  <style>  	p:empty {display:none;}  </style>      <div class="props-container">      <?php      if ( $props ) {        $even = true;          foreach ( $props as $post ) :               setup_postdata( $post );               $prop_meta = get_post_meta( get_the_ID() );               if($even){              ?>                <div class="prop-item">                    <div class="prop-cover">                      <?php echo the_post_thumbnail(); ?>                        <div class="wp-block-button" style="text-align:center;">                            <a target="_BLANK" class="wp-block-button__link" href="<?php echo $prop_meta['url'][0]; ?>">Visit Website</a>                        </div>                    </div>                    <div class="prop-desc">                        <h4><?php the_title(); ?></h4>                        <p><?php echo $prop_meta['cust_content'][0]; ?></p>                        <div class="wp-block-button" style="text-align:center;">                            <a target="_BLANK" class="wp-block-button__link" href="<?php echo $prop_meta['url'][0]; ?>">Visit Website</a>                        </div>                    </div>                </div>                <?php }else{ ?>                    <div class="prop-item">                        <div class="prop-desc">                            <h4><?php the_title(); ?></h4>                            <p><?php echo $prop_meta['cust_content'][0]; ?></p>                            <div class="wp-block-button" style="text-align:center;">                                <a target="_BLANK" class="wp-block-button__link" href="<?php echo $prop_meta['url'][0]; ?>">Visit Website</a>                            </div>                        </div>                        <div class="prop-cover">                          <?php echo the_post_thumbnail(); ?>                            <div class="wp-block-button" style="text-align:center;">                                <a target="_BLANK" class="wp-block-button__link" href="<?php echo $prop_meta['url'][0]; ?>">Visit Website</a>                            </div>                        </div>                    </div>                <?php        }        $even = !$even;          endforeach;          wp_reset_postdata();      } ?>    </div>  <?php	return ob_get_clean();}add_shortcode( 'props_output', 'featured_props_output');

You can look at the website front-end and see that within the content is many empty p tags. Specifically after the last .prop-item, within the .prop-item, .prop-item .prop-cover, and .prop-item .prop-desc .

I have hidden these empty p tags in CSS, but I’m wondering if there is something incorrect that I’m doing that is causing wpautop filter to add these empty p tags.

I’m learning how to use short codes but I don’t undrestand why WordPress keeps rendering broken paragraph tags.

I created a file called wp-content/themes/twentytwentythree/templates/single.html with the following content:

<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)">
<!-- wp:shortcode -->
[wl_event_head]

<!-- /wp:shortcode --> </main>

I then made a file called wp-content/plugins/wl/wl.php with the following contents:

/*
 * Plugin Name: Hello
 * Description: World
 */

function wl_event_head($att) {
  return '<section>
  <div>
    <h1>Hello WP</h1>
  </div>
</section>';
}

add_shortcode('wl_event_head', 'wl_event_head');

When I go to my webpage in firefox and look View Source, I see this:

<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)">
<section>
<div>
<h1>Hello WP</h1>
</p></div>
</section>

</main>

Why is there a closing p tag? I noticed that if I delete some spaces in my return string for function wl_event_head($att), then sometimes maybe the closing p tag goes away.

What am I doing wrong?

Note: I tried putting this code in my wp-content/themes/twentytwentythree/functions.php

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

It did not fix the problem.

This could be a plugin conflict, but I love all of the plugins I am using and therefore even if it is a plugin conflict I would have trouble saying goodbye to the one conflicting.

Having said that, I wonder what function I could add that would force wpautop to ignore all HTML blocks, but only HTML blocks. Because I want default WordPress functionality elsewhere.

And/or, if anyone has any other thoughts or ideas that would be appreciated.

</tr>
</tbody>
</table><!-- .widget-wrapper -->
</div>

<div style="float:right; clear:right; margin:0 1em 0 1em; padding:0 1em 0 1em;">
	  <h3>Severe Weather</h3>
	<table class="white_comm" style="width: 20em; border:2px;">
<!--  <a class="widget-logo" href="https://www.fema.gov" rel="nofollow noopener noreferrer"><img src="//fema.gov/profiles/fema_gov/themes/unicorn/img/fema-logo-main.png" alt="US Department of Homeland Security - Federal Emergency Management Agency" /></a>-->
<thead>
<tr class="white_pad7" style="width: 20em;">

The rendered page has inserted an opening p tag between /table and /div. Then added a closing p tag between the table tag and the opening thead tag in the next opening div section.

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

Unnecessary p tags and not nested properly. What is doing this? My syntax checker on the rendered page tells me there is an extra closing /p tag there but doesn’t say anything about the out of place opening p tag.

And when I try to fix on one page with custom CSS, it messes up the other. It appears that a couple <br> are showing on the page with the excessive spacing. Any idea how to get rid of the <br> showing up? Or how to resolve the issue on one page without affecting the other?

I tried putting:

remove_filter( 'the_content', 'wpautop' );                                                                                                                                                
    function tsl_remove_autop($post){                                                                                                                                                     
          // remove wpautop for tribe community events                                                                                                                                    
          // without this extra <p> tags are generated in these pages by wordpress?  Another plugin?                                                                                      
        remove_filter('the_content', 'wpautop');                                                                                                                                          
        remove_filter('the_excerpt', 'wpautop');                                                                                                                                          
    }                                                                                                                                                                                     
  add_action( 'the_post', 'tsl_remove_autop', 1);

but I can’t get the stray <p> tags to be removed from the events page.

I assume it has something to do with upgrading to WordPress 6, but I also upgraded a bunch of stuff at the same time – I hadn’t noticed the problem on my dev site.

The only way I can fix it is to modify wpautop() to return $text as soon as it starts, and that fixes it.

The advice from the wordpress developers is that plugins shouldn’t be putting spaces and newlines into their template code…. That doesn’t really seem like a reasonable solution to me, and I don’t know if there is some conflict with another plugin or not.

I see in your Overwrite.php that you say this->wpautop isn’t needed any more, but I wonder if it still is.

Any suggestions on how to make your code work without disabling wpautop for everywhere?