3

I have this in my functions.php:

The images inside the slider were added as custom post types called "Page Content." I'm not sure if the filter only applies to the main Posts.

/**
 * Remove paragraph tags around content and excerpt
 */
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

The the posts in the admin look like this: enter image description here

But something still wrapping the images of my Nivo Slider with p tags:

enter image description here

enter image description here

CSS:

#slider-wrapper {
    float: left;
    height: 560px;
}
#slider {
    float: left;
    border: 1px solid #DDD;
    position:relative;
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    top: 0px;
    left: 0px;
    display: none;
    float: left;
    position: absolute;
    width: 958px;
    height: 458px;
}
.nivo-controlNav {
    margin: 490px auto 0;
    overflow: hidden;
}
.nivo-controlNav a {
    background: url(images/bullets.png) no-repeat;
    border: 0;
    float: left;
    text-indent: -9999px;
    width: 22px;
    height: 22px;
}
.nivo-controlNav a.active {
    background-position: 0 -22px;
}
.nivo-directionNav a {
    display: block;
    width: 70px;
    height: 70px;
    background: url(images/arrows.png) no-repeat;
    text-indent: -9999px;
    border: 0;
}
a.nivo-nextNav {
    background-position: -70px 0;
    right: -20px;
}
a.nivo-prevNav {
    left: -20px;
}
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

Any suggestions to remove the p tags?

3
  • Is it possible that the Nivo slider plugin is causing this? Jan 26, 2011 at 19:07
  • 1
    If all else fails, you might want to check the database and verify that the stored values are not already munged. I remember a painful 3am debugging session where I was looking for something stepping on the data, but it turned out the data was already corrupt before the code I was testing got its hands on it. Jan 26, 2011 at 20:35
  • Are you switching between HTML and Visual mode whilst using the editor? The editor.js file that's run alongside the editor also does string replacement(on your content) when you switch between modes, ie. Visual / HTML ..
    – t31os
    Jan 26, 2011 at 22:26

3 Answers 3

2

There are various functions aside from wpautop() that filter post content, such as force_balance_tags(), which was designed to balance bad HTML coming in via the editor.

They're mostly defined in formatting.php, where you can see the various code in source.

Removal of these filters can be as simple as one line, as you point out:

remove_filter('the_content', 'wpautop');

5
  • Thanks for the info, so how can I solve my problem?
    – wyc
    Jan 26, 2011 at 17:06
  • 2
    Try removing these filters one by one, and perhaps start with force_balance_tags() by changing the use_balanceTags option to zero.
    – editor
    Jan 26, 2011 at 17:08
  • 1
    I think is is because of this: wordpress.org/support/topic/…
    – wyc
    Jan 27, 2011 at 7:03
  • "<div><img src='image.jpg' alt='an image' /></div>" <- Did this work for you?
    – editor
    Jan 27, 2011 at 21:30
  • 1
    I decided to just leave the <p> tags I think is more semantically correct than wrap it with divs (isn't?).
    – wyc
    Jan 28, 2011 at 14:12
0

To summarize (since I just worked through this myself):

The problem does come from WP's automatic post-processing routines. They recognize a "loose" img as invalid HTML, and automatically wrap it in "p" tags. That's probably usually helpful, but I found that wrapping it in a "p", as opposed to a generic "div", it was forcing my images to inherit a lot of my style properties that I only wanted to apply to text.

Here's the Codex page that explains it: How WordPress Processes Post Content

There are basically three or four ways to address this, from what I can tell:

  • You can suppress the auto-correction altogether, as @editor described above.
  • If you're handy with plugins, you can edit or override the default substitution of "p" with "div". I'm not that concerned or ambitious, so I haven't dug into the details, but it doesn't look like it would be too difficult, if you know what you're doing.
  • You can set up your CSS so that it assumes that at least some of your images will be wrapped in "p" tags.
  • You can manually wrap all your images in redundant "div" or "p" tags.

Personally, I've opted for the last option -- just putting them into their own little divs.

0

If you want a simple solution that only unwraps the p tags around your images, give this plugin a look: http://wordpress.org/extend/plugins/unwrap-images/admin/

DISCLAIMER: I developed it for my own needs, but it works quite well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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