Convert a website from HTML to WordPress – .com

In today’s tutorial we see a classic: How to pass a website from pure HTML to WordPress, importing all the content automatically.

static websites

Currently, . In fact, it is the most used CMS worldwide, without any doubt. Its main competitor is only 2.8% of the market. But there is “something” that beats him. You know what? Effectively. Static websites. The ones that are made in HTML.

As you can see, 57.2% of websites are made by hand, without any type of content manager. But if you look at the trend of the last 4 years, you will see how there are fewer and fewer. In a short time, 20 points have fallen from the CMS, especially WordPress.

If you are, you will have noticed that there is an increasing demand to move “static websites” to WordPress. In fact, I would recommend offering this service if you don’t have it in your catalogue, because I receive 2 or 3 requests of this type every week.

So the question is… How to convert an HTML website to WordPress? That is, how to convert a website with several “handmade” pages and posts to WordPress pages and posts?

Obviously, one possible way would be to do it by hand, based on “Copy and paste” content from the web to the WordPress editor. And that’s the best solution (and the one I recommend) for small corporate websites. But what happens if it is a website with 300 pages? Or a blog with 3,000 articles? Obviously, it is not worth doing it one by one. How to automate the process?

HTML to WordPress

Well thanks to Stephanie Leary we have a fantastic plugin that will allow us to speed up and automate the process without any hassle. Is about . So we’ll install it, activate it, and get to work.

The first thing will be to visit the options page, which we have in “Settings/Import HTML”.

As you can see, by default we go to the “Files” tab, where it will ask us for 6 settings to configure:

Directory to import: Here you have to indicate the server directory where you have the “old” web. You can move it to a directory called “old”, for example. Or directly create the “html-files-to-import” directory that is proposed by default.
Old site URL: Here you have to indicate the URL of the location of the old web. Normally it will be the root of the web, that is, something like https://. This will be used to place a file there .htaccess with the redirects of the old URLs. This step IS VERY IMPORTANT for SEO.
default file: Indicate if the server uses the file index.html or default.html by default.
File extensions to include: Indicate the extensions of the files that you want to transform into posts and pages. The normal will be “html, php, htm, asp” among others.
Directories to exclude: In the event that there is a directory that you do not want to import, simply indicate it here, separating them by commas.
Preserve file names: If you want the slug (permalink, url) is the same name as the file, select this box. So the file hello.html will become a slug in the URL of type /hello/ .

import the content

Next we go to the “Content” tab. This is where we are going to tell you “how” to do the conversion. I mean, where should you get it from? the content of the post or page. We have to think that there will be a lot of text in the file, but we are only interested in the content of the article or page. But not the rest.

As you can see, there are two sections. In the first we will select the content delimiter, and in the second the options.

Select content by:
- HTML tag: We will indicate the content that will be delimited by a tag such as or or
  
  . We will tell you the label, the attribute and the value.
- Dreamweaver template region: If the old web was in Dreamweaver, we’ll tell you the region name.
- Import entire file: This will simply import all the content, with no limitations. Better not to use this method unless we are importing text files with only the body of the article.
More content options:
1. Import linked images: We will also import the images that appear in the document.
2. Import linked documents: We will also import the documents that we are linking (PDFs, audios, videos, etc.).
3. Update internal links: Links to the page itself will also be imported.
4. Use meta description as excerpt: If the old website has the “description” meta tag, use it as an extract. More information in class.
5. Convert special characters (accents and symbols): Convert special characters such as accents, the “ñ”, etc. We will say yes.
6. Clean up bad HTML: It will remove all the extra HTML, created by certain applications such as FrontPage, Word, etc.

Important: This is for importing HTML files into WordPress. If what you want is to migrate from one WordPress to another, take a look at the class, which is just for that.

Import Titles and Goals

Now that we’ve told you where you’re going to get the content from, let’s go over the title of each page, as well as certain “meta” tags. We have it in the “Title & Metadata” tab.

As you will see, the information requested is very similar to the previous one. First we will select where the title comes from (HTML tag, Dreamweaver region, or file name). But in addition, we have the following options:

Phrase to remove from page title: If we want to remove any word or phrase from all titles.
Title position: If the title is inside the content, remove it, so that it does not repeat itself in the content.
Import files as: We can choose whether to import as pages or posts.
Set status to: If we want them to already appear as published, draft, or pending review.
Set timestamps to: If we want the date established to be the date of the import, the date the file was last modified, or if we want to extract it from a custom field.
Set author to: Select the user who will be the author of these posts or pages that we are going to import.
Import pages as children of: If we want them to be child pages of another page, we select it from the list.
Template for imported pages: If we want them to be pages, we can select the page template that we want to be set to them.

custom fields

In the event that the content that we are importing has custom fields, such as prices, dates, references, or whatever, we can also import them, establishing them in the “Custom Fields” tab.

As is customary in this plugin, you can see that it first asks us where to get the information from, and then the settings.

Select date by: We choose between an HTML tag or a Dreamweaver region to use as the date.
Custom fields: The same. We indicate the name of the field, the label, the attribute, and the value for each field.

Categories and tags

In the case that we are importing inputs (posts, news…), perhaps we want to categorize and label them. If that is the case, we will simply indicate the category that corresponds to it, the label, and even (if our theme allows it)the format.

Unlike the other sections, here we cannot import that information from the old page, but we can only assign the taxonomies (categories and tags) to all of us who matter. There is still no way to assign them dynamically by getting a value from the source file.

Importing a sample file

To illustrate this tutorial, we are going to see an example with a file that I have created for the occasion, simulating a file (very simplified) HTML:

As you can see, it’s a very simple file with HTML, TITLE, ARTICLE tags and a DIV with a custom field in a class called “field”. So, I will fill in the previous tabs with the corresponding information:

For the title, the tag “title”
For the article, the tag “article”
For the custom field, the “div” tag with the “field” attribute
import as pages

Once this is done, we save the preferences and click on “Import”. The following screen will appear:

As you can see, there are two options: Import all the files of an entire directory, or choose a single file. In this case, we are going to select a directory, in which I have a single file that I have created. We click “Submit”, and we see how the plugin starts an automatic import process:

This process can take seconds, minutes or hours, depending on the number of files you want to import. In any case, we will see at all times how the process is going, as well as the file that is being imported, the ID that is given to it, the old URL, the new URL, and the title, which in turn is a link to its file. edit page.

In this case, if we take a look at it, it looks like this:

And here we see how the title and content have been imported correctly:

Obviously, this was just one file, and we would have ended up sooner by copying and pasting into the editor. But if it were 300, or 3,000, it’s definitely a much faster method.

Summary and conclusion

There is an increasing demand to convert static websites from HTML to WordPress. If you are implementers, you are already taking time to offer the service, and if you need it for your project, you have it very simple.

thanks to the plugin HTML Import 2 You can import HTML files to WordPress, delimiting both title, content and even custom fields, in no time. It even takes care of 301 redirects!

And as always, you already know: If you want to learn much more about WordPress, Online marketing and web development, take a look at: More than 6044 videos at your disposal. Flat rate with immediate access to all! 🙂