Get Started Today, it's Easy!

How to Convert a Static HTML Website to WordPress

The process of transferring any website between the platforms, including the conversion of a static HTML website to a dynamic WordPress project, can be conventionally divided into 2 main parts: creation of a new template or modification of the existing theme and data transfer (this includes texts, images and other content).

There is no single approach to the transfer process as the procedure is very individual. It is one thing when you can create a similar site, without transferring all the details, address structures, content etc. The main thing is that the website works, is indexed and your contacts are there. And it is another thing when you have a website with hundreds or even thousands of pages, created with a website builder (like Wix, uKit etc.), which can’t be moved in one click. You will have to transfer each page manually or write a special parser for your project structure to further correct everything manually.

But what if you have a complex address structure and need to save all URLs not to lose positions in the search results? What if the switch to a similar template won’t work? Or if the old website is not responsive and you need to make it mobile-friendly? There are multiple nuances you may encounter during the transfer process.

Transfer from HTML to WordPress: Step-by-Step Guide:

  1. Preparation Stage
    1. Creation of backup copies of the old website
    2. Analysis of web page structure, menus and content blocks
    3. The choice of the best transfer method
    4. Hosting purchase and set up
  2. Design Transfer
    1. Similar template choice
    2. Purchase/installation of a new template (without connection to the old design)
    3. Adjustment of design to WordPress (HTML conversion to WordPress)
    4. Creation of unique template from scratch
  3. Data Transfer
    1. Manual copying of information and media content
    2. Parsing of the old website and converting the key info to the chart format
    3. Automated filling of the new website database from the parsing base
  4. Partial process automation
    1. Scripts and services for transfer
    2. Automatic choice of a suitable template
  5. Final Stage
    1. Redirection of domain to a new host
    2. Check up of old URLs’ paths/structure preservation
    3. Redirects set up (if required)
    4. Verification of important meta tags (titles, descriptions)
    5. Check up of web page and media files display
    6. Check up of forms, contact info
    7. Installation of analytics codes
    8. Monitoring of situation in the webmaster panel

When working on your website transfer, you can omit those points you consider unnecessary or not that important for your particular project.

Preparatory Notes

Your new website version should preserve the most important and effective nuances. Thus, it makes sense to explore the old version of your project in detail:

  • Define the data that requires/does not require transfer. Some pages may have been uninformative or penalized by the search engines and excluded from the search results as useless etc.
  • Check the structure of available menus, page addresses, categories (if any). Do they require improvement or optimization?
  • Detect the most important web pages and other website elements that are essential for its effective work. For example, these can be pages with contact information, feedback forms, online chats etc.
  • Parse the old website to see if the key meta tags are filled in and how efficiently this was done.

Backup

In most cases, an HTML site is actually a collection of static HTML pages in the hosting root. These are text files, the names of which strictly correspond to web pages URLs. Thus, all you need to do is to copy all the files from the root folder of your old hosting. Other data has to be copied along with .html. This includes additional directories like css, images or js, etc. They store additional content – scripts, images, videos etc.

Access to hosting, however, is not always preserved, especially if a website was launched by a third-party specialist and contacts with that person were lost. This is not to mention the fact that the pages could have been created in special website builders. In this case, access to the source code of pages may be completely blocked.

If this happens, you can use special software – offline browsers. Be careful, however: free or demo versions of the software often include additional information in the HTML code that prevents you from posting downloaded pages on another host.

WordPress Hosting Set Up

On the one hand, any hosting that supports dynamic websites should be suitable for WordPress (you need PHP + MySQL for this). The choice of hosts is quite extensive, but there is always a risk to find an untrusted provider or the one that offers low quality services.

This will definitely affect website performance, its accessibility to users, the attitude of search engines and, eventually, your revenue.

Thus, we recommend playing it safe and choosing providers supported by WordPress developers, such as Bluehost. The company is known for its adequate pricing policy, high availability and stability, lots of positive reviews and special optimization for the best WordPress experience.

Bluehost-Dashboard

The cost of Bluehost plans starts at $2.95/mo. The company offers the money back policy, which extends for 30 days. You get everything you need to run one site for this price – 50 GB SSD, bonus domain, free SSL, CDN integration (for better accessibility in any place of the world).

If you have several websites, there are unlimited plans. Their cost starts at $5.45/mo. The plans include an opportunity to host any number of websites, unlimited disk space and extra services.

The Choice of the Best Transfer Method

Option 1. The most inexpensive solution is to find a similar template and to transfer the most important information only: contacts, description of key services, product range, your advantages etc. Afterwards, you’ll just have to set up contact forms, wait for re-indexing and continue developing the website on a new database. This is what you will be able to do:

  • add useful content;
  • describe all your services (basic and additional), so that each of them had its own page;
  • select new low-competitive key queries and create new useful materials for them etc.

This approach, however, does not always work best. This is especially true, if the old web pages have long been indexed by the search engines and have good traffic.

In this case, the number of clients from the search results can notably reduce and it will be difficult to get into the search results again, even for the same queries. It is better to maintain everything unchanged here (including the page URLs, meta tags and main content).

Option 2. This solution is a bit more time-taking and expensive than the first one. A similar template has to be chosen here as well, but the data is transferred as completely as possible. If it is impossible to maintain the address structure, it is a must to set up redirects here. They are set as 301 redirects in hosting settings, using the .htaccess file or special plugins for WordPress.

If your website does not have many pages (up to 100-200), then you will have to transfer them manually. This is a surefire way to retain the initial data look. When you handle the process in the automated mode, there is always the risk of getting multiple errors in the layout, absence of media files, violation of URL structure etc.

If the number of pages exceeds 100-200, then you still won’t go without automated processing. Standard scripts may not be up to the task, so, the need to involve professional programmers is quite high.

Option 3. This method is expensive, but reliable. You need to convert the HTML files of the old website to a WordPress template. If you don’t have experience and sufficient qualifications, it will be better to entrust the process to professionals. As soon as the template is ready, the data is transferred as in the second method: either manually or automatically (by scripts or parsers).

Option 4. The method implies the development of a new individual template with regard to your requirements and business specifics as well as careful data transfer. Yes, website design will change, but this may even be an advantage sometimes – a kind of rebranding – the transition to new technologies and a new business management format.

You won’t go without professional assistance here. You will need the services of professional developers, layout designers, adjustment of HTML to the software, writing custom functions, plugin installation etc. Everything will depend on your requirements and available budget. There is no ceiling value here.

You can even create a separate template version for mobile devices or a full-fledged application for smartphones. WordPress has everything you need to complete the task.

WordPress visual editor

Design Transfer

There is an incredible number of ready-made templates for WordPress. You will certainly be able to pick a suitable theme. This will be much cheaper than starting a website from scratch and faster than adjusting the old HTML to the software by web developers.

This, however, does not mean that this solution will work for any situation. The development of a unique template from scratch is a must for large-scale projects sometimes. Template search will also take much time and effort. Separate attention should be given to translation, detailed customization and “finishing” the template. These are the tasks not everyone can handle.

Similar Template Choice

Computer vision technologies are still far from perfect. No algorithm will be able to automatically select a complete analogue of your template. You will have to do that manually.

There is one crucial aspect here – many premium themes have multiple design customization options. Thus, it doesn’t make sense to stick to the only template provided by default. It is necessary to explore all the possibilities in detail. This, correspondingly, requires notable time investment.

To reduce the search time, you can sort out the templates by key parameters: niche, color scheme, eCommerce support, compatibility with plugins like Elementor (a high-quality block page builder with a notable freedom of actions) etc.

Elementor-Websites

As far as many themes can adjust colors and fonts, you need to explore the parameters of your old website:

  • Types and sizes of fonts used for:
    • homepage;
    • headings (H1-H5 or even H6 depending on the nesting level of your headings);
    • main text.
  • Color palettes:
    • background (color, image, video etc.);
    • menu and text background fill in the articles;
    • text color (main, headings, visited/unvisited links etc.).
  • To do this, you can use the developer console in your browser. It is even better to explore CSS style charts, if they are rendered in separate files (rather than written in the properties of each HTML element on pages).

    Some CSS properties can be changed using JS scripts after the pages have loaded in the browser. It is reasonable to make sure everything works as required.

    New Template

    Everything is simple here – choose any sample you like. There is an extensive number of free themes in the official WordPress catalog. You can search for high-quality premium templates on specialized platforms like ThemeForest or TemplateMonster. An important issue is that such themes may include special add-ons, which are separately distributed on a paid basis. This makes the purchase even more profitable.

    WordPress templates

    Adjustment of design to WordPress (HTML Conversion to WordPress)

    This is the most complicated process that cannot be mastered without understanding the basics of HTML, CSS, JS, PHP and the knowledge of WordPress API. Yes, the software is well-documented, but the documentation is mostly available in English. This may pose problems to users from other countries.

    If web page templates are simple, it will be enough to divide the design into main zones: header, main content output (blog post or webpage), sidebar, footer. You will also have to organize the output of key WordPress cycles:

    • menu;
    • post cycle;
    • sidebar;
    • other areas of widgets location (so that you could edit footer/header content, for example).

    Not to be confused with important template settings and typical WordPress template structure, it makes sense to download a kind of a “basis” (or framework). You can do this on a special website for developers – underscores.me (you just need to enter the desired name of your new template and click the Generate button then. If required, you can set the name of the template folder, its description and other parameters in the advanced settings).

    To reduce the amount of layout work, you can disable all unnecessary functions in the functions.php file (delete or comment out the // lines at the beginning):

    • translation support (load_theme_textdomain( ‘theme123’, get_template_directory() . ‘/languages’ ); line);
    • RSS links ( add_theme_support( ‘automatic-feed-links’ ); line);
    • custom background, logo, custom content width;
    • other options that won’t be used on your website.

    Then you have to transfer all your styles and JS scripts from HTML to WP template. To do this, you need either to copy the files to the template root and connect them in the functions file, or copy the contents of old CSS files from the HTML website folder to the style.css file. JS scripts are located in the JS theme folder catalog by default.

    Similarly, you can connect your own fonts (if you don’t use Google web fonts).

    Now, you only need to transfer the HTML markup. Everything is much more complicated here, though. Content areas in WordPress templates are divided into special blocks. Each of them is presented by its own PHP file:

    • 404.php (for 404 error template);
    • archive.php (archive post template);
    • comments.php (the area for displaying the comments tree, if they are on a site);
    • footer.php (website footer only);
    • header.php (menu header);
    • index.php (homepage and the logic for the formation of the main cycles);
    • page.php (page output template);
    • single.php (page template for a single blog post);
    • sidebar.php (sidebar template);
    • search.php (page with search results).

    HTML code transfer has to be done thoughtfully. You may just need to add only the missing classes in some parts (for example, in the menu), while other parts may require copying of the entire HTML blocks that correspond to a certain content type, adding the necessary call functions if required.

    Menu change, for example.

    The HTML variant:

    <div id="stuck_container" class="stuck_container">
    <div class="container">
    <nav class="nav">
    <ul data-type="navbar" class="sf-menu">
    <li class="active"><a href="./">Homepage</a>
    </li>
    <li><a href="index-1.html">About Us</a>
    <ul>
    <li><a href="#">Subparagraph</a></li>
    <li><a href="#">Another nested menu</a></li>
    <li><a href="#">Nested submenu
    <ul>
    <li><a href="#">Point1</a></li>
    <li><a href="#">Point2</a></li>
    <li><a href="#">Point3</a></li>
    </ul></a></li>
    <li><a href="#">Point N</a></li>
    <li><a href="#">Point N2</a></li>
    <li><a href="#">Point N3</a></li>
    </ul>
    </li>
    <li><a href="index-2.html">Services</a>
    </li>
    <li><a href="index-3.html">FAQ</a>
    </li>
    <li><a href="index-4.html">Contacts</a>
    </li>
    </ul>
    </nav>
    </div>
    </div>

    Header.php variant:

    <div id="stuck_container" class="stuck_container">
    <div class="container">
    <nav class="nav">
    <?php
    $args = array(
    'theme_location' => 'menu-1',
    'menu' => '',
    'container' => '',
    'container_class' => '',
    'container_id' => '',
    'menu_class' => 'sf-menu',
    'menu_id' => '',
    'echo' => true,
    'fallback_cb' => 'wp_page_menu',
    'before' => '',
    'after' => '',
    'link_before' => '',
    'link_after' => '',
    'items_wrap' => '<ul id = "%1$s" data-type="navbar" class = "%2$s">%3$s</ul>',
    );
    wp_nav_menu( $args );
    ?>
    </nav>
    </div>
    </div>

    The main function for menu output – wp_nav_menu( $args), you just need to edit the ID menu here (‘theme_location’ => ‘menu-1’).

    Do not forget to create the menu in the corresponding website settings.

    It is possible to output separate templates for different page types in WordPress. You can do this by adding the file page-your-template-name.php to the template root with the content:

    <?php
    /**
    * Template Name: Your Template Name
    */
    get_header();
    ?>
    <section>
    <?php if (have_posts()): while (have_posts()): the_post(); ?>
    <?php the_content(); ?>
    <?php endwhile; endif; ?>
    </section>
    <?php get_footer(); ?>

    You can create a new page with the selected template in the admin panel now and then fill it with your own HTML code from the old website page (if you don’t wish to single out separate blocks and divide the content into different segments). As far as the HTML code will be inserted with the styles you have already connected to the template in the functions.php file, you don’t have to style anything separately.

    If you don’t need to output the header and/or footer, they can be excluded for a certain template. You have to understand, however, that not only the menu is displayed in the header. Scripts/styles are also connected there, meta tags are displayed etc.

    It makes sense to single out the segments for the sidebar, footer etc. in a more complex transfer, but this content will have to be managed in separate sections of the admin panel.

    Creation of Unique Template from Scratch

    Only professionals can help you here. Even if you can independently adjust the HTML template to the software, you should initially create a quality design layout and cut it into HTML tags. Web designers and layout developers will help you with that.

    Data Transfer

    This is the most complicated and time-consuming process.

    If you followed the template-related approach we have indicated, then you can transfer the data by simply copying the HTML code into the body of the pages (excluding the header and footer areas as it is reasonable to make them end-to-end for the entire website).

    Manual transfer, however, is not always convenient, especially if you have hundreds or even thousands of pages in the old website, embedded forms in the text etc.

    Manual Copying of Information and Media Content

    Images from web pages should preferably be moved to the “/wp-content/uploads/” catalog. Keep in mind, however, that manually uploaded images won’t be displayed in the admin panel (the software won’t know anything about media content, if it is loaded bypassing standard forms).

    You will have to adjust all paths (links) pointing to images and other media content to make them match the new (current) location.

    When you transfer the content of individual pages, be sure to fill in the meta tags (title and description). Otherwise, the quality of indexing will notably decrease.

    Check web pages for errors and layout problems after publishing.

    Automated Filling of the New Website Database from the Parsing Base

    The number of automated HTML to WordPress transfer tools is quite limited. Usually, unique scripts that take into account the structure of the HTML website are developed, because it may drastically differ from one site to another.

    If the old website version works on one of the website builders, you can try to quickly migrate using the RSS feed. You need to download the RSS feed of the old website and then upload it to your WordPress site using a special import plugin.

    There is a special online website migration service between different CMS systems – CMS2CMS. However, it is paid. To choose the migration option, you need to pick the HTML to WordPress format. It costs $49 to transfer 250 entities here. To make sure the quality of the transferred data is ok, it makes sense to preliminary use the demo mode (it is free and will help you understand whether a script will work for your website or not).

    Bottom Line and Recommendations

    Website usability should not be affected during the transfer process. If visitors are not able to use the new project version, then it doesn’t make any sense even to start the migration.

    After the data is transferred to the main server and hosted there, you have to point the domain name and wait for the DNS system to update (the process may sometimes take around 1-3 days).

    Never delete the old website right after the transfer is over. Make sure the new one works well instead. Check the website under load, view all webpages, check the performance of online forms and other interactive elements. Scan (parse) a new website to detect the following problems:

    • whether the meta tags are specified everywhere;
    • whether there is no inaccessible content or non-existent/blank pages;
    • if there are any errors in the URLs;
    • whether redirects are set up correctly (if you have done that) etc.

    Make sure to track messages in the Google webmaster panel. All the detected errors should be analyzed and corrected as soon as possible.

    In fact, the process of transferring a website from HTML to the dynamic software, especially to WordPress, is quite simple and straightforward. Beginners will definitely have to improve some knowledge, but this is generally fixable and feasible. The main thing is not to be afraid and to strictly follow the above-listed plan. This is a surefire way to retain both your data and website positions in the search engine results.

    Howard

    About the Author

    I'm Howard Steele, the founder and editor-in-chief of this website. With over 10 years of web building I know how complicated and tiresome this task can be for a non-IT person. Can’t decide which service to choose? Feel free to ask me for advice. Just describe your website needs, and I’ll gladly help you.

    » Helpful Tips » How to Convert a Static HTML Website to WordPress