How to Clean Up HTML During a Transfer From Office Live Small Business to WordPress
With the shutdown of Office Live Small Business (OLSB) website eminent, transferring the content from your OLSB site is an important topic.
You might think that you should be able to just copy the content and transfer it to your WordPress site.
It doesn't work that way.
WordPress uses CSS.
Most OLSB sites only depended on CSS part of the time.
This means that when you copy text from your OLSB site, you transfer a mess of unfriendly code.
You can copy content from one part of the page and have it use <p></p> html.
Another part of the page may use soft returns, so no spaces appear between paragraphs.
It's a mess.
You can apply some of the formatting you want using the formatting dropdown in WordPress.
But this can still leave unwanted code behind.
If you want to control the way your page looks, you need to switch from "Visual" to "HTML" view.
Make the clean-up job easier by going through a few initial steps.
First, look for any text that displays "Format" in the styles formatting box.
This indicates that the OLSB code is in control, rather than your CSS sheet.
Use Notepad++ (a free download) and copy the HTML from WordPress to Notepad++.
Use the search and replace feature to eliminate the unnecessary information I discuss below.
Some of the Code is Good Code.
Here's the code you can keep.
When you want to keep a paragraph centered:
<p align="left"> is unnecessary but may transfer across from OLSB.
Use Notepad++ to locate this code and eliminate it.
When you want to retain the color of specific text.
The color number will either be # followed by six digits or it may be a name.
Note: Usually <p> aligns left by default.
<p align="left"> is unnecessary but may transfer across from OLSB.
Most of the Code is Bad Code.
For example, you'll see a lot of <div> variants.
Replace with <h1></h1> and rewrite the CSS so the style matches the look OLSB was adding to each "title.
" In OLSB, <span> is the standard size of <p> in CSS.
replace all of this code with <p> for the opening tag, and close out the </span> with </p>.
Many lines of <div></div> may show up.
They are garbage.
Delete all of them unless you want to add a paragraph break.
Then you can replace <div> with <p> and </div> with </p>.
If you are using a social media plugin, you may find it helpful to add the following code to the last line of the page.
<p> </p>.
This code also works well for adding extra space between lines.
Sometimes it just isn't practical to add padding to all the h1, h2, h3, h4, h5 CSS instructions.
As with all HTML, it's important to make sure you open and close each tag.
That's one of the benefits of using Notepad++.
If you save the file you are working on as an HTML file, you can check all of the opening and closing tags.
Just click on the opening tag.
It will show where the closing tag is.
When it all looks good, replace the HTML in WordPress, save the page and check your results.
On a side note: WYSIWYG isn't the best in WordPress so open the preview in a separate browser window, so you can switch back and forth.
Refresh the view after you make any changes.
You might think that you should be able to just copy the content and transfer it to your WordPress site.
It doesn't work that way.
WordPress uses CSS.
Most OLSB sites only depended on CSS part of the time.
This means that when you copy text from your OLSB site, you transfer a mess of unfriendly code.
You can copy content from one part of the page and have it use <p></p> html.
Another part of the page may use soft returns, so no spaces appear between paragraphs.
It's a mess.
You can apply some of the formatting you want using the formatting dropdown in WordPress.
But this can still leave unwanted code behind.
If you want to control the way your page looks, you need to switch from "Visual" to "HTML" view.
Make the clean-up job easier by going through a few initial steps.
First, look for any text that displays "Format" in the styles formatting box.
This indicates that the OLSB code is in control, rather than your CSS sheet.
Use Notepad++ (a free download) and copy the HTML from WordPress to Notepad++.
Use the search and replace feature to eliminate the unnecessary information I discuss below.
Some of the Code is Good Code.
Here's the code you can keep.
When you want to keep a paragraph centered:
Opening tag: <p align="center"> Closing tag: </p>Note: Usually <p> aligns left by default.
<p align="left"> is unnecessary but may transfer across from OLSB.
Use Notepad++ to locate this code and eliminate it.
When you want to retain the color of specific text.
The color number will either be # followed by six digits or it may be a name.
Opening tag: <span> Closing tag: </span>When you want to retain a smaller text size than the default <p> CSS:
Opening tag: <span> Closing tag: </span>In general, you don't need to assign font-size, but if you were using xx-small for a specific look, it's easier to keep OLSB's code than to go through the entire website and assign a different <p class>.
Note: Usually <p> aligns left by default.
<p align="left"> is unnecessary but may transfer across from OLSB.
Most of the Code is Bad Code.
For example, you'll see a lot of <div> variants.
Opening tag: <div align="center"><span> Closing tag: </span></div>This specific content was the equivalent of an h1 heading.
Replace with <h1></h1> and rewrite the CSS so the style matches the look OLSB was adding to each "title.
" In OLSB, <span> is the standard size of <p> in CSS.
replace all of this code with <p> for the opening tag, and close out the </span> with </p>.
Many lines of <div></div> may show up.
They are garbage.
Delete all of them unless you want to add a paragraph break.
Then you can replace <div> with <p> and </div> with </p>.
If you are using a social media plugin, you may find it helpful to add the following code to the last line of the page.
<p> </p>.
This code also works well for adding extra space between lines.
Sometimes it just isn't practical to add padding to all the h1, h2, h3, h4, h5 CSS instructions.
As with all HTML, it's important to make sure you open and close each tag.
That's one of the benefits of using Notepad++.
If you save the file you are working on as an HTML file, you can check all of the opening and closing tags.
Just click on the opening tag.
It will show where the closing tag is.
When it all looks good, replace the HTML in WordPress, save the page and check your results.
On a side note: WYSIWYG isn't the best in WordPress so open the preview in a separate browser window, so you can switch back and forth.
Refresh the view after you make any changes.