Html to WordPress

HTML to WordPress

Html to WordPress

Are you considering converting your static HTML site to a more dynamic WordPress site? Good thinking! WordPress currently powers 35% of all websites on the internet and has grown to be the most popular among other website builders.

Converting HTML to WordPress may seem like a very daunting task, but we’ll teach you how shortly. 

In this HTML to WordPress tutorial, you’ll learn two (2) ways of doing it; the manual method and the child-theme method.

Feel free to try any of the methods depending on your coding skills, time, money, and personal preference. Let’s go.

Content

WordPress vs HTML

Before we go into how to convert HTML to WordPress, let’s make a brief comparison between them.

Coding skills

Anyone can use WordPress. Yes, anyone. It requires little or no coding skills. HTML sites, on the other hand, require an in-depth knowledge of coding. If you love to code and are willing to spend time making every change, using an HTML site may be a good option. Otherwise, save yourself some stress and use WordPress.

Ease of Usage

WordPress uses an easy drag and drop interface. This makes content creation and management a walk in the park. We can’t say the same thing about an HTML site. So many lines of code aren’t so easy to handle especially for a beginner.

Flexibility

There are thousands of WordPress templates to choose from – free and premium. With just a few clicks, you can give a WordPress website a new look. The case is different with an HTML site.

Functionality

With WordPress plugins, you can add more functionality to your WP site. No coding required. Just search for the plugin, install and activate it. Improving the functionality of an HTML site is also possible. It’s just more difficult to achieve.

Also, WordPress sites have great SEO and Security features.

Before you Convert HTML to WordPress

We have dealt much on how beneficial WordPress is over a static HTML site. But before you move to WordPress, you need the following:

  1. Web Hosting provider

    You need a hosting service for your new WordPress site. Take note that your website’s stability, speed,  and security largely depends on your web host. So, be sure to go for the best. We have made a list of the best WordPress hosting providers in order for you to make the most informed decision. On the other hand, you can install WordPress on localhost and then go live later on.

  2. WordPress installation

    If you haven’t installed WordPress, do so. Read our WordPress resource on how to create a WP site in three easy steps.

  3. Code editor

    This will be useful for handling your HTML codes. Notepad++, Sublime, and Aptana Studio are great examples.

We’ll be explaining how to convert HTML to WordPress using 2 methods, viz Manual and Child Theme. For many users, the child theme method will be easier to follow. But if you have WP experience, you may prefer the manual method.

Side Note: if you do not feel comfortable working with codes or WordPress, you can hire an expert to do this for you. Otherwise, roll up your sleeves and let’s get to work.

First Method: Convert HTML To WordPress With A Theme

You may decide to retain the design on your HTML website. Often because you want your site visitors to have the same experience as they did on your HTML site. If that’s so, follow this procedure.

As we mentioned, this method requires more experience, and more work to make complete. Meaning you do not get the full features of a WordPress theme unless you code them in one after the other later on (info that cannot be covered here).

On the plus side, this option gives you full customization of your theme as you will be putting all parts in there.

Ideally, only use this option if you are quite confident in coding, or if you want to get a developer to help you with it.

Ready to start? Let’s go.

Step 1: Create a theme folder to hold your theme files

Create a new folder on your computer and give it a name such as my-theme. Then, open your code or text editor and create five (5) files namely;

  • style.css
  • header.php
  • sidebar.php
  • Footer.php
  • index.php

We’ll work with these files one after the other, starting with style.css

Step 2: Create a WordPress Stylesheet from the Existing CSS

The style.css file we created in the previous step is our WordPress style sheet. Since we intend to maintain the style of the existing HTML site, we’ll use its CSS code. CSS is what determines how your website looks. So, open your style.css file and paste the following header code:

 

/*
Theme Name: (fill in the name of your theme).
Theme URI: (here goes the theme‘s homepage or your site‘s address)
Author: (Fill in your name here)
Author URI: (your site‘s address)
Description: (you may choose to leave this out, it‘s just a brief description of your theme)
Version: (what‘s your theme‘s version? This is optional as well.)

*/

Say, we’re creating a theme for FixRunner, the header would look like this:

/*
Theme Name: FixRunner
Theme URI: https://www.fixrunner.com
Author: Rumide
Author URI: https://www.fixrunner.com
Description: This is FixRunner’s default WP theme
Version: 1.0.0

*/

Afterward, copy and paste the existing site’s CSS in the WordPress style sheet. And then save the style.css file and close it. Easy, right! Let’s move on.

Step 3: Create your header, sidebar, and footer from existing HTML

As you recall, we created four .php files in the first step: header.php, sidebar.php, footer.php, and index.php. WordPress uses the first 3 PHP files to determine which part of the code is the header, sidebar or footer.

This method makes managing your code easy. As you know, every page on your site must have your header items, such as the navigation menu. The same goes for footers. And these parts do not change from page to page. Hence, it makes sense to keep them in their own file and pull them into pages.

That way if you needed to adjust your nav menu structure, or something else in your header, you edit just one file (header.php), and that does it for your entire site.

With that said, we’ll now show you how to divide your HTML code into parts (header, sidebar, footer).

Let’s see an example using the following code (you should use your site’s html in your index.html file for this). 

HTML Code

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
  <head>
    <title>internetPhenomenon</title>
    <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
    <link rel=“stylesheet” type=“text/css” href=“style.css” />
  </head>
  <body>
    <div id=“wrapper”>
      <div id=“leftcol”>
        <h1 id=“websitetitle”><span>internet</span>Phenomenon</h1>
        <div id=“nav”>
          <ul>
            <li><a href=“index.html”>Home</a></li>
            <li><a href=“about.html”>About Us</a></li>
            <li><a href=“services.html”>Our Services</a></li>
            <li><a href=“contact.html”>Contact Us</a></li>
            <li><a href=“privacy.html>Privacy Policy</a></li>
          </ul>
        </div>
       <div id=”maincontent”>
        <div id=“welcomebox”>
          <img src=“images/sheep.jpg” alt=“” />
          <h2>Welcome</h2>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id=“contentheading”>
          <h3>Home</h3>
        </div>
        <img src=“images/undercontentheading.jpg” alt=“” />
        <div id=“contentbox”>
          <div id=“content”>
            <p>
              <strong>internetPhenomenon</strong>, my first template contributed
              to <i>open source web designs</i>.
            </p>
          </div>
        </div>
        <img src=“images/leftcolfoot.jpg” alt=“” />
      </div>
      <div id=“rightcol”>
        <div class=“section”>
          <h2>Search</h2>
          <form action=“http://all-free-download.com/free-website-templates/”>
            <input type=“text” id=“searchInput” />
            <input type=“submit” value=“Go!” id=“searchSubmit” />
          </form>
        </div>
        <div class=“section”>
          <h2>News Update</h2>
          <p>Lorem ipsum dolor sit amet.</p>
          <div class=“posted”>Posted by <span>Admin</span></div>
          <div class=“date”>June 02, 2007</div>
        </div>
      </div>
    </div>
    <!– Footer –>
    <div id=“copyright”>
          Copyright &copy; Your Company, 2007-2008 <br />
          Designed by <a href=“http://aquaticus.us.to”>Aquaticus Studios</a>
        </div>
    <div align=“center”>
      This template downloaded form
      <a href=“http://all-free-download.com/free-website-templates/”
        >free website templates</a>
    </div>
  </div>
  </body>
</html>

It’s time to divide the codes into parts.

 

  • Header.php file:

Paste everything from the beginning of the code to the start of the main content area (the section from the start to the end of the yellow highlights). Also you should add this line of code: <?php wp_head();?> right before the </head> tag. The purpose of this action is to ensure that WordPress plugins work as they should.

  • Sidebar.php file:

Copy and paste the section that starts with <div id=“rightcol”> into the sidebar.php file (the section from the start to the end of the green highlights). This section is what displays the sidebar (or in this case, right column) of your html site.

  • Footer.php file: 

Copy all lines of codes from the end of the sidebar to the end of the file and paste in the footer.php file (the section from the start to the end of the blue highlights).

Also, add this line of code <?php wp_footer();?> right before the </body>  tag. This will ensure your WordPress plugins work as they should.

That’s all for step 3. You can close all other files but we still have some work to do in header.php and index.php files.

Step 4: Edit the Header.php

Look through the header.php file, you’ll come across this line of code within the <head> section:

<link rel=“stylesheet” href=“style.css”>

Now replace it with the following:

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

Great! We have successfully converted the ‘call for style sheet’ from HTML to WordPress format. We are done with the header.php file. You can save and close it now.

 Step 5: Edit the Index.php files

Copy and paste this code on top of the index.php:

<?php get_header(); ?> 

Leave a space, then paste these lines of code.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

As you may be able to tell already, the first one (get_header) pulls in the header.php file into the index.php file we’re editing. Likewise, the next 2 pull in the sidebar and footer.

All your main content is generally placed between the header and sidebar (the space we left above).

For index.php, we will paste the Loop within this space. The loop is a PHP code snippet that displays your posts.

So, paste the following after <?php get_header(); ?> 

<?php if (have_posts()) : ?>
<?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() ):?>
      <div class=“entry-meta”>
      <p>Post date <?php the_date();?>. Posted by <?php the_author();?></p>
      </div>
    <?php endif; ?>
    <div class=“entry-content”>
      <?php the_content(); ?>
    </div>
    <div class=“entry-meta”><?php if ( count( get_the_category() ) ) : ?>
      <span class=“category-links”>
        Posted under: <?php echo get_the_category_list( ‘, ‘ ); ?>
      </span>
    <?php endif; ?></div>
  </article>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

Save the index.php file. Now, to the final step.

Step 6: Upload theme

Now that we have successfully completed the theme folder, it’s time to upload it to WordPress. To do this paste or upload the theme folder in /wp-content/themes/ (in your WordPress folder). Now go to your WordPress dashboard and open Appearance >> Themes.

If you have followed our steps accordingly, your new theme will appear in the list of themes. Go on to activate it.

If you are not comfortable with the amount of manual work involved in this method, the next method is less daunting.

Second Method: Using a Child Theme

In this method, we’ll be using a WordPress Child Theme. A child theme is one that exhibits the styling and functionality of another theme (parent theme).

Aside from being easier, you also end up with a more robust theme with important functions like controlling menu items from the “Themes” menu.

Let’s now see how to convert your static HTML site to WordPress via a child theme.

Step 1: Choose a theme

The first step is to select a theme that is similar to your existing HTML design. See out list of the top 10 free WordPress themes, or you could go for a paid theme. Once you have made a choice, install the theme but don’t activate it. This theme only acts as a base, we will work more with the child theme.

Step 2: Create a theme folder

The theme folder will contain files relating to the child theme. Give the folder a name that is related to the parent theme (e.g. “parent theme’s name-child”). Assuming we’re creating a child theme for the Twenty Twenty WP theme, the folder should ideally be named twentytwenty-child.

Within this folder, we will be creating our style.css and functions.php files.

Step 3: Create a Style Sheet

Open a new file in your code editor and save it as style.css. Then copy and paste the following lines of code (edit as required).

/*
Theme Name:   Fill in the name of your theme
Theme URI:    Your theme’s URI
Description:  A brief description
Author:       you
Author URI:   your site’s address
Template:     Enter parent’s folder name
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, three-columns, right-sidebar, mobile-responsive
Text Domain:  parent-theme-child (e.g. twenty-seventeen-child)
*/

To illustrate this section properly, we will assume we want to create a child theme for Twenty Twenty WP theme. In that case, here’s how this header would look:

/*
Theme Name:   Twenty Twenty Child
Theme URI:    https://www.fixrunner.com
Description:  A child theme based on the WP 2020 theme
Author:       Rumide
Author URI:   https://www.fixrunner.com
Template:     twentytwenty
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, three-columns, right-sidebar, mobile-responsive
Text Domain:  twenty-twenty-child
*/

Of all these, take special note of the template item. The value must be the folder name of the parent theme, otherwise, your theme won’t work.

With this part added, copy and paste all your site styles from the HTML site. And then save this file.

Step 4: Create functions.php file 

It’s time to inherit the styling of the parent’s theme. To do this, create a new file and name it functions.php. Paste the following code into the file. 

<?php
function enqueue_parent_theme_styles() {
    $parent_style = ‘parent-style’;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
        get_stylesheet_directory_uri() . ‘/style.css’,
        array( $parent_style ),
        wp_get_theme()->get(‘Version’)
    );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_styles’ );

By pasting this code, the child theme automatically inherits the styling of the parent theme.

Step 5: Activate the Child theme

It’s time to activate your child theme. Simply add the theme folder to /wpcontent/themes/. And then visit your dashboard and activate the theme.

Completing Your Site

Whether you chose to use the manual or child theme method, you would need to move over the rest of your content when done.

Since you are now in WordPress, the will be done via the dashboard.

For example, to create a page, go to Pages > Add New in your dashboard.

Next, enter your page title (e.g. About Us), and begin creating your content.

Alternatively (and often easier), you can switch the content editor from  Visual to Text. And then copy the about us code from your HTML site to this page, taking care to ensure you exclude the header, sidebar, and footer parts (as these are already in your theme).

As you do, some things like images will become broken links, for these, switch back to the Visual editor and upload these images in the right places.

Note: If you are using Gutenberg editor (which will be the case if you just installed WordPress), you cannot switch from Visual to Text. Instead, add a new “Custom HTML” code block and paste in your HTML.

Finally…

Converting an HTML site to WordPress seems like a daunting task. But with some work and dedication, you can migrate your site from HTML to WordPress without issues. 

As you move to WordPress, you will need to get up to speed with the WordPress platform. Check our WordPress tutorials to learn more about WordPress. 

Also, you can extend your site’s functionalities by installing and activating WordPress plugins.  Wondering which plugin to download? Read our list of the best WordPress plugins every site should have.

Did you have any issues while converting from HTML to WordPress? Let us know in the comments below.