So I set up a basic php file for my WordPress theme:
<?php get_header(); ?>
<div class = "content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no pages found.' ); ?></p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
When I ran my theme and opened up inspect element, it said that there were two additional paragraph elements on top and below my paragraph element containing the content (<p><?php the_content(); ?></p>).
It looked like this in the inspector:
<h1>Home</h1>
<p></p>
<p>Content</p>
<p></p>
Why is it doing this?
Edit: Found a "solution": Although it wont remove the paragraph elements, it will make them invisible in case you want to adjust the padding, margin, or any other attribute of your content:
.content p:first-child { /*...in my case, my content paragraph is in a 'content' div...*/
padding: 0;
margin: 0;
/*...or any other attribute...*/
}
.content p:last-child {
padding: 0;
margin: 0;
}
WordPress replaces new lines with paragraphs in post content.
You have additional start and end p tags output by the_content();
Remove unwanted <p> tag.
/**
* Remove empty <p> tag.
*
* @param type $content
* @return type
*/
function pd_remove_unwanted_p($content){
$content = force_balance_tags( $content );
$content = preg_replace( '#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content );
$content = preg_replace( '~\s?<p>(\s| )+</p>\s?~', '', $content );
return $content;
}
add_filter('the_content', 'pd_remove_unwanted_p', 20, 1);
Just put above code in your active theme functions.php.