Tidying Posts

The Problem

The WordPress editor seems to be full of bad ideas about how to format what you have so carefully typed in, so at times it is worth delving into the HTML version of the text to attempt a clean up.

The sort of HTML the editor produces is rather like the code that a word processor uses to ‘markup’ the text you enter, making it appear formatted. The tags are invisible in the editor and output, but they are there in the background.
You can experiment as much as you like at your own risk and can’t do too much harm, but remember that basic HTML formatting instructions should have both opening and closing tags – the latter having the / to cancel the format effect. There are however plenty of exceptions and quirks.

I can’t show you tags here accurately as the editor would interpret them, so I will use [ and ] where ‘real’ tags would have the left and right angle brackets (aka ‘less than’ and ‘greater than’ signs).

[strong]bold text[/strong] will appear as bold text.

What to do about it

You will mostly want to remove unnecessary tags that the editor puts in to your posts e.g. extra centering tags.

Here are two methods, basically the same, but the second is more cautious.

Method One – Reckless (but I do it all the time)

1. Manage the post in question through Site Admin.
2. Click on the HTML button to display a window revealing the HTML code behind your text.
3. Strip out the tags shown here in bold [div align="center"]keep the text though![/div]
4. Be careful to avoid the similar ones with the image details.
5. The tags should come in balanced pairs as stated above – i.e. before and after text (could be left/right or above/below) BUT sometime there are extra spurious opening ones with no balancing closing tags.
6. Click on the Update button to update the HTML.
7. Check the results in the preview window before saving the post.

Method Two – Slightly less Reckless

1. Manage the post in question through Site Admin.
2. Click on the HTML button to display a window revealing the HTML code behind your text.
3. Click in the HTML window and select all the text (Ctrl + A or use the mouse)
4. Copy all the text (Ctrl + C or use the right-mouse menu)
5. Paste the text into a fresh Notepad document that you remembered to open before you did anything else (Ctrl + V or use the right-mouse menu)
6. In the Notepad window, strip out the tags shown here in bold [div align="center"]keep the text though![/div]
7. Be careful to avoid the similar ones with the image details.
   
8. The tags should come in balanced pairs as stated above – i.e. before and after text (could be left/right or above/below) BUT sometime there are extra spurious opening ones with no balancing closing tags.
9. When you think you are finished, reverse the process by
• Selecting all the revised text in the Notepad window
• Copying it
• Pasting it into the WordPress HTML window
10. Click on the Update button to update the HTML.
11. Check the results in the preview window before saving the post.

Notes

• You could even save the code posted to Notepad in Method Two / 5 as a backup file.
• You might even create posts in Notepad, but I think you will still have to add the images with the WordPress editor and it will probably undo you good work when you do!