How to Import HTML Site to WordPress
You’ve decided that you want to import your HTML website to WordPress. Problem is, you have no idea how to do this.
I’ll show you how.
If your HTML website is small, 5 – 10 pages – then you won’t need to follow these instructions – it may be easier just to copy and paste. Whatever you decide, unless you name your imported pages exactly like your old pages, you will need to do 301 redirects for these pages to maintain ranking in the search engines. HTML Import will do this for you.
What you’ll need:
- Plugin: HTML Import
- Fresh WordPress install, and you’ll need to make sure your permalinks are set correctly
- Time
- Patience
- HTML website that you are going to import
- A clean backup copy of the website you will be migrating. This is a just in case measure.
Install WordPress, and then install the HTML Import plugin. Check permalinks.
A couple of points on the plugin:
I’ve worked with this plugin, and it worked well. I used it on a site with clean HTML. I don’t know how it works if you have bad code.
You will need to play with the import process. If you don’t, you may import some code that your theme won’t play well with. Be prepared to delete what you have imported a few times. Once you get it down, though, you’re good to go.
This article assumes that you are working with a fresh install of WordPress and that you have no other content on the blog!
You can access the HTML import link under Settings in your WordPress admin: wp-admin/options-general.php?page=html-import.php
You may want to set up your categories (if you plan on using them) beforehand in WordPress. I kept forgetting and had to go back and add them.
These are the settings I use, and they work perfect for me. I should also note here that this tutorial is based on an older version of the plugin.
Directory Options
Beginning directory – This indicates the directory you want to import.
Process files with these extensions – The site I was working on was a mess naming wise. In some cases I had to add the php extension as well.
Skip directories with these names – Any directory you do not want imported goes here.
Content Options
Select content by – I chose HTML tag, because I don’t use Dreamweaver.
Tag/Attribute/ =Value – I had to play with this section to get it right. The simple body tag worked for me.
Clean up bad HTML – Selecting yes is a good way to go.
Allowed HTML – I added html tags here, so take a look at your code and add in anything
you don’t see that you use. This will eliminate some post formatting on your part after import.
Allowed attributes – this will import all links intact, as well as your titles and alt tags.
Title Options
Select title by – Again I chose HTML tag
Tag/Attribute/ =Value – I chose title.
Phrase to remove from page title – I left this blank, but if you include a phrase across all of your page titles it’s a good idea to go ahead and remove it.
Metadata
Import files as – I chose posts because I want most all content to be in post format.
Set timestamps to – I chose the last time the file was modified.
Set status to – I chose private because, even though the blog isn’t live as yet, I still need to go over each post. As I tweak each post to my liking, I’ll publish it. Just my way of keeping track.
Set author to – Choose your author.
Categorize imported posts as – This is where you select your category for your imported pages.
Tag imported posts as – Since I haven’t decided on exactly how I’m going to use tags. I’ll tag on a post by post basis as I tweak.
Custom Taxonomies
Navigation Menus – I left both of these blank because I’m not using them
Box Sets – I’m not even sure what a Box Set is. It may be exclusive to my theme, so I wouldn’t worry about it.
Excerpts
Use meta description as excerpt – I leave this blank because I prefer to write my own and write them post by post.
Import using these options – Press this to import your html pages.
After the import
After you’re done importing your HTML pages, a screen will come up and show you what it did and didn’t import. This is when you go check your pages and see just what kind of job the import did, if you’re happy with it, then go tweak your pages.
HTACCESS Redirects
When ever you decide to rename a page, or change directories, and the page info stays the same, you should do a 301 redirect. This tells the search engines that the page has permanently moved to a new location, and you won’t lose ranking for that page.
One of the best features of the HTML Import plugin, is that it creates the 301 redirects for you. There are a couple of ways to use 301 redirects, and for my particular case I have to use the not so efficient way. But it works, and I’ll take it. My problem is I have to comb thru each and every one because of the changes I’ve made and how I’m moving files, but it could be worse!