3

I recently added a caption to my image in WordPress and now there is an empty <p></p> tag after <img> tag. It broke my style.

Can anyone tell how to remove it?

Thanks for the help.

demo

  • Most likely this depends on the theme you are using. – cjbj Feb 11 '17 at 14:16
  • 1
    Blame wpautop. You can hide it with CSS. p:empty { display: none; } – Nathan Johnson Feb 11 '17 at 15:13
  • The empty <p> tag is inside the <div> tag of the attachment itself so its probably because of your theme. Perhaps it's reserved for the Description field? What's the output when you add a description to your image? – devkabiir Feb 11 '17 at 15:46
  • Is there any Image/attachment related plugin installed? Which might be adding the empty <p> tag or altering the attachments. – devkabiir Feb 11 '17 at 15:50
3

Removing wpautop:

This is most likely from wpautop. To fix that, first write the following CODE in your theme's functions.php file:

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

If it doesn't solve the issue, that may mean <p></p> got into your database or you have empty newline inside your [caption][/caption] Shortcode. Go to the post & edit out the <p></p> or empty new line from WordPress editor's Text mode.

That should solve your problem.

Alternative CSS Solution:

You may use CSS CODE to hide <p></p> as this answer suggested. However, with that method, it'll still be in your HTML & there's no point in creating it and then hiding it entirely with CSS. It's better to remove it in that case with the above CODE.

However, if you want to keep wpautop for some reason (may be you are using it for formatting somewhere else in the site), then you may target only the <p></p> tags within the captions with the following CSS:

.wp-caption > p:empty  {
    display: none;
}

This will keep the formatting of wpautop elsewhere in your site and at the same time solve the display problem for the captions.

1

It is not a good practice to override the WordPress native functionality. Instead you can hide the empty elements using CSS

p:empty  {
    display: none;
}

This will the empty elements.

0

You can also remove this using str_replace to replace the p tags with the_content filter:

function wpse256087_content_filter($content) {

    $content = str_replace( '<p></p>', '', $content );

    return $content;
}

add_filter( 'the_content', 'wpse256087_content_filter' );
0

You can do this on the do_shortcode_tag hook.

function remove_empty_wp_caption_text($output, $tag) {
  if ($tag === 'caption') {
    $output = str_replace('<p class="wp-caption-text"> </p>', '', $output);
  }

  return $output;
}
add_filter('do_shortcode_tag', 'remove_empty_wp_caption_text', 10, 2);

What's nice about this approach is that the function won't be ran unless the [caption] shortcode is called.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.