Change Static HTML Page Into A WordPress Page

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.

wppage2.jpg

 

wppage3.jpg

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 the 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 in 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.

wppage4.jpg

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.

wppage7.jpg

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.

wppage5.jpg

wppage6.jpg

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.

wppage8.jpg

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.

Similar Posts:



Tags: ,

If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.

Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!

Comments

thanks

Reply

Thanks Jeff you really boil things down for those of us new to WordPress and website editing in general.

Thanks a bunch!!!

Reply

You really are an expert with Wordpress! Thanks!

Reply

Thanks, you are the master :)

Reply

Excellent information. Have been searching all over for this.
Can hopefully get pages sorted out now!! Many thanks.

Reply

Nice write-up but I can’t believe you’re still trying to get people to use tables to build heir sites! This is 2009 for crying out loud. Web standards, semantic HTML and CSS are a live and well.

Reply

Hey Jeff,
I am in a process of moving one of my html sites to wordpress. The information that you have provided here is very helpful! Thanks a lot! You saved so much of my time. Your site has become my one stop Source for anything wordpress now…

Reply

I agree with manson. There are so many alternatives these days. Css is great when working with wordpress. It is a matter of knowing not only CSS but the inner workings of wordpress as well. I guess it depends one ones experience.

Reply

Leave a comment
Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated and will appear when approved. Thank you.

(required)

(required)