When the Web first started, websites were pretty dumb. That is, they were nothing more than text and static HTML code, with no fancy effects and very little interactivity.
Twenty years later, websites are based on complex programming and can take weeks and weeks to build. They are feature-packed, highly interactive, more responsive, better looking, and so on.
Today, instead of writing code on your own, you can use Content Management Systems that deal with the code behind your website by themselves. All you have to do is pick a theme and start posting.
WordPress is one such CMS, now used by millions around the world. The best part about WordPress is that it is a very flexible platform. It doesn’t require any coding knowledge to use it and you can create the most responsive and amazing websites with it.
If you own a website that hasn’t seen an upgrade since the 1990s, this article created by our team at wpDataTables will help you convert HTML to WordPress so that you, too, can reap the benefits of modern web technology.
Keep reading to find out more.
Why Should You Convert HTML to WordPress?
The reasons why a person should convert HTML to WordPress are quite diverse. Here is a selection of the most important ones:
- Converting to WordPress gives you full control over each detail of your website. Whenever you don’t like a part of your site, you can easily tweak it to your liking.
- WordPress sites are much easier to access, manage, and maintain compared to static HTML sites. This is a very important reason to do an HTML to WordPress migration.
- By converting your HTML template style to WordPress, you will end up with a unique theme that no other person using the CMS will own.
- WordPress helps with Search Engine Optimization and will ensure you get your website discovered by more people.
- As a website developer, your work will be reduced in half because WordPress will handle most of the activities that were unnecessarily time-consuming before.
Moving from Static HTML to WordPress: The Methods
Now that you have all the reasons to convert HTML to WordPress, you can proceed to learn how to do it.
There are two methods you can choose from: the manual method, which involves doing everything all by yourself, from scratch; and the child-theme method, which involves using a basic WordPress theme and tweaking it according to your needs.
Choosing a method depends on your experience with coding, how much time you want to invest in this task, as well as on your own preferences. Each of these methods will be presented in the sections below, where you will learn how to convert HTML to WordPress.
The Manual Method
1. Create a new theme folder
Create a new folder on your desktop where your theme files will be stored. Name this folder anything you like (it will represent the theme’s name). Create these files in your preferred code editor and leave them open:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
2. Copy the existing CSS code to your new stylesheet
Once you’ve created the files, you can move on to copying your CSS code. Those who want to duplicate their sites and relocate them to WordPress will have to export and import the CSS code of their previous site. CSS is responsible for how the site looks, so edit the style.css file by adding the following lines of code to it:
/* Theme Name: Replace with your Theme's name. Theme URI: Your Theme's URI Description: A brief description. Version: 1.0 Author: You Author URI: Your website address. */
Replace the required information with your own, add the remaining CSS lines and you’re set. Don’t forget to save the file. You are now free to close style.css.
3. Get your current HTML code
Go to your site’s index.html file and highlight all the content from the beginning of the document to the div class=”main” tag. This section needs to be pasted into the header.php file you created in step 1.
Go back to the index.html file and highlight everything inside the class=”sidebar” element. Copy the content and paste it in the sidebar.php file you created. Do the same for the footer one, with all the content after the sidebar element.
For the index.php file, select all the content that is left after highlighting and paste it in the new file, save, and leave it open for the next step.
4. Edit the index.php file
To finalize your index.php file, copy these lines of code and paste them at the top of the document:
<?php get_header(); ?>
Then, at the very bottom of your index.php file, place these lines of PHP.
<?php get_sidebar(); ?> <?php get_footer(); ?>
The file is not finished yet because you need to create a post loop, which represents some PHP code that WordPress needs in order to display your website’s blog posts or articles correctly. Add the following code lines within the file’s content section:
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?></div> <!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--> <?php else : ?> <?php endif; ?>
Once done, save the file, close it, and move on to the next step.
5. Upload your new theme
Once your theme folder is ready, you need to upload it to your site and complete the HTML to WordPress conversion. To do that, navigate to the folder where you installed WordPress and place the folder you’ve just created in /wp-content/themes/.
Go to your WP Admin page, Appearance and then Themes to see whether the theme name shows up in the list or not. If it does, you’ve done everything correctly and you can activate it. If it doesn’t, carefully read all the steps on how to convert HTML to WordPress again.
There’s also this useful video guide by Traversy Media that you should check out:
Using a WordPress Child Theme
If the steps mentioned in the previous step seem too complicated for your level, this is a method that requires less knowledge in the field of coding. It is easier to manage and will take less time as well.
To convert HTML to WordPress faster, you can use a child theme from an existing theme. Child themes are named this way because they are built on a second theme, which is the parent one.
1. Pick the theme
First of all, choose a theme that is suitable for your HTML design. Look for a child theme that is similar to your existing website. Look for the structure it has, so you won’t have to dig into coding too much.
You should opt for a starter theme because they rely on very basic lines of code.
2. Create a new theme folder
Just as in the previous case, you’ll have to create a new theme folder. The only difference is that you’ll name the folder the same way as the parent theme on which your child theme is based and add the suffix “-child” to it.
For instance, if your theme is called Twenty Nine, you will call the folder “twentynine-child”. Make sure that you add no spaces within the name.
3. Set up a new stylesheet
Next, create the style.css file inside the folder and add these lines of code:
/* Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen 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, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */
Keep in mind that this is an example. You will have to replace the information with your own. Save the file after finishing.
4. Create the functions.php file
Once you have the style.css file, you can activate the theme as it is. However, to make the website look and work better, you will have to use the parent theme’s functions and styles. For this, you need to create the functions.php file.
Use these lines of code and save the file:
/* Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen 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, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */
5. Activate the child theme
Finally, you need to activate the theme. Zip up the folder and add it to WordPress by navigating to the Appearance menu, Themes and then click “Add New”. Upload the zipped file there. Another option would be to drag the folder in wp-content/themes.
FAQs about converting HTML to WordPress
1. How do I convert an HTML website to WordPress?
You can manually convert an HTML website to a WordPress website or use a conversion tool. The conversion tool automates the process by converting the HTML files to WordPress theme files, as opposed to the manual procedure, which entails building a WordPress theme from scratch using the HTML files. The theme files can then be uploaded and activated on a WordPress site after the conversion is finished.
2. What are the benefits of converting an HTML website to WordPress?
Several advantages come from switching from HTML to WordPress, including better search engine optimization, easier content administration, and a more user-friendly interface. Additionally, WordPress offers a variety of customization options, allowing you to completely customize the appearance and functionality of your website.
3. Can I use my existing HTML design when converting to WordPress?
You can convert your existing HTML design to WordPress, yes. In order to maintain your brand identity, it is actually a good idea to keep your design similar. Your WordPress theme can be built on the HTML files, and you can modify it as necessary to get the desired appearance and feel.
4. What are the challenges of converting HTML to WordPress?
The primary problem of converting HTML to WordPress is making sure that the site’s layout and functionality are maintained while being converted. If the HTML site was poorly constructed or the developer is unfamiliar with WordPress, this may be challenging. Making sure the material is correctly imported and optimized for WordPress presents another challenge.
5. Will my SEO be affected when I convert my HTML site to WordPress?
When you convert your HTML site to WordPress, your SEO shouldn’t be impacted if everything is done correctly. However, it’s crucial to use SEO best practices to make sure the new site is optimized for search engines, including making a sitemap, optimizing pictures, and making sure the site is mobile-friendly.
6. How long does it take to convert an HTML website to WordPress?
The intricacy of the site, the volume of information, and the developer’s experience all play a role in how long it takes to convert an HTML website to WordPress. The conversion procedure might often take a few days to many weeks.
7. Can I still edit my content after converting to WordPress?
Absolutely, even after switching to WordPress, you can still edit your material. In fact, one of WordPress’ key advantages is its user-friendly interface, which makes managing and editing material simple. As necessary, you can also add additional pages, blog entries, and material.
8. Do I need to have coding knowledge to convert HTML to WordPress?
While it’s not necessarily required, having coding experience can be useful when converting HTML to WordPress. Many conversion programs are available that automate the procedure and make it simpler for non-programmers. Yet certain customizing and troubleshooting can call for coding knowledge.
9. Will I lose any content or data when I convert to WordPress?
You shouldn’t lose any content or data while switching to WordPress if the migration is done properly. To be safe, you should always make a backup of your HTML files and WordPress site before starting the conversion process.
10. Can I migrate my WordPress site to a new domain after converting from HTML?
After converting from HTML, you can move your WordPress site to a different domain. The procedure entails modifying the site URLs, moving the files and database to the new domain, and is identical to migrating a typical WordPress site. Online courses and guidelines abound, and they can help you through the procedure.
In Closing
You’ll need some patience to convert HTML to WordPress, but it is surely worth the trouble. Even though the process requires some of your attention, you will end up with a truly unique site that is much more convenient to manage from all standpoints.
If you follow the steps presented in this article carefully, nothing can go wrong, so worry not! If, however, you do run into any issues, don’t hesitate to check out the WordPress community support forums. There are many users there who would be happy to help you.
If you enjoyed reading this article on convert HTML to WordPress, you should check out this one about WordPress developer salary.
We also wrote about a few related subjects like best code editor, WordPress training, JavaScript libraries and Brackets extensions.
