My WordPress Edits Look Funny After I Published Them

Question

Hey Lena – I went in to edit post area on the one of my WordPress pages and when I make a change to the text and pressed preview the text appeared on a white box over the background image and looks funny.

Can you please let me know how to fix this so there is no white box?

Answer

You most likely copied and pasted text from somewhere else without using the proper copy/paste technique. When I look at the revision you made using the HTML tab, I can see there is a rogue <div> tag at the top and bottom of the post. This is certainly your problem. Delete those tags and you’ll be golden.

To go back to a previous revision

1. Log in to the admin area on WordPress and navigate to the post you want to edit.
2. Scroll down to the “Revisions” section (if you don’t see the Revisions area, look at the next tip)
3. Choose the revision you are interested in reviewing/reverting.
4. Select the “Restore” link next to the version you want to restore.

If you can’t see your page revisions at the bottom of the page, here is how you turn them on

1. Go to any page or post as if you were going to edit it.
2. Click the “Screen Options” at the upper right of the page.
3. Select the “Revisions” checkbox and close the “Screen Options” area. NOTE: If you’ve never saved the post/page before, you won’t see this option.
4. Scroll down to the bottom of the page to see any saved revisions you have made to the post/page. This is now the default viewing for the user you have logged in with.

How to I prevent this from happening in the first place?

The surefire way to avoid the problem is to always type in the editing area and don’t use copy/pasted text. However, copy/pasting text from another source isn’t too tough.

Copy/Paste your code using the special paste areas: Whenever you copy/paste text from another source (like Microsoft Word) you need to use the special paste area buttons provide for you at the top of your editing screen. If you can’t see the second row of buttons, select the “kitchen sink” button. Using these buttons will strip the garbage code that can be carried over from other programs and mess up your page.

How can I fix the copy I already have?

You can always select the HTML tab instead of the Visual tab to view your copy. If you see any funky characters you can try deleting them. If it’s only a couple, that might be the easiest way. Beware that some characters are meant to be there. For instance if you have a header in your copy, you might see a <h1> tab around it. This is normal.

You can also highlight your text and try to remove all the formatting by using the “Remove Formatting” button. It’s the button that looks like an eraser that is to the right of the “Paste from Microsoft Word” button.