I recently went on my blog spring cleaning excercise and Search engine optimization drive. And I was surprised to find broken templates and distorted large fonts in several areas.
Why was this occuring? I had recently moved from Blogger to WordPress. All went well as far as importing of posts and comments was concerned. Though some formatting was lost in the form of bold text, italics and coded text, it was simple to fix.
Then I went about fixing all posts for broken internal links to the old blog, lost formatting and coded text. WordPress provides an excellent preview screen when you edit a post, which shows you exactly how the post will look like. Since I was editing a large number of WordPress posts, and switching between edit and html preview is not as simple as in Blogger, I used a Hide Post Preview wordpress plugin to speed up my editing speed. That was my mistake as it prevented me from previewing some of these edited posts.
Blogger visual WYSIWYG editor closes all the tags before publishing a post or shows errors for unclosed tags (unless you have enabled the option to ignore errors). WordPress will publish your post without errors even if there are unclosed tags. So there were some unclosed tags like div tags, h2 tags etc which were left behind while I edited and saved posts in the visual editor without the preview. Possibly some of the were there since the importing itself.
You can understand that Unclosed div tags can severely break the template in css dominated blog web designing. Unclosed font tags like h1, h2 can cause distortion of all font sizes after the error. Imagine a whole page with h3 font size!
I share the lessons I learnt –
1. Use the WordPress text based editor – Get used to typing on the WordPress text editor. It provides you almost all the functions for text formatting and linking you need without adding additional tags or unclosed tags. Stay in Control. I have yet to encounter a formatting error with the text editor. Remember to use the “Close Tags” at the end before publishing.
2. Always check the preview pane – This is essential to see how your post will finally look like. The blogger preview shows the formatted text only, but wordpress preview shows the entire page with header, sidebar and footer. So any unclosed tags which can cause problems can easily be detected.
3. Maintain regular quality control checks – There is nothing worse than expose your carelessness to your readers due to broken and distorted web pages. With blogger you can check for unclosed tags by loading the archives, since each archive loads all the posts of that month, you can easily detect errors in a few long reloads and fix them. Since WordPress breaks the larger number of posts into pages, you need to screen through all these. But there are more options to sceen categories, posts by calendar date, and archive months.
4. Use Copy and Paste with care – I know many of us like to quote and copy text excerpts from various websites on our posts. But these texts are html formatted. If you copy on the visual editor, you copy all the associated html tags, css classes etc. along with it. And imagine what happens if you have a similar css class specified, it will be formatted to your css specifications and not theirs! Copying on the text editor removes all formatting and is safer to prevent copy paste tagging errors.
If you cannot leave your visual editor, copy the formatted html text into Notepad (freely available on all Windows) – not Microsoft Word. This will remove all formatting from the text and now you can paste it into your visual editor. One more step, but worth it.
5. Beware of partially disappearing posts bug – How many times have you found that while you switch windows in your browser, half of your extra long post on the editing screen has disappeared. It happens all the time. I have ended up with broken posts and awkward adsense codes many times due to this.
And occurs always in Firefox for me. Before saving the edited post, always scroll to the bottom and see if the post is complete. This will only occur when you change view to another tab or window without any changes in the post form. If you have done any change in the post, i.e. the cursor has been inside the form, the post will not cut off. And it happens for very long posts only.
6. Back up your long posts – Save the post which you update often in a simple text editor (similar to backing up your blog). At least if this post disappearing bug strikes you, your most popular post is readily available for recopying.
I hope my experience helps you become a better blogger.