• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPArena

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Tutorials
Tutorials

How To Convert A Static HTML Page in to A WordPress Page

Avatar of Editorial Staff Editorial Staff May 31, 2008

WordPress vs HTML
FacebookTweetPinLinkedInEmailPrint

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.

FacebookTweetPinLinkedInEmailPrint

Related Stories

  • How to Embed Media to WordPress Responsive Themes

  • How To Create A 404 Error Redirect For WordPress

    How To Create A 404 Error Redirect For WordPress

  • WordPress Blogging With An iPhone

    WordPress Blogging With An iPhone

Avatar of Editorial Staff

Editorial Staff

Editorial Staff at WPArena is a team of WordPress experts led by Jazib Zaman. Page maintained by Jazib Zaman.

Reader Interactions

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

How To Remove WordPress Blog Title And Description

FulFill Orders on WooCommerce without Dropshipping

How To Fulfill Orders On WooCommerce Without Dropshipping

Recent Topics

  • Official Windows 7 Wallpapers
  • How to secure your WordPress images and content from Theft
  • Top 20 Web Designing Companies in the World
  • WP Rocket Review: Is It the Perfect Solution for WordPress Caching?
  • The Complete WordPress Security Guide 2023 – Step by Step

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!