[wickywills]

I am just starting to get into Wordpress (I know, late to the game) and am pulling my hair out as to why WP keeps inserting Paragraph tags around everything you put into the HTML editor (even after I have manually gone in and removed them!!).

This seems to be a very common problem, and so far no-one (that I have found) has found a decent solution to it.

I have tried installing various wpautop/tinymce plugins, and so far I have only been able to remove P tags around EVERYTHING - which is obviously not ideal.

I just don't understand why Wordpress can't just output what you insert into the editor - does anyone here have any solutions to this?

Basically, I want to do this (just as an example):

<img src="myimage.jpg"/>
<p>some text</p>

however wordpress does this (note the additional P tags around image):

<p><img src="myimage.jpg"/></p>
<p>some text</p>

Any help much appreciated!

thanks
James

This post has been edited by Renaissance-Design: 18 January 2012 - 02:52 PM
Reason for edit: Please use the code button or tags to format your code.

[MikeChipshop]

Try this, not used it my self but a client of mine does and he swears by it http://wordpress.org...ugins/raw-html/

[wickywills]

MikeChipshop, on 18 January 2012 - 02:04 PM, said:

Try this, not used it my self but a client of mine does and he swears by it http://wordpress.org...ugins/raw-html/

Thanks for the reply MikeChipShop - I have just tried using the plugin that you posted, and it seems to just add even more paragraph tags around items the moment you toggle between "Visual" and "HTML" mode within the editor.

All I want is for WP to output exactly what I enter in HTML (and for it to retain my HTML after toggling between Visual/HTML) - really can't understand why WP is screwing with my code!!

Even just inserting an image on it's own into a post, WP puts P tags around it!

[Renaissance-Design]

In HTML, images are an inline element. Inline elements cannot sit on their own, they must be contained in a block-level element. I know your WP content may already be contained in a block-level element (a <div> or <section>), but the editor doesn't know this and it isn't its responsibility - it deals with the content itself, so it tries to ensure that your images are wrapped in paragraphs. If you need your image to stand on its own, work with the editor rather than against it. Eg, the following is valid HTML because the inline <img> is contained within the block <p>:

<p><img src="myimage.jpg"/>
some text</p>

Assuming you're separating your paragraphs with a 1.5em bottom margin, simply give your images display: block and the same 1.5em bottom margin.

Alternatively, why not just accept the <p> around the image?

This post has been edited by Renaissance-Design: 18 January 2012 - 02:55 PM