If you’ve ever moved beautiful static HTML into a WordPress page only to find the grid layout silently shattered, you’ve met wpautop.

What it does

WordPress runs wpautop() on post content before output. It wraps anything that looks like a paragraph in <p> tags and converts double line breaks into <br>. Intent: helpful for non-technical users in the visual editor.

What it breaks

Grid and flex layouts depend on direct parent-child relationships. When wpautop wraps your <div> grid items in <p> tags, your CSS selectors no longer match. The grid silently collapses. The HTML still validates ? no console error.

I hit this on the live ClickBrown site. Homepage hero used a CSS grid with two columns. In static HTML it worked perfectly. In WordPress: stacked vertically, no errors.

The fix

// Don't do this for layout-sensitive pages:
the_content();

// Do this instead ? bypasses wpautop:
$post_obj = get_post();
echo do_shortcode(wp_kses_post($post_obj->post_content));

I keep wpautop on for blog posts (where it’s useful) and bypass it for landing pages where I control the markup.

Founder, ClickBrown · Christchurch, New Zealand

Sole Shopify developer at Army & Outdoors for 6.5 years. Builder of 11 live production systems across 4 regional stores. Writing about what actually works — not what sounds good in documentation.

Read more about →