Convert HTML to WordPress – A complete Process

  • html to Wordpress

    You may be aware of the fact that WordPress is a highly popular platform for website development. But, do you know what makes WordPress so popular? Well, even if you don’t know, we will let you know the same.

    WordPress is popular among businesses and developers for multiple reasons that include open-source, SEO-friendly, perfect for building varieties of websites, easy to use, easy to customize, vast community base, and lots more.

    Besides, WordPress also emerged as a complete solution for website development and witnessed its huge acceptance among businesses from multiple industries to a wider extent.

    After going through the above benefits of WordPress, you may be excited to convert your website developed in HTML to WordPress to harness all these advantages. In this blog, we are going to explain a complete process that a professional company uses to convert the HTML site to WordPress


    Checklist to Convert HTML to WordPress

    Before we move to explain the process to convert HTML site to WordPress, make sure that you have the following important things.

    ● Get a hosting service
    ● Code editor
    ● Perform installation work and set up a local server environment.
    ● Select and download text editor


    Preparation for HTML to WordPress Conversion

    Take a look at certain steps that you need to follow to make an active preparation to convert HTML site to WordPress.


    Create a Separate Folder for the Project

    First and foremost, you need to focus on the directory, where you can store your WordPress files. You can do the same while focusing on your local server. Here, you can make a folder for the project. Once you create the folder, you can then name it and move all files into it.

    Build Database

    Now, you need to develop a database, while ensuring that your local server is working properly.

    Install

    Once you build the database, you are now ready to install it.


    What are the Methods to Convert HTML to WordPress?

    After going through the above steps, you are now ready to convert your HTML site to WordPress. Let’s discuss here various important methods to convert HTML to WordPress.

    Develop WP Theme

    This method is important for those who wish to create a new WordPress website that is related to your existing HTML site. In this process, developers have to first create a WordPress theme from a static HTML template.


    Create Basic Files and Theme Folder

    Now you can initiate the process by creating a new theme folder on the desktop and you can then name the folder. Open the code editor and then create several other files, which are mentioned as follows.

  • header.php
  • index.php

  • style.css

  • footer.php

  • sidebar.php

  • Move your Existing Website CSS to WP Style Sheet

    To create a WP style sheet, you can just copy your old CSS code into the same. And then you can access the style.css file and then paste its code. In this, developers also get the option to edit certain details such as description, URL, author, theme name, etc.

    /*

    Theme Name: My Theme

    Author: Anonymous

    Author URI: https://xpresswp.com/tutorials/author/aonymous

    Description: A development theme, from static HTML to WordPress

    Version: 1.0

    License: GNU General Public License v2 or later

    License URI: http://www.gnu.org/licenses/gpl-2.0.html

    */

     

    Split Up the HTML of your Existing Website

    Now, you have to divide HTML of your existing website into different pieces and ensure that it can be put together in a perfect way. In case, if you think the process is quite tough, you don’t need to worry at all.

    All you need to do is to take a look at the code of your website. In the next step, you need to now access your old static website index.html files. You need to split it into newly built WP files.

    header.php stores everything, be it old HTML code from scratch or content area. The main content area is generally expressed as <main> or <div class=”main”>. You can copy and paste this code <?php wp_head();?>. This is the right way to make sure that your WordPress plugins work in a proper way.

    <!DOCTYPE html>

    <!–[if lt IE 7]><html lang=”en-US” class=”ie6″><![endif]–>

    <!–[if IE 7]><html lang=”en-US” class=”ie7″><![endif]–>

    <!–[if IE 8]><html lang=”en-US” class=”ie8″><![endif]–>

    <!–[if IE 9]><html lang=”en-US” class=”ie9″><![endif]–>

    <!–[if gt IE 9]><html lang=”en-US”><![endif]–>

    <!–[if !IE]><html lang=”en-US”><![endif]–>

    <head>

    <meta charset=”UTF-8″ />

    <meta name=”viewport” content=”width=device-width” />

    <title>WordPress development company | xpressWP</title>

    <link rel=”stylesheet” type=”text/css” media=”all” href=”style.css” />

    <link href=”https://fonts.googleapis.com/css?family=Assistant|Oswald” rel=”stylesheet”>

    <?php wp_head();?>

    </head>

    <body>

      <div class=”header-bg”>

        <header role=”banner”>

          <hgroup class=”site-name three-quarters left”>

            <!– site name and description – site name is inside a div element on all pages except the front page and/or main blog page, where it is in a h1 element –>

            <h1 id=”site-title” class=”one-half-left”>

              <a href=”https://xpresswp.com/” title=”xpressWP” rel=”home”>xpressWP</a>

            </h1>

            <h2 id=”site-description”>WordPress conversion and development</h2>

          </hgroup>

          <div class=”right quarter”>

              <a class=”toggle-nav” href=”#”>☰</a>

          </div> <!– .right quarter –>

        </header><!– header –>

      </div><!– header-bg–>

      <!– full width navigation menu –>

      <nav class=”menu main”>

        <div class=”skip-link screen-reader-text”><a href=”#content” title=”Skip to content”>Skip to content</a></div>

        <div class=”main-nav”>

          <ul class=”menu”>

            <li class=”menu-item”><a href=”https://xpresswp.com/”>Home</a></li>

            <li class=”menu-item”><a href=”https://xpresswp.com/about-me/”>About Me</a></li>

            <li class=”menu-item”><a href=”https://xpresswp.com/services/”>Services</a></li>

            <li class=”menu-item”><a href=”https://xpresswp.com//“>For Agency</a></li>

            <li class=”menu-item”><a href=”https://xpresswp.com/blog/”>Blog</a></li>

            <li class=”menu-item”><a href=”https://xpresswp.com/contact/”>Contact</a></li>

          </ul>

        </div>   

      </nav><!– .main —

    sidebar.php contains the section like <aside … </aside> in your existing HTML code. When you complete it and save the files it appears like;

    <aside class=”sidebar one-third right”>

          <aside class=”widget-area”>

            <div class=”widget-container”>

              <h3 class=”widget-title”>Services</h3>

              <img width=”242″ height=”300″ src=”https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/[email protected]?v=1″ alt=”WordPress: Pushing the Limits by xpressWP” style=”max-width: 100%; height: auto;” />

              <p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>

            </div>

          </aside>

        </aside>

    footer.php, contains every detail up to the end of the file. You need to add the code like <?php wp_footer();?> before you close the bracket </body>, and then save it.

    </div><!– .main –>

      <footer>

        <div class=”fatfooter”>

          <p>Add footer content here with <a href=”#”>widget areas</a> – this blog will show you how.</p>

        </div>

      </footer>

      <?php wp_footer();?>

    </body>

    </html>

    Now, you have completed the old index.html file. So, it’s time to close this file with your theme folders. Meanwhile, you are advised to not close files like index.php and header.php. 

    Convert Style to WordPress Format

    In the header section, you can now easily convert the style sheet from your existing HTML style to the WordPress format. You can access the <head> section to search for the existing link. You will see it like this;

    <link rel=”stylesheet” type=”text/css” media=”all” href=”style.css” />

    You can replace it with this;

    <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

    Now, all you need to do is to save the header.php file and then close it.

    You should now move to the index.php file. Here, you have to paste the following code;

    <?php get_header(); ?>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    Here, the space between the header and sidebar is easily visible. So, you can use this space to add Loop, which is useful in adding dynamic content to your new website. The Loop tends to format content in accordance with the matching standards within The Loop tags.

    <?php while ( have_posts() ) : the_post(); ?>

      <article class=”<?php post_class(); ?>” id=”post-<?php the_ID(); ?>”>

        <h2 class=”entry-title”><?php the_title(); ?></h2>

        <?php if ( !is_page() ):?>

          <section class=”entry-meta”>

          <p>Posted on <?php the_date();?> by <?php the_author();?></p>

          </section>

        <?php endif; ?>

        <section class=”entry-content”>

          <?php the_content(); ?>

        </section>

        <section class=”entry-meta”><?php if ( count( get_the_category() ) ) : ?>

          <span class=”category-links”>

            Posted under: <?php echo get_the_category_list( ‘, ‘ ); ?>

          </span>

        <?php endif; ?></section>

      </article>

    Now it’s time to save and close your index.php file. And you have developed a WordPress theme and add to your new site. 

    Upload Theme to WordPress

    After theme development, your next job is to upload the theme on WordPress, while ensuring that all files that the theme folder contain should remain in the same place. In order to do it successfully, you can zip the files.

    You can upload the themes to WordPress in the following steps.

  • Go to ‘Admin Dashboard’ of WordPress.

  • Tap to appearance and then Themes

  • You can now go to ‘Add a New’ section to Upload Themes

  • You can go to the Menu section, and then easily discover your theme’s files, in order to upload the themes. And then you can tap ‘Install Now’. You are advised to never miss to activate the theme.  

    Keep Only the Content and Forgo Design

    This is the right option for those who wish to use a new theme instead of a website design. Content importing is easy in this method.

    All you need to do is to install and activate the theme that you want to use and then follow a couple of steps.

    Import Plugin 2 Installation

    To install Import Plugin 2, you can consider the following steps.

  • Hover on Plugins

  • Go to ‘Add New’ and use its name to search.

  • Tap on Install and Active.

  • Make Preparation to Import

    To import, you need to make preparation by considering the following important steps.

  • Hover on WordPress Settings

  • Click on HTML Import.

  • Import your content

    After following the above steps, you are ready to import the content. You will be able to spot Import Files Button only if you have saved the settings. In case, you miss to save it, you will be able to access it by following the steps below.

  • Go to Tools

  • Hover on the ‘Import’ option

  • Click on ‘Run Importer’

  • Conclusion

    After going through the above post, you are now expected to have a better understanding of the checklist, preparation, and process of HTML to WordPress conversion. Businesses can hire WordPress developer to convert the HTML site to WordPress.

Want 10% Off Your First Project?

Enter your email and we’ll send it right over!