WordPress has a pasting problem? Yes. You may not have realised it, but when text is pasted into the WordPress editor it can cause problems when the post is published. Here’s how to avoid the problem.
What is wrong?
One problem is that text often contains formatting information and this can be carried over into a WordPress post.
A complaint I sometimes see from bloggers is that their posts in WordPress use the wrong font, style or size. It seems like WordPress theme settings, which include font style information, is being ignored. Instead of the text appearing in the font you want to use, the one in your theme, it appears in a different font. It can drive people nuts!
If text is prepared elsewhere, such as Microsoft Word, Google Docs or some other word processor, when it is copied and then pasted into the WordPress post editor, the style information is copied too. You don’t just get the text characters, the font, size, line spacing, and so on can also be copied.
Sometimes people switch from Blogger to WordPress and they copy and paste the text, but it does not appear in the WordPress theme’s font.
Here is an example and this text is copied from Google Docs and pasted into WordPress.
This looks perfectly normal in the post editor. What could possibly be wrong?
Switch from the Visual tab to the Text tab in the top right corner of the WordPress editor and see what has really been pasted in.
Some formatting information has been copied along with the text and there is a <span style=”font-weight: 400;”> at the start of the paragraph. This is CSS formatting information that changes the style of the text and means that this copied text could look very different to the standard text around it when the post is published.
It looks OK in the visual editor, which makes it impossible to spot unless you switch to the Text tab and look carefully through the post.
Strip out text formatting
There are several ways to solve this problem and it requires all formatting information to be stripped from the text that is being pasted. Here’s how to do it.
Switch to the Text tab, click in the post to position the cursor and press Ctrl+V (PC) or Cmd+V (Mac). The text is pasted in text mode and carries no formatting information with it.
When using normal post editing on the Visual tab, click the T icon in the second row of toolbar icons (click the Toolbar Toggle icon to show the second row). You can then paste in the text in text mode. WordPress strips out formatting information.
In the past I found that this text mode paste did not strip everything out. Maybe it is better now, but I got into the habit of stripping out formatting before pasting in WordPress anyway and still use this method.
I write articles in Google Docs or Microsoft Word so I have a backup copy on my computer I then copy the text, paste it into Notepad (PC) or TextWrangler (Mac) and then copy it from there and paste it into WordPress
Use the keyboard shortcuts – Ctrl+A (select all), Ctrl+C (copy) and Ctrl+V (paste) and it can be done without much effort. Those are PC shortcuts. On the Mac use the Cmd key instead of Ctrl.
The problem with special characters
There are certain characters that can cause problems if they are in the text that is pasted into the WordPress post editor. These are < and >. The reason is they are used by HTML to indicate the opening and closing of a tag.
A heading in HTML for example, is <h1>A large heading</h1>.
You might need to use these characters if your article includes maths equations, or if you are writing about web development, WordPress, blogging and related topics as I am here. You might also use it as a quick way of writing less than (<) or more than (>).
Notice that the example heading above does not result in a heading and the HTML code is displayed instead. This is because the text was pasted into the WordPress editor on the Visual tab. If the text had been pasted into the editor’s Text tab it would have resulted in a heading and the HTML tags would be invisible.
If a < is in the text pasted into the editor’s Text tab then all the text up until the next >, or the end of the post, is hidden. It is assumed to be an HTML tag.
This is another reason why it is useful to copy text from your word processor into Notepad or TextWrangler and copy it from there and paste it into WordPress. Paste it on the Visual tab, not the Text tab.
