HTML sites are good for their speed and clean code. They are interesting to use with a small amount of materials and static pages in cases where the project does not require frequent changes and content updates. They do not have a control panel, web pages must be edited through code, and then updated on the hosting, which is very inconvenient. The desire to move such a site to WordPress is quite understandable – a popular system with a convenient admin panel, a huge selection of plugins and templates.
The use of CMS significantly increases the efficiency of the site administrator. Especially in the context of the need to scale it up. Opportunities for SEO optimization and functionality improvement are also expanding. Migrating a working HTML site to WordPress is a common task, it is solved by algorithms honed by many years of experience of thousands of developers.
We will show you the steps required to successfully migrate an HTML site to a WordPress CMS. All of them can be done independently.
Preparation, general information
The essence of the migration task comes down to converting static HTML pages into a format suitable for WordPress, which also uses, in addition to HTML / CSS, PHP code. That is, one-to-one transfer of the code without optimization for CMS will not work, it will not work.
Then a fork appears. If it is important for you to maintain the current website design (there is good traffic, the design is familiar and recognizable among the audience), then you have to tinker a little with adjusting the current design to the WP format without changes. To do this, you can use plugins (more on them later).
You can also manually assemble a similar template for WordPress, but this option is unacceptable for beginners – it requires the skills of an experienced developer, most likely you will have to order this work from a specialist. You will have to invest extra, but you will get a high-quality result.
If you can afford to change the design without much harm to the case, then you can simply take a more or less similar (or completely different) template for WP, copy the materials (manually or with plugins), add the appropriate forms, communications, etc. what was on the original site, and get a site with the same content, which has undergone a redesign. This is an easier option to implement.
Initially, you need to analyze what functionality is involved in the HTML site and find the appropriate plugins or built-in tools that can reproduce them on WP. Immediately, we note that it will not be difficult, the CMS has a lot of possibilities – everything is there. Make a checklist of what you need, and you can easily find it – as long as you don’t miss anything. And don’t forget to make a backup of the current version of your HTML site.
Step 1 – choose hosting, install WordPress and create a database
The choice of hosting is the most important point. Its quality determines how your site will work – whether it is fast, stable, or convenient to administer and fine-tune.
There are 118 data centers scattered around the world, headquartered in the US state of Utah. The servers to manage this entire empire there occupy about 5,000 square meters. Everything works on SSD disks, a lot of space is allocated, even at the minimum tariff for WordPress sites ($ 2.63 / month) its 50 GB.
The provider is famous for its reliability, bulletproofness – your site will never be closed just because one of the competitors has filed a fake or even justified complaint. Hosting servers work in the cloud, CDN technology is used, so their location does not affect the speed of sites on the Internet – it is consistently high. In the case of Bluehost, foreign origin is a plus, there is no reason to fear this factor.
You will need a new database to work with site materials. Go to the “Databases” section, then in the “Create a new database” field, then enter the username, the name of the database and the password to access it. Then select WP from the “Softaculous App Installer” section and start the automatic installation. In the process, you will need to specify the used (just created) database. Now you have a hosting with WP installed and a ready-to-use database.
Bluehost provides round-the-clock technical support, gives a domain for the first year (if you need to register it), free SSL, and also provides 100% moneyback for 30 days. For WP-optimized hosting, you’ll also get automatic installs and updates, access to Microsoft Office 365, domain mail, hundreds of free templates, and an easy-to-use and powerful control panel.
Step 2 – working with the design
Depending on the chosen path – selecting a similar theme, using a plugin to migrate an existing one, or manually adapting it for use in conjunction with WP, 3 different action algorithms are opened. Let’s describe them in general terms.
Selecting a new template
In the control panel, in the “Design” section, there is a template store. Select the appropriate one and install it in 1 click and make it active. Further, in the template settings, you can adjust its design to suit your requirements (logo, columns, colors, backgrounds, etc.). This is the easiest way – to create a WP site from scratch with a new template, and then adjust its functionality and transfer content.
Converting an HTML template
This is where a third-party web service like Theme Matcher can help you with rendering and generating a WP-friendly design based on an HTML theme. Just enter the name of the current domain and the service will convert the theme files to WP format. Then you just download them and install them through the control panel as a new template. The result is usually good, but some work may be needed. This is the best option for those who want to keep the design (at least its basic elements), but do not have advanced coding skills.
Manual adaptation of the template for WP
WordPress themes consist of several files – style.css, index.php, header.php, sidebar.php, and footer.php. You need to create empty blanks for them, and then pick the HTML template, selecting the necessary elements from it (styles and HTML structure) and inserting them into the necessary files of the future WP template. You will also need to add CMS syntax elements in various areas in order for the skin to be accepted by the system. This is a job for a specialist; beginners cannot do it, so we won’t even describe the process in detail.
Step 3 – transferring content
At this stage, a fork appears again – manual content transfer or automated using a plugin.
Transferring materials manually
If you have a little content, this option is better. To do this, you need to copy the HTML code of the materials into the editor, having previously created the corresponding static pages for this case. We copy only the code enclosed in thetags, everything above or below is a technical part that is not needed for WordPress pages. You will need to copy the pictures separately – it is better to leave their names the same, then the code will pick them up as they are. Don’t forget to add SEO data through the editor or the interface of the respective plugin.
The method can lead to some display errors – it depends on the nature of the content and the template used on WP. Most likely, something will have to be corrected manually, bringing the formatting to the desired condition.
Important: if the structure of links on the new site differs from the old one, then they will stop working. You will need to set up 301 redirects to redirect visitors from old links to new ones (with small amounts of content, you can make edits to .htaccess) or edit all site links to a new format (manually or using a plugin like Redirection).
Automatic transfer by means of a plugin
It is beneficial to use this method if you have a large number of articles. The most popular plugins for automatic migration are Import HTML Pages and HTML Import 2, which can be installed from the control panel by searching the plugin library by name. They give a very similar result, the quality of adaptation of the design is at a mediocre level. Much will have to be finalized manually. But the plugin will help you to perform routine work in large volumes, saving a lot of time and effort.
Step 4 – testing functionality
Now is the time to test the work of the new site on several points:
Broken links. Make sure all links are working. If there are a lot of pages and links, then it is better to use the Xenu’s link sleuth plugin, Integrity or their analogue for checking.
Broken styles. If you have converted the design or created the template manually from the old one, there may be display errors. Inspect everything – you may need additional steps to fix the problems.
Functional dysfunctions. Test everything that is on the site – forms, social panels, buttons, navigation, various options, players, etc. Make sure everything works as expected.
Step 5 – connecting the domain to the new site
So, you already have a WP site with customized styling, functionality, and migrated content. Now you need to switch from the technical domain used during all work to your own. Whichever registrar you buy a domain from, the general meaning of connecting it to a new site comes down to editing the DNS server values in the domain control panel to those used by the new hosting provider.
Important: if your domain was registered within the last 60 days, you will have to wait the same amount for the transfer. This is ICANN policy, you cannot speed up the process. It is also necessary to deactivate anti-theft protection in the domain control panel.
Conclusions and recommendations
When migrating your HTML site to WordPress, it’s easiest to use the updated design by choosing one of the ready-made templates. Plugins will help you in many steps, but manual work and coding will not be completely avoided. Pay attention to testing, do not forget about setting up the necessary redirects, checking the functionality of links and other functionality, as well as filling in the SEO parameters. Select and install the necessary plugins in advance.
As an example, we described the algorithm for the situation when you plan to change the hosting provider for a new WP site. It is also possible to upload a WP site to a hosting that serves the current HTML site. You can collect the updated site on the localhost (Openhost, Denwer, etc.), and then upload it there, adjusting wp-config to the existing database and removing the old site from there. But that’s a slightly different story.