If you are converting a static HTML site into a WordPress site and want to convert the pages into WordPress pages it can be done. However, the new WordPress pages would need to be made manually one at a time. If there is just text content on the pages it is pretty easy. But what if you have images mixed within the content? This can get tricky. This WordPress guide will show you how to copy an existing HTML page and make it into a WordPress page.
Depending on what version of WordPress you have when creating a new page or post you will either have a Code tab on the top left on older versions or an HTML tab on the top right of the write post/page screen.
Creating a text-only WordPress page from an existing page is pretty easy, just copy the text and paste it into the code or HTML editor when making a new WordPress page. It is very important to paste the text you copied into the code or HTML editor. You can then switch over to the visual editor and format the new page using the tools available from the visual editor.
If you have images mixed within an existing HTML page and want to maintain the formatting you can copy the HTML from the existing page and paste that into the code/HTML editor too. I don’t like this solution because the HTML code on the existing page may not show properly on the WordPress page but you can try it. The hard part about this for an HTML newbie is knowing what code to copy. You don’t want all of it, just the content area is needed. Do not paste the entire code from an existing page!
First, copy the code from an existing page. This can be done a number of ways; when viewing the page with your browser click View on the browser toolbar and choose Source or page source. Or get it from your hosting account’s control panel. Now if you know where the content area starts and stops copy it and paste it into the code/HTML editor in WordPress. If you don’t have any idea where the code starts and stops you will need an HTML editor to find it.
I use Frontpage for an HTML editor simply because it came with the version of Office I have, if you have no HTML editor I suggest downloading a free one called NVU. Copy the source code from the existing page and paste it into the code or source editor on your HTML editor. Make sure nothing else is in the HTML editor before pasting in your code.
After pasting your code in, switch to the normal (not preview) tab and look for the start of the area you want to copy. Place your mouse just in front of the content to copy and type in a series of X’s.
Next scroll down to the end of the area you want and highlight the end of the area you want by left click and hold while dragging your mouse. Next switch over to the HTML view and the end of the area you want should be highlighted.
Place your mouse behind the very last closing tag of the section you want, left-click, hold and drag up highlighting all the code up to the area where you should see all the x’s you put in earlier.
Now just paste the code you just copied into the code/HTML editor when making your new WordPress page. Switch back to the Visual editor on WordPress to see how it looks and if you need to add any formatting to it. It is very important to get all the closing tags when copying the code. If a tag is left open it can really mess up the rest of your blog.
I showed you the method to place a mark on the code to copy using X’s. If you are familiar with HTML code, then, by all means, don’t bother. I suggest this for those new to or intimidated by messing with HTML code.
Muhammad Abdullah
Editorial Staff
