Tutorial: How to Convert Static Website to WordPress

Google now favors websites that are “mobile-friendly”. If you don’t want to lose your rank in mobile search, be sure your website is mobile-friendly. If its not, see below tutorial on how to upgrade your existing website to Responsive WordPress Site.

If you’re not sure if your website is mobile-optimized, Google provides a handy (and free) URL analyzer.

Prerequisite: You should have WordPress already installed in your server to be the new home of your existing old website.

1. Download your static website HTML to your local drive. If you don’t have the source HTML, you can download HTTrack Website Copier: http://www.httrack.com/

HTTrack is a free (GPL, libre/free software) and easy-to-use offline browser utility. It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site’s relative link-structure. Simply open a page of the “mirrored” website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.

You may watch below video tutorial on how to use HTTrack Website Copier

2. After downloading your static HTML website into your local drive, install HTML Import 2 plugin into your WordPress site.

3. In WP-Admin panel, go to Posts > Categories then add a new category or change the existing default category. All static HTML files imported to your WordPress site will use this category…

wp-category

4. In WP-Admin panel, go to Settings > Permalinks and use the permalink structure of your choice. In my experience working with a client, I was asked to use custom structure:  /%category%/%year%/%postname%/

5. Now its time to configure HTML Import 2 plugin

Directory to import: You should upload your static HTML files done in Step #1 to your server. Then set the ‘Directory to Import’ to the path of your static HTML files.
Old site Url: Enter the URL of your old website here.
Default file: Leave as is or change based from your requirements.
File extension to include: Leave as is or change according to your needs.
Directories to exclude: Leave as is or change according to your needs.
Preserve file names: Leave as is or change according to your needs.

Settings for files to import

Select content by: You may use Chrome’s inspect element or Firebug to check the content’s container HTML tag & ID or unique class name from your old website.
More content options: Leave as is or change according to your needs.
Allowed file types: Leave as is or change according to your needs. You may check ‘Clean up bad (Word, Frontpage) HTML to remove badly formatted HTML markups.

Content settings

Select title by: You can set Tag = title
Phrase to remove from page title: Leave it blank.
Title position: Leave it blank.
Import files as: Posts
Set status to: publish
Set timestamps to: Leave as is or change according to your needs.
Set author to: Leave as is or change according to your needs.

Title and metadata settings Title and metadata settings

Category & Tags: Here, you may assign categories, tags, and custom taxonomy terms to all your imported posts.

Category, tag, and taxonomy settings

6. Click ‘Import Files’ to start import static HTML files to your WordPress site.

Import screen (directory/file selection) Import screen (directory/file selection) Completed import: pages, rewrite rules, and images Completed import: pages, rewrite rules, and images

7. You may manually clean up all posts HTML markup after the import.

8. You can install Generate Post Slugs plugin to automatically generate slugs/permalinks from the post title.

9. Most likely your new website which is now powered by WordPress has different url structure against your old website. You need to generate 301 redirect to let search engines and others know that an old link has been replaced by a new one. A 301 redirect is a permanent redirect which passes between 90-99% of link juice (ranking power) to the redirected page. I recommend this awesome .HtAccess 301 Redirect Generator Tool to bulk generate 301 redirect old url to new url.

10. Install & run Xenu’s Link Sleuth to check for broken links. Xenu or Xenu’s Link Sleuth, is a FREE computer program that checks websites for broken hyperlinks.

Xenu's Link Sleuth, is a computer program that checks websites for broken hyperlinks.

You may contact us if you have any questions or need our help to
upgrade your existing website to a mobile-friendly Responsive WordPress site.