Converting a HTML website to WordPress isn’t as complicated as one might think. In fact, web design has since evolved to make website conversions to WordPress more seamless. The secret? Content management system (CMS) do the heavy lifting, while you – the website runner – tinker with your site and your settings, rather than spend copious amounts of time writing markups yourself.
In this essential guide, we’ll explore the following in converting your HTML website to WordPress:
- Why it’s important to make the conversion
- Your options, AND
- The steps in converting manually
Let’s jump right in!
Why It’s Important To Convert HTML To WordPress
When converting your website into WordPress, you’re essentially taking your existing data from the static and current HTML site, and transferring it into a WordPress theme. Think of it as a data transfer from one device to another; but the changes will apply to any format, since WordPress can be accessed anywhere (i.e., computer, phone, etc.).
Converting to WordPress makes it easier for your HTML site, when it comes to managing it. As a CMS, WordPress makes website conversions something that anyone can do – whether you’re a coder, or someone without coding experience. Normally, all it takes a few clicks (or taps, if on mobile) to convert your HTML site into a WordPress site.
Your Options In HTML-To-WordPress Conversion
With conversion in mind, you can do so in one of three ways. Your three options are as follows:
- Converting Manually
The most technical option of the three, this method implies that you use your existing code as a starting point for creating WordPress theme files. While some of it is a bit of coding – especially HTML, CSS, and a bit of PHP – most of it is just copying and pasting code.
While this method doesn’t give you the capabilities that WordPress has to offer, there’s only light coding that you’ll need to worry about.
- WordPress Child Theme
Your second option would be to use a WordPress child theme. This gives more room for conversion without needing much technical know-how. Rather than use your existing site as your starting point, you’ll instead use a ready-made WordPress theme, of which you can only adjust its design to make it look like your old website. In other words, you can use WordPress while keeping your original site’s look and feel, thus making it the “child” of the “parent” theme (the old site).
- Importing Using A Plugin
This third option is recommended ONLY IF you’re open to altering your site’s design. If you’re looking to change the look and feel of your site, then consider using WordPress plugins. Importing your HTML site into a WordPress one with plugins is simple:
- Step 1: Create A New Site
Set up your new site and install your chosen WordPress theme, ensuring that the template is easy to edit, so that it matches your branding.
- Step 2: Install Plugin
Search for a WordPress Plugin – HTML Import 2 – and then install it on your site by clicking “Install Now.”
- Step 3: Upload Pages
Once the plugin is up and running, upload your pages to the same server as your WordPress installation.
Under the Files tab, enter the following info:
- Directory to Import – the pathway you copied your existing HTML code to
- Old site URL (for redirect purposes)
- Default File – your index.html
- File extensions to import
- Directories to exclude
- File names that will be preserved as the new URL
Afterwards, go under the content tab and configure your site’s HTML tag. Here are the several tabs to know:
- The “Title and Metadata” tab tells the plugin how your titles are marked in the HTML template.
- The “Custom Fields” tab is where you import data into custom fields.
- The “Categories and Tags” tab let’s you assign categories to your imported content.
- The tools screen shows you the built-in tools found in the extension.
After going through every tab, be sure to save your settings, and click “Import Files.”
The How-To
Want to make your site into a WordPress one, but want to start from scratch? No problem!
While this process may seem intimidating at first, it actually isn’t. In fact, the process only consists of a few files and folders, along with copying and pasting.
Here’s a run-through of the process:
Step 1: Create Theme Folder And Basic Files
First, create a new theme folder on your desktop like you would for a directory. Customize your theme with a name. Then, go to the code editor and create numerous text files, naming them:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
NOTE: Keep these files open and untouched in the editor, because you’ll need them soon enough.
Step 2: Copy Existing CSS To WordPress Style Sheet
Next, you’re ready to copy your old site’s CSS into the WordPress style sheet (the filestyle.css you created in the previous sheet). To do this:
- Open the file
- Copy the existing CSS, AND
- Paste the existing CSS into to the WordPress Style Sheet.
Once you copy the existing CSS to the sheet, save the file in your new theme folder, and then close it.
Step 3: Separate Existing HTML
The next step involving separating the existing HTML from its database. This involves using PHP from WordPress to do the job, which means you’ll have to cut up the HTML into different pieces so that the CMS can piece them together by copying and pasting them into PHP files.
After that, save all of your other files to your theme folder. Then, close those files except for the header.php and index.php.
This takes us to the next step…
Step 4:Header.php And Index.php To WordPress
With the header.php and index.php still open, you now have the header. Here, you’ll finish the call for the style sheet from HTML to WordPress. To do this, look for this link in the <head> section:
<link rel=”stylesheet” href=”style.css”>
Next, replace that link with this:
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />
Then, save and close the header.php.
Afterwards, you’ll turn to index.php., which should be empty. In index.php., copy and paste these lines of code:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
These lines of code are the calls for the other files that contain the remainder of your site. The space between the call for the header and the sidebar is where you will add the “Loop,” the part of WordPress where the CMS outputs content that have been created in the backend. This part is crucial if you want WordPress to add content to your soon-to-be-imported pages. Just paste this after <?php get_header(); ?>:
<?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(); ?>7
</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>
<?php endwhile; ?>
After doing all this, save the index.php file and close it.
Step 5: Screenshot and Upload
Now that you have the header.php and the index.php files taken care of, you’ll now need to add a screenshot and upload your site.
First, add a theme screenshot that (in conjunction with the information from your style sheet header) will serve as a preview of your website when you upload it to WordPress. Just do the following:
- Open your existing site in a browser.
- Take a screenshot of your existing site using any method you prefer.
- Then, open any image editing software you use, and crop it to 880×660 pixels.
- Afterwards, save it as “screenshot.png” before adding it to your theme folder. Then you’ll be ready to upload your theme (which you’ll find some inside your theme folder).
Now, when getting the new theme onto your WordPress site, you have several options:
- The first option is to create a zip file. After creating a zip file, go to your WordPress site, and then to Appearance > Themes. Here, you can click “Add New” at the top, and then click on “Upload Theme.” Afterwards, use the button to find your zip file. Then, mark it and click “Open,” to where you can click on “Install Now.” After installation, you can activate the theme.
- Another option is to connect to your server via FTP (or the local directory on your hard drive) and navigate to the wp-content/themes. From there, you can upload your (unzipped) theme folder. Afterwards, be sure to activate the theme from the same place as before.
Your new site’s front end should now look the same as your old site. All that’s left to be done is to import your existing content.
Just keep in mind: While the basic theme works now, there are more things to do to better integrate your HTML with WordPress, including:
- Making blog titles and descriptions editable
- Adding widget areas
- Adding comments
- Adding a CSS markup (since your new content isn’t part of your original design), etc.
Conclusion
So, there you have it!
Converting your HTML site to WordPress isn’t as hard as one might think. By exploring your options, and learning how to navigate through the manual process, you’ll give your site a face-lift, thanks to WordPress.
Ashley Halsey is a writer and editor at Lucky Assignments Ediburgh. As a professional writer, she has been involved in many writing projects nationwide. In her spare time, she enjoys reading and travelling with her two children.