How to Move a HTML Website to WordPress
Table of Contents
Table of Contents
HTML websites are good for their speed and purity of code. It is interesting to use them with a small amount of content and static pages when the project does not require frequent changes and content updates. They do not have control panels. Web pages need to be edited via code and then updated on the hosting, which is very inconvenient. This clarifies why many businesses decide to move their sites from HTML to WordPress – a popular content management system with a convenient admin panel and a huge selection of plugins and templates.
The use of CMS significantly increases the efficiency of the site administrator, especially when it is necessary to scale it. Opportunities for SEO optimization and refinement of functionality are also expanding. Transferring 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.
This guide speaks about the steps needed to migrate an HTML site to WordPress successfully. All of them can be done independently.
Getting Ready to Move Site from HTML to WordPress
The essence of the migration task is to convert static HTML pages into a format suitable for WordPress, which also uses PHP code and HTML / CSS. That is, transferring the code without optimization under the CMS will not work.
Suppose you need to keep the site’s current design (there is good traffic, the design is familiar and recognizable among your customers. In that case, you have to tinker with adjusting the current design to the WP format without changes. You can use plugins (which we will talk about later in this post).
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. It involves extra investments, but you will get a quality result.
Suppose you can afford to change the design without much damage to the sit. In that case, you can just take a more or less similar (or not at all similar) WordPress template, copy materials (manually or using plugins), add appropriate forms, communication channels, etc. that were on the original site, and get a site with former content that has been redesigned. This option is easier to implement.
First, you need to analyze what functionality is involved in the HTML-based website and find the appropriate plugins or built-in tools for WordPress. The CMS has many opportunities – everything is there for you. Make a checklist of essentials, and you will find them without any problems – so as not to miss anything. And don’t forget to back up the current version of the HTML site.
STEP 1 – CHOOSE HOSTING, INSTALL WORDPRESS AND CREATE A DATABASE
Choosing a hosting provider is the most important point. Its quality determines how your site will work – whether fast, stable, or easy to administer and make fine-tuning. Since 2005, Bluehost, the largest WordPress hosting provider serving more than 2 million domains, has been officially recommended by WordPress.org.
118 data centers are scattered around the world, headquartered in Utah. Servers to manage this entire empire there occupy about 5,000 square meters. Everything works on SSDs. A lot of space is allocated, even at the minimum rate for WordPress sites ($ 2.63 / month) allocate 50 GB.
The provider is famous for reliability, durability – your site will never be closed just because one of the competitors filed a fake or even well-founded complaint. Hosting servers work in the cloud, CDN technology is used, so their location does not affect the speed of sites.
You will need a new database to work with site materials. Go to the “Databases” section, then to the “Create a new database” field, then enter the username, database name and password to access it. Next, from the “Softaculous App Installer” section, select WP and start the automatic installation. In the process, you will need to specify the newly created database. Now you have hosting with WP installed and the database that is ready to work.
Bluehost provides round-the-clock technical support, donates a domain for the first year (if registration is required), free SSL, and provides 100% moneyback for 30 days. For optimized WordPress hosting, you will also receive automatic installation and upgrades to new versions, access to Microsoft Office 365, domain mail, hundreds of free templates, as well as a convenient and powerful control panel.
STEP 2 – WORK WITH THE DESIGN
Depending on which way you choose – the selection of a similar topic, the use of the plugin to transfer the existing or its manual adaptation to use in conjunction with WP – you can opt for three different algorithms. We present them in general terms.
Choose a new template
Find the template store using the “Design” section in the control panel in your site’s dashboard. Choose the right one, install it with one 1 click and make it active. You can adjust its design to your requirements (logo, columns, colors, background, etc.). The easiest way is to create a site from scratch on WP with a new template and then adjust its functionality and transfer content.
HTML template conversion
At this stage, third-party web services that can help you process and generate a suitable WP design based on the HTML theme (like Theme Matcher) will come in handy to you. Just enter the current domain name, and the service converts the theme files to WP format. Then you download and install them using the control panel as a new template. Usually, the result is good but may require certain refinement. This is the best option for those who want to keep the design (at least the basic elements) but do not have programming skills.
Manual adaptation of the template under 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 dig into the HTML template, selecting the necessary elements (styles and HTML structure) and inserting them into the desired files of the future WP template. You will also need to add elements of CMS syntax in different areas for the theme to be accepted by the system. This is a job for a specialist. Beginners can not afford it, so we will not even describe the process in detail.
STEP 3 – CONTENT TRANSFER
Transfer materials manually
If you have little content, it’s best to use this option. For this purpose, it is necessary to copy the HTML code of materials in the editor. We copy only the code enclosed in the <body> </body> tags. Everything above or below is a technical part that is not required for WordPress pages. You will need a separate copy of the pictures – it is better to leave their names the same, then the code will pick them up as is. Don’t forget to add SEO data through the editor or the interface of the corresponding plugin.
The method can lead to some display errors – it depends on the nature of the content and the WordPress template you use. Most likely, something will have to be corrected manually, bringing the formatting to the desired condition.
Important: If the link structure on the new site is different from the old one, it will stop working. You will need to configure 301 redirects to redirect visitors from old links to new ones (with small amounts of content you can edit .htaccess) or edit all site links to a new format (manually or using a plug-in like Redirection).
Automatic transfer with a plugin
This method is advantageous to those websites that have a large collection of articles published on their pages. The most popular plugins for automatic transfer are Import HTML Pages and HTML Import 2, which can be installed from the control panel by searching by name in the plugin library. They give a very similar result. The quality of design adaptation is at an average level. Much will have to be completed manually. But the plugin will help to perform routine work in large quantities, saving a lot of time and effort.
STEP 4 – PERFORMANCE TESTING
It’s time to check the work of the new site on several points:
- Broken links. Make sure all links are working. If there are many pages and links, it is better to use the Xenu’s link sleuth or their plugins for checking links.
- Beaten links. If you converted the design or created the template manually using the old one, there may be display errors. Inspect everything – additional actions may be required to resolve the issue.
- Functional disorders. Test everything on the site – forms, social panels, buttons, navigation, various options, players, etc. Make sure it all works properly.
STEP 5 – CONNECTING THE DOMAIN TO THE NEW SITE
So, you already have a WordPress-based site with customized design, functionality, and transferred content. Now you need to move from the technical domain to your own. Whichever registrar you buy the domain from, the next step you should take is to correct the values of DNS servers in the domain control panel to those used by the new hosting provider.
Important: if your domain has been registered in the last 60 days, you will have to wait for the same time for the transfer. This is ICANN’s policy, the process cannot be accelerated. You also need to disable anti-theft protection in the domain control panel.
When you move an HTML site to WordPress, the easiest way to use the updated design is to choose one of the ready-made templates. Plugins will help you in many stages, but you will not avoid manual work and programming completely. Pay attention to testing, do not forget to configure the necessary redirects, check the functionality of links and other functionality, and fill in the SEO parameters. Pick up and install the required plug-ins in advance.
For example, we have described an algorithm when you plan to change the hosting provider for a new site to WP. It is also possible to fill the WordPress site on the hosting that serves the current HTML site. You can build an updated site on the localhost (Openhost, Denwer, etc.) and then fill it there, fixing wp-config under the existing database and removing the old site from there. But this is a slightly different story.