The different ways to convert HTML to WordPress<\/h2>
There are several methods of converting HTML to WordPress, and they come with different difficulty levels. They are as follow:<\/p>
- \n
- Creating a WordPress Theme from a static HTML site.<\/strong> If you prefer your old HTML website’s design intact, this option is for you. It’s also the most challenging route and requires coding. But, don’t get intimidated. All you need to do is copy\/paste the old HTML code into several PHP files.<\/li>\n\n\n\n
- Losing the design and keeping the content only.<\/strong> If you’re okay with leaving behind your old website design and find a WordPress theme for a fresh start, this option is for you. You only need to transfer the content to its new home.<\/li>\n\n\n\n
- Using a child theme adapted from an existing theme.<\/strong> This is probably the easiest route if you want to retain the old website’s design. With this method, you’ll use a pre-existing WordPress theme and build upon it. As a bonus, you can use WordPress’ powerful features right away.<\/li>\n<\/ul>
![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/Website-migration_in-text-banner-2-1024x300.png\")
<\/a><\/figure>Creating a WordPress theme from a static HTML site<\/h3>
If your goal is to create a WordPress website that resembles your old HTML site from scratch, you can start here. In this tutorial, we use a static HTML template<\/a> by Rachel McCollin.<\/p>
1. Create a theme folder and basic files<\/h4>
Create a new theme folder on your desktop and name it. We’re naming our folder as my-theme<\/strong>. After that, open your code editor and create the following files:<\/p>
- \n
- style.css<\/strong><\/li>\n\n\n\n
- index.php<\/strong><\/li>\n\n\n\n
- header.php<\/strong><\/li>\n\n\n\n
- sidebar.php<\/strong><\/li>\n\n\n\n
- footer.php<\/strong><\/li>\n<\/ul>
Note that some of these files might be optional, depending on your theme’s features and design. To learn more about their purposes, check out our article about creating a WordPress theme using HTML5<\/a>.<\/p>
After creating the files, leave the editor open. We’re going to come back to it later.<\/p>
2. Change old website CSS to WordPress style sheet<\/h4>
Now, we’re going to create a WordPress style sheet by copying your old CSS code into it. Go to style.css<\/strong> file, and paste this code:<\/p>
\/*\nTheme Name: My Theme\nAuthor: LakiGarang\nAuthor URI: https:\/\/hostinger.com\/tutorials\/author\/luqman\nDescription: A development theme, from static HTML to WordPress\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/\n<\/pre>
This code provides information to WordPress that it’s a theme stylesheet header. You can edit the details like the theme name, author and URL, description, etc.<\/p>
Right after the header, copy and paste your old CSS code into the file. Save and close it.<\/p>
3. Split up your old website HTML<\/h4>
WordPress uses PHP to pull information from its database. So, you need to split up your old website’s HTML into different pieces to make sure it can put them together correctly.<\/p>
![\"Sample](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/sample-website-preview.jpg\")
<\/a><\/figure><\/div>If this seems complicated, don’t worry too much, the process is quite straightforward. First, let’s see how our static website<\/a> and its code looks. <\/p>
<!DOCTYPE html>\n<!--[if lt IE 7]><html lang=\"en-US\" class=\"ie6\"><![endif]-->\n<!--[if IE 7]><html lang=\"en-US\" class=\"ie7\"><![endif]-->\n<!--[if IE 8]><html lang=\"en-US\" class=\"ie8\"><![endif]-->\n<!--[if IE 9]><html lang=\"en-US\" class=\"ie9\"><![endif]-->\n<!--[if gt IE 9]><html lang=\"en-US\"><![endif]-->\n<!--[if !IE]><html lang=\"en-US\"><![endif]-->\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width\" \/>\n<title>WordPress Writer and Instructor | RACHEL McCOLLIN<\/title>\n\n<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\">\n\n<\/head>\n\n<body>\n \n <div class=\"header-bg\">\n \n <header role=\"banner\">\n \n <hgroup class=\"site-name three-quarters left\">\n \n <!-- site name and description - site name is inside a div element on all pages execpt the front page and\/or main blog page, where it is in a h1 element -->\n <h1 id=\"site-title\" class=\"one-half-left\">\n <a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\">RACHEL McCOLLIN<\/a>\n <\/h1>\n \n <h2 id=\"site-description\">Fiction and Technical Writer<\/h2>\n \n <\/hgroup>\n \n <div class=\"right quarter\">\n \n <a class=\"toggle-nav\" href=\"#\">☰<\/a>\n \n <\/div> <!-- .right quarter -->\n \n <\/header><!-- header -->\n \n <\/div><!-- header-bg-->\n \n \n <!-- full width navigation menu -->\n <nav class=\"menu main\">\n \n <div class=\"skip-link screen-reader-text\"><a href=\"#content\" title=\"Skip to content\">Skip to content<\/a><\/div>\n \n <div class=\"main-nav\">\n <ul class=\"menu\">\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/\">Home<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/about-me\/\">About Me<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/books\/\">Books<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/bookclub\/\">Book Club<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/blog\/\">Blog<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/contact\/\">Contact<\/a><\/li>\n <\/ul>\n <\/div> \n \n <\/nav><!-- .main -->\n \n\n <div class=\"main\">\n \n <div id=\"content\" class=\"two-thirds left\">\n\n <article class=\"post\">\n \n <h2 class=\"entry-title\">Welcome to This Website<\/h2>\n \n <section class=\"entry-content\">\n \n <p>This site is comprised of one static HTML file.<\/p>\n <p>You will be able to add more content later via the WordPress admin screens.\n \n <h3>Here's a heading so you can check how it's styled<\/h3>\n <p>And another paragraph underneath.<\/p>\n <p>And a list:<\/p>\n \n <ul>\n <li>Item 1<\/li>\n <li>Item 2<\/li>\n <li>And so on...<\/li>\n <\/ul>\n \n \n <\/section><!-- .entry-content -->\n\n <\/article><!-- #post-## -->\n\n <\/div><!-- #content -->\n\n \n <aside class=\"sidebar one-third right\">\n\n <aside class=\"widget-area\">\n \n <div class=\"widget-container\">\n \n <h3 class=\"widget-title\">Buy My Book<\/h3>\n \n <img width=\"242\" height=\"300\" src=\"https:\/\/premium.wpmudev.org\/wp-content\/themes\/wpmudev-2015-1\/assets\/img\/projects\/snapshot-hero@2x.png?v=1\" alt=\"WordPress: Pushing the Limits by Rachel McCollin\" style=\"max-width: 100%; height: auto;\" \/>\n \n <p><em>WordPress: Pushing the Limits<\/em> will help you become a professional WordPress developer.<\/p>\n \n <\/div>\n \n <\/aside>\n\n <\/aside>\n \n <\/div><!-- .main -->\n\n\n <footer>\n \n <div class=\"fatfooter\">\n \n <p>Add footer content here with <a href=\"#\">widget areas<\/a> - the tutorials will show you how.<\/p>\n \n <\/div>\n\n <\/footer>\n\n<\/body>\n<\/html><\/pre>
Now, open your old static website index.html<\/strong> file, we’re going to split that into the newly created WordPress files. (The examples below are our markup).<\/p>
header.php<\/strong><\/p>
Everything from the beginning of your old HTML code up to the main content area goes into this file. The main content area usually expressed with <main><\/strong> or <div class=”main”><\/strong>.<\/p>
Additionally, right before the <\/head><\/strong> element, copy and paste this code <?php wp_head();?>. This ensures WordPress plugins work properly. When you finish, save the file.<\/p>
<!DOCTYPE html>\n<!--[if lt IE 7]><html lang=\"en-US\" class=\"ie6\"><![endif]-->\n<!--[if IE 7]><html lang=\"en-US\" class=\"ie7\"><![endif]-->\n<!--[if IE 8]><html lang=\"en-US\" class=\"ie8\"><![endif]-->\n<!--[if IE 9]><html lang=\"en-US\" class=\"ie9\"><![endif]-->\n<!--[if gt IE 9]><html lang=\"en-US\"><![endif]-->\n<!--[if !IE]><html lang=\"en-US\"><![endif]-->\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width\" \/>\n<title>WordPress Writer and Instructor | RACHEL McCOLLIN<\/title>\n\n<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\">\n<?php wp_head();?>\n<\/head>\n\n<body>\n \n <div class=\"header-bg\">\n \n <header role=\"banner\">\n \n <hgroup class=\"site-name three-quarters left\">\n \n <!-- site name and description - site name is inside a div element on all pages execpt the front page and\/or main blog page, where it is in a h1 element -->\n <h1 id=\"site-title\" class=\"one-half-left\">\n <a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\">RACHEL McCOLLIN<\/a>\n <\/h1>\n \n <h2 id=\"site-description\">Fiction and Technical Writer<\/h2>\n \n <\/hgroup>\n \n <div class=\"right quarter\">\n \n <a class=\"toggle-nav\" href=\"#\">☰<\/a>\n \n <\/div> <!-- .right quarter -->\n \n <\/header><!-- header -->\n \n <\/div><!-- header-bg-->\n \n \n <!-- full width navigation menu -->\n <nav class=\"menu main\">\n \n <div class=\"skip-link screen-reader-text\"><a href=\"#content\" title=\"Skip to content\">Skip to content<\/a><\/div>\n \n <div class=\"main-nav\">\n <ul class=\"menu\">\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/\">Home<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/about-me\/\">About Me<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/books\/\">Books<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/bookclub\/\">Book Club<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/blog\/\">Blog<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/contact\/\">Contact<\/a><\/li>\n <\/ul>\n <\/div> \n \n <\/nav><!-- .main --><\/pre>
sidebar.php<\/strong><\/p>
Everything belonging to the section <aside … <\/aside><\/strong> in your old HTML code, goes into this file. When you finish, save the file.<\/p>
<aside class=\"sidebar one-third right\">\n\n <aside class=\"widget-area\">\n \n <div class=\"widget-container\">\n \n <h3 class=\"widget-title\">Buy My Book<\/h3>\n \n <img width=\"242\" height=\"300\" src=\"https:\/\/premium.wpmudev.org\/wp-content\/themes\/wpmudev-2015-1\/assets\/img\/projects\/snapshot-hero@2x.png?v=1\" alt=\"WordPress: Pushing the Limits by Rachel McCollin\" style=\"max-width: 100%; height: auto;\" \/>\n \n <p><em>WordPress: Pushing the Limits<\/em> will help you become a professional WordPress developer.<\/p>\n \n <\/div>\n \n <\/aside>\n\n <\/aside><\/pre>
footer.php<\/strong><\/p>
Now, everything up to the end of the file should be the footer information, which goes into this file.<\/p>
Just before the closing bracket <\/body><\/strong>, add this code <?php wp_footer();?> for the same reason as in header.php<\/strong>. When you finish, save it.<\/p>
<\/div><!-- .main -->\n\n\n <footer>\n \n <div class=\"fatfooter\">\n \n <p>Add footer content here with <a href=\"#\">widget areas<\/a> - the tutorials will show you how.<\/p>\n \n <\/div>\n\n <\/footer>\n <?php wp_footer();?>\n<\/body>\n<\/html><\/pre>
Now you’re done with the old index.html<\/strong> file. You can close it along with other files in your theme folder except for header.php<\/strong> and index.php<\/strong>. They still have some work to do.<\/p>
4. Change the style to WordPress format<\/h4>
In the header, all you need to do is change the style sheet from HTML to WordPress format. Look for an existing link in the <head><\/strong> section. In my case, it’s something like this:<\/p>
<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/><\/pre>
Replace it with this line:<\/p>
<link rel=\"stylesheet\" href=\"<?php echo get_template_directory_uri(); ?>\/style.css\" type=\"text\/css\" media=\"all\" \/><\/pre>
Now, you can save and close the header.php<\/strong> file.<\/p>
Let’s turn to the index.php<\/strong> file. It should be blank at the moment, so copy and paste these lines of code:<\/p>
<?php get_header(); ?>\n\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/pre>
This code will call for the rest of your WordPress files. You should notice the space between the header and the sidebar. It’s where you’ll add The Loop<\/a>.<\/p>
The Loop will process each post for display, and format it according to how the content matches the criteria within The Loop tags. It’s an important aspect to add dynamic content to your WordPress site.<\/p>
To do so, paste the following code right after <?php get_header(); ?><\/strong>:<\/p>
<?php while ( have_posts() ) : the_post(); ?>\n <article class=\"<?php post_class(); ?>\" id=\"post-<?php the_ID(); ?>\">\n <h2 class=\"entry-title\"><?php the_title(); ?><\/h2>\n <?php if ( !is_page() ):?>\n <section class=\"entry-meta\">\n <p>Posted on <?php the_date();?> by <?php the_author();?><\/p>\n <\/section>\n <?php endif; ?>\n <section class=\"entry-content\">\n <?php the_content(); ?>\n <\/section>\n <section class=\"entry-meta\"><?php if ( count( get_the_category() ) ) : ?>\n <span class=\"category-links\">\n Posted under: <?php echo get_the_category_list( ', ' ); ?>\n <\/span>\n <?php endif; ?><\/section>\n <\/article>\n<?php endwhile; ?><\/pre>
After you finish, save your index.php<\/strong> file and close it. You successfully created a WordPress theme. Now, you can add it to your WordPress site.<\/p>
5. Upload your theme to WordPress<\/h4>
After you finish creating the basic theme, you can upload it to WordPress. All files inside your theme folder must be in the same place. To do that, you can zip them.<\/p>
Go to your WordPress Admin Dashboard<\/a>. Head over to Appearances -> Themes<\/strong>. Click Add New -> Upload Themes<\/strong>.<\/p>
![\"Upload](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/upload-the-theme.jpg\")
<\/a><\/figure><\/div>In the menu, locate your theme’s zip file, upload, and click Install Now<\/strong>. After that, don’t forget to activate the theme.<\/p>
![\"Theme](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/theme-uploaded-to-wordpress.jpg\")
<\/a><\/figure><\/div>Now your front end should look like the old site. You should be aware that while the basic design looks the same, there are more things you should do to make the integration better.<\/p>
For example, you can’t use WordPress features like the widget area. You also need to adjust CSS markup to make it a part of WordPress’ original design.<\/p>
Forgoing design and keeping only the content<\/h3>
If you’re okay with leaving behind the old HTML website design and want to use a new theme instead, this is your option. This method will also make importing content much easier.<\/p>
All you have to do is to install the theme<\/a> you prefer and activate it, then follow the steps below.
<\/p>Important!<\/strong> Always backup your WordPress site<\/a> before making any change.<\/p><\/div>\n\n\n\n<\/p>
1. Install Import Plugin 2<\/h4>
You need to install the Import Plugin 2<\/a>. Go to Plugins -> Add New<\/strong> and search it by name. You’ll find it a little bit further down as it’s quite an old plugin but still does a great job. Click install<\/strong> and activate<\/strong> it.<\/p>
![\"HTML](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/html-import-plugin.jpg\")
<\/a><\/figure><\/div>2. Preparing the import<\/h4>
Now, go to WordPress Settings -> HTML Import<\/strong>. You can import several pages at once or one at a time.<\/p>
![\"HTML](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/html-import-setting.jpg\")
<\/a><\/figure><\/div>You’ll notice that the plugin points to a specific path like html-files-to-import<\/strong>. It means that you need to upload the HTML file to the same server as your WordPress installation. In case you need more details, you can refer to the official user guide<\/a>.<\/p>
In this tutorial, we’re going to import the content. To do that, choose the HTML tag at the top and select its configuration in the following three fields.<\/p>
![\"Content](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/content-import-setting.jpg\")
<\/a><\/figure><\/div>Once you’re done, click save settings<\/strong>.<\/p>
3. Start importing your content<\/h4>
The Import Files<\/strong> button will be available once you save the settings. If you missed it, you can also access it from Tools -> Import<\/strong> and click Run Importer<\/strong> under the HTML options.<\/p>
![\"Start](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/start-import-content.jpg\")
<\/a><\/figure><\/div>Choose if you want to import a directory of files or a single file, then click Submit<\/strong>. Once done, all of your existing content will be available on your new WordPress site.<\/p>
Using a child theme adapted from an existing theme<\/h3>
If you want to retain some of your old website’s design but feel the first method is a bit overwhelming, then using a child theme can be a simple alternative.<\/p>
Child themes allow you to take advantage of thousands of existing themes (which are called parent themes) on WordPress and build your new site on top of them.<\/p>
You can also make changes to the appearance of your site without disturbing the parent theme’s core. You won’t lose any modifications made when updating your theme.<\/p>
We’ve written a more advanced article on how to create<\/a> a WordPress child theme. In this tutorial, we’ll use Childify Me<\/a> to simplify the process for beginners.
<\/p>Important!<\/strong> Always backup your WordPress site before making any change.<\/p><\/div>\n\n\n\n<\/p>
1. Pick a suitable theme<\/h4>
You need to find a suitable theme as a base for you to build on. It will be great if you can find a theme that’s close to your old website design, so you don’t have to change too many things later.<\/p>
Browse the WordPress theme directory<\/a> to find a suitable candidate. In this tutorial, we’ll use the Twenty Seventeen<\/a> theme as our starting point.<\/p>
2. Install Childify Me<\/h4>
Go to Plugins -> Add New<\/strong> and search it by name. Install<\/strong> and activate<\/strong> it.<\/p>
![\"Install](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/install-childfy-me.jpg\")
<\/a><\/figure><\/div>\nPro Tip<\/h4>\n
The Childify Me plugin creates style.css<\/strong> and function.php<\/strong> files. If you want to add custom functions in a functions.php<\/strong> file, new folders\/files, you can upload them by using an FTP client. If you use Hostinger, our File Manager<\/a> will help manage your files right from the control panel.<\/p>\n <\/div>\n\n\n\n<\/p>
3. Customize the parent theme<\/h4>
Now go to Appearance -> Themes<\/strong>. Make sure that the parent theme is activated. Click Customize<\/strong>, and navigate to the customization panel of your active theme.<\/p>
![\"Customize](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/customize-the-active-theme.jpg\")
<\/a><\/figure><\/div>4. Childify the parent theme<\/h4>
Click the Childify Me<\/strong> button, and give your child theme a name. We suggest you name it similar to the parent theme. Click create<\/strong>. Once you’re done, click activate and preview<\/strong>.<\/p>
![\"Childify](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/02\/childify-the-parent-theme-527x1024.jpg\")
<\/a><\/figure><\/div>5. Start importing your content<\/h4>
Now that your new WordPress site looks like the old static HTML version, all that’s left is to import the content. Here, you can use the previous method.<\/p>
You’ve successfully moved your static HTML website to WordPress. Congratulations!<\/p>
\nFind out other ways to migrate to WordPress<\/h4>\n
Wix to WordPress<\/a>
\nSquarespace to WordPress<\/a>
\nBlogger to WordPress<\/a>
\nJoomla to WordPress<\/a>
\nMove WordPress from Subfolder to Root<\/a><\/p>\n <\/div>\n\n\n\n<\/p>Conclusion<\/h2>
We’ve covered what needs to be done before converting a static HTML site to WordPress and the different methods of completing the process.<\/p>
A quick recap – you can create a WordPress theme from scratch. It’s a difficult method but a great option if you know how to code and have some spare time to invest.<\/p>
Alternatively, you can also use plugins to make the conversion a lot easier, and import all of your content to its new home.<\/p>
We hope that this article helps ease the process. See you in the next one!<\/p>\n","protected":false},"excerpt":{"rendered":"
So, you’ve been looking at recent statistics, saying that WordPress currently powers 33% of websites on the internet. As a website owner, you might consider converting your static HTML website to WordPress. While it’s still okay to have an HTML-based website as HTML5 is quite powerful, especially for a showcase site. But for everything else, […]<\/p>\n
- index.php<\/strong><\/li>\n\n\n\n
- Losing the design and keeping the content only.<\/strong> If you’re okay with leaving behind your old website design and find a WordPress theme for a fresh start, this option is for you. You only need to transfer the content to its new home.<\/li>\n\n\n\n