Technote

Themes & plugins Practical

Series Redesigning a site that is already live Part 6 of 8

Three reasons old content breaks in a new design

Inline styles baked into the body, shortcode remnants from plugins that are gone, hard-coded widths. These are where a new design system stops being honoured.

You have rebuilt the templates and tidied the tokens, then you open a post and find a bold sentence in the old brand colour, a table running off the screen, and a strange bracketed string sitting in a paragraph. The template is fine — what is broken is the markup stored inside the content.

WordPress keeps your body content exactly as written. That is a real strength: change the theme and nothing disappears, and a post from fifteen years ago is still there. The catch is that whatever the old design left inside that content is still there too.

1. Inline styles

Pick a colour or bump a font size in the editor and the value is saved into the body. Sentences highlighted in the old brand colour, type locked to a specific pixel size, tables inserted to force alignment.

Those values ignore your new design system entirely. However carefully the tokens are organised, a colour written into the content wins. They cause the most trouble on mobile, where a fixed size or width simply cannot shrink.

2. Shortcode remnants

Shortcodes provided by an old theme or plugin are still sitting in the body. While that plugin exists the screen renders; once the redesign removes it, the bracketed text is printed as-is. That is what a stray [button] or [row] in the middle of a paragraph actually is.

Page-builder layouts belong to the same family. When layout is stored as content data, removing the builder removes that page’s structure wholesale. So if the redesign retires a builder, count the affected pages first and decide how each will be rebuilt.

Six things a content search will find — start with your top entry posts

3. Hard-coded widths

The quietest of the three. A table carrying width="700", or an image pinned to a pixel width, produces horizontal scrolling as soon as the new content column is narrower. It is invisible on a desktop and obvious on a phone, so a desktop-only review waves it through.

The order to find them and fix them

Start by knowing the size of the problem. Search the content for those patterns and count how many posts match. Ten can be fixed by hand; five hundred needs a different strategy.

Fix in entry-traffic order. Not every post has to be perfect — repair the screens people actually read and most of the visible damage disappears.

Bulk find-and-replace is the last resort, and if you use it, take a backup first. Rewriting stored content is not reversible, and replacement rules routinely match more than expected. Apply it to a handful of posts, check the result, then widen the scope.

To stop new posts recreating the problem, the durable fix is to narrow what the editor can choose — offer named options rather than arbitrary colours and sizes.

What theme and plugin changes leave behind in content is covered further in the themes and plugins archive, and if you want the whole site checked in one pass, try the diagnostic plugin in our free tools.

Next part

With the content tidied, it is time to ship. The next part covers the fortnight after launch — what to watch, and what you can safely ignore.

More on this topic

All technotes

Themes & plugins Practical

Decide the editable regions before you design them

A design the CMS cannot express stays up for negotiation long after it ships. Deciding what editors may change, first, removes the negotiation entirely.

Designers 6 min read

₩270,000 · Join the program