WordPress puts <p> around <img />, how do you disable this?

  • Heya – so WordPress automatically puts <p> around all my <img /> when using the Visual or HTML editor. This is extremely annoying and obstructive, can someone tell me how I disable that?

    Yes “correct invalidly nested…” is unchecked. And I’ve tried it checked as well.

Viewing 8 replies - 1 through 8 (of 8 total)

  • If your image markup is on a line by itself, WP will treat it as a paragraph. One way to avoid the auto-p addition is to place your image markup inside a <div></div>.

    Thread Starter Spencer Hill

    (@ws5f3dj7)

    Ah, I guess that makes sense. It’s just screwing with my layout, but I think I resolved it.

    Though I’m having other markup issues. Is there a way to make sure the Visual Editor doesn’t insert extra HTML at all? Like it’s adding “floats” and advanced code beyond p’s and h1’s that really have no use or place.

    Where’s it adding floats? They’re normally only added for images/attachments depnding upon what alignment was set when the image was inserted.

    Thread Starter Spencer Hill

    (@ws5f3dj7)

    It’s adding it to uploaded and placed images that are aligned either left or right using alignleft or alignright classes. And it adds other random code.

    The editor just adds the classes. The theme’s CSS then defines whether those elements with classes float left, right or are aligned centrally. If you don’t want the floats, edit the theme’s style sheet and remove the flats from those classes.

    Thread Starter Spencer Hill

    (@ws5f3dj7)

    Sorry, I should have noted that in addition to the class, it’s appending an inline style that’s similar to style=”float: left; etc…”

    To automatically wrap the image in <div>s instead of <p>, add a caption to the image.

    By adding a caption, WordPress autogenerates a div-wrapper (.wp-caption) around the image with desired alignment class (.alignleft, .alignright, etc).

    Now you can style the images separately without paragraph styles affecting them.

    If you don’t want to show a caption for your images, you can insert a single space for caption, and/or use CSS to hide the caption with .wp-caption-text {display: none}.

    This is useful if the end-users (ie. your clients) are not comfortable with the code editor.

    @jjsoini

    I’m having this issue as well. I tried to use the method you describe above but for some reason the images aren’t floating. Well, they are in the editor but not in the front-end.

    Any ideas why this may happen? Because as you say, a lot of my clients aren’t comfortable with the code editor.

    Cheers.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘WordPress puts <p> around <img />, how do you disable this?’ is closed to new replies.