Converting HTML to WordPress (Step-by-Step)

Comments · 87 Views

Part 3
To import several pages at once, you need to upload them to the same server as your WordPress installation. The plugin will propose something like html-files-to-import the folder name but you can choose whatever you want. Just make sure to remember the pathname.

2. Prepare the Import

To import several pages at once, you need to upload them to the same server as your WordPress installation. The plugin will propose something like html-files-to-import  the folder name but you can choose whatever you want. Just make sure to remember the pathname.

As you will see in the following, you can also import single pages one by one. For either method, go to WordPress and Settings HTML Import. We will go over the most basic settings now. If you need additional information or if anything is unclear, refer to the official user guide.

Files

html to wordpress import files

Configure this screen as follows:

  • Directory to Import — Enter the path that you just copied your existing files to.
  • Old site URL — Used for redirects. Enter your old URL. We will deal with this again later in this article.
  • Default file —The default file for directories on the old site, usually index.html.
  • File extensions to include — The extensions of files you want to import.
  • Directories to exclude — If you have any directories in the old site that you don’t want to import, enter them here.
  • Preserve file names — To have the plugin automatically using your file names as the new URL, check this box. This makes sense if your titles are very long because usually, the importer will use them to create the slug.

Content

Under content, you need to configure the HTML tag that contains your site content.

html to wordpress import content

To do that, choose the option HTML tag at the top. Then configure the tag in the following three fields. For example, if your content is contained in a tag called div id="main", the information you input would be divid and main.

The other settings on this page should be self-explanatory and enable you to import images, documents, update internal links, and more.

Title Metadata

html to wordpress import title and metadata

This part is similar to the content part before. However, it’s dealing with page titles. In the beginning, you need to tell the plugin how titles are marked in your HTML template so it can import them into the right place.

In addition, you are able to filter out redundant things like the site title as that’s often displayed by WordPress themes by default. If your titles reside inside the content, you can also tell the importer to delete them so they are not included twice.

What’s important is that you decide whether to import your old content like posts or pages. The rest is rather self-explanatory and lets you configure WordPress settings for new pages.

Custom Fields

html to wordpress import custom fields

If you have any data that needs importing into custom fields, you can configure this here.

Categories Tags

html to wordpress import categories and tags

Here you can assign categories, tags, and post formats to your imported content. The plugin will show the existing taxonomy on your site to make this step easier.

Tools

html to wordpress import tools

This screen lists a number of useful tools for successfully importing from HTML to WordPress.

3. Start Importing

Once you are done, save the settings. This will enable the Import Files button. Click it to get started.

html to wordpress import

(Note: you can also get here via Tools Import and then picking Run Importer under the HTML option.)

Next, choose whether to import a directory of files or a single file (you need to browse to it), then hit Submit. The plugin will then go to work.

Once done, you should have all existing content on your WordPress site and formatted by the new theme. Or, if you went one of the other routes, your site should look basically the same as your former HTML website. Nicely done!

Additional Steps

If you plan on deploying the WordPress site in the same place where the static HTML website used to be, there a few more things to do before you finish.

The first one is to check the URLs of your newly imported posts and pages to make sure they are search engine friendly (i.e. include the keywords you want to rank for). It’s very simple – just go to a page or post and look at the URL below the title.

check permalinks after html to wordpress import

To change it, click Edit on the right, change to the URL to your choice, and hit Ok.

A second thing is to implement redirects from the old URLs to the new ones. That way, you won’t lose out on existing SEO value.

If you have filled in the old site address in the HTML plugin, it will create the redirect code for you. You can copy and paste this into the file.htaccess that resides on your server (usually in the root directory).

You access it via FTP, however, you might have to enable seeing hidden files as it isn’t visible by default. Then edit .htaccess and input the rules.

Be aware that it only works if you have left the URLs unchanged. If you haven’t and need to set custom redirects, use the Redirection plugin. It’s a very comfortable solution that also tracks whenever somebody lands on a non-existent URL on your site. That way you can implement redirects for those links as well.

Did You Successfully Move from HTML to WordPress?

And that’s it. You just learned how to convert a static HTML site to WordPress. As a consequence, you have become part of one of the largest communities on the web and gained access to thousands of resources to make your site even better.

Depending on which solution you picked above, you have already gotten an impression of how WordPress works. From here on, it’s quite easy to branch out and dive deeper into creating websites with the WordPress platform. If you need additional help in this area, this site has loads of it. You can learn how to: