All websites started with only text and static HTML. The web has changed a lot over the past 20 years. Websites are more complicated. Site visitors and site creators enjoy richer, more enjoyable experiences.
This is largely due to open-source projects such as WordPress. It has achieved its core mission of democratizing online publishing over the past ten years. It doesn’t require any HTML or coding skills.
It’s hard to believe someone could still have a static HTML website in 2018 instead of one with themes and plugins. There are still many HTML-only websites out there. Or HTML with a little CSS.
These site owners might have valid reasons not to upgrade or convert. Perhaps their site content is static, and they are satisfied with their design and formatting. Maybe it’s easier than maintaining a WordPress website updated. Both of these are valid reasons, among others. These are prime examples of “Don’t fix it if it isn’t broken.”
But, I think these may not be the main reason why some people (or many) haven’t made the jump. They don’t know how to convert an HTML site to a WordPress website. This is especially true if you don’t want to lose content or have to do too much formatting page by page.
As is the case with WordPress, there are many ways to solve this problem. Below are some suggestions.
There are many options for converting a static HTML site to a WordPress website.
Your personal preferences, time/monetary investment, and code proficiency will all play a part in how you convert your static HTML website to a WordPress one. While you will ultimately decide which option is best for you and your situation, the summary below should help you make an informed decision.
There are three options available:
1. Create a WordPress theme manually based on your static HTML site.
You will need to access your code. To access your site directory via FTP, you will need to use your existing code. You will then need to create the files required for a WordPress theme. Copy bits of code from WordPress codex. If you are familiar with HTML, CSS, as well as PHP, this is quite simple.
2. Simply install a premade theme and then migrate your content.
This combination of simplicity and value is the best. If you have hosting already for your website, then you won’t need to pay extra if you decide to buy a premium theme. The official WordPress Plugin Repository contains the plugin that we’ll use to import content.
3. You can pay to have your website re-created using an HTML to WordPress conversion.
This is the easiest option since it doesn’t require that you do much. It won’t do much to familiarize you with WordPress, and the cost of hiring a service provider will vary. This option is not covered in this article. If you are interested, you can do a quick search to find service providers.
Preparing for HTML-to-WordPress Conversion
There are some things you should do before you dive in, no matter what route you choose.
First, choose a hosting plan. It’s important to compare the available options and choose the package that suits your needs. You might prefer to install WordPress locally. It can always be moved to a hosting provider later.
After you have made your choice, install WordPress, then log in to WP Admin. Here is where the two paths can split.
Manually Convert Your Static HTML Website to WordPress
You will need to create a custom theme if you want to convert your static HTML site to WordPress. It isn’t as difficult as you might think. This involves only creating a few files and folders, some copy and pasting, and finally uploading the result.
A code editor like Sublime or Notpad++ is required to access both your HTML site’s directory as well as your new WordPress installation’s directory.
Step 1: Create a new theme folder and any necessary files
Create a folder on your desktop to store your theme files. You can name it anything you like.
Next, you will need to create some files in your code editor. You don’t need to do anything with them yet. You can always edit them later.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Step 2: Copy Existing CSS Into New Stylesheet
If you are trying to replicate a design, you will need at least some CSS to save. Your Style.css file is the first file that you will need to modify.
Add the following to your file.
Simply copy and paste the CSS you already have below. Close the file.
Step 3: Separate your current HTML
Let me briefly explain how WordPress works before we move on to step 3. WordPress uses PHP to retrieve data from its database. This tutorial will show you how to tell WordPress which section of your website content should be displayed.
When I say that we will “chop up” your HTML, in reality, we are simply copying and pasting portions of your code into the files we have just created, so WordPress knows where to display them.
We are here.
Open your index.html folder. Highlight all of the contents from the top to the div Class=”main” tag. Paste this section into your file. Save and close.
Next, open your index.html document. Highlight the sidebar class=”sidebar” section and all that is within it. Copy this section and paste it into your sidebar.php document, then save and close.
Third, copy the sidebar content from your index.html and paste it into your footer.php. Save and close.
Final step: In your file, select all the content left. This should be your main content section. Copy it to your index.php file. Do not save.
You can save your index.html now and continue to the final steps. Almost done!
Step 4: Finish your Index.php
To finalize your new theme’s index.php file, you must ensure it can call up any other sections (other than the main content) in the other files that you have created. Also, you can put together the elements that we “chopped up”.
The following line of PHP should be placed at the top of your Index.php file.
These lines of PHP should be placed at the bottom of your index.php file.
Finally, let’s add the Loop. This is the main PHP code that WordPress uses in order to display your post content. The final step to creating your new index.php theme is to add the code below in the content section.
Close your index.php. Your theme is now complete! Now all that is left to do is upload it to your WordPress site.
Step 5: Upload your new theme
Once you have created your theme files and they are all in your new folder, it is time to go to your WordPress installation’s directory.
Your new theme folder should be placed in /wp–content/themes/. Navigate back to WordPress Admin > Appearance> Themes. Your newly created theme will appear there. Now activate it!
Now all you have to do is add your content to your new WordPress site. To learn how it is done, follow the instructions below (skipping the section about using a premade theme).
Premade WordPress themes and HTML content import
If you find the above steps too time-consuming or tedious, then there are other options. You don’t have to convert the design you are currently working on into a WordPress theme. Instead, you can use any of the thousands available in the wider WordPress marketplace.
There are WordPress themes as well as premium WordPress themes such as Divi. You may find it helpful to review the themes available and browse through each category at Elegant Themes.
After you have chosen the theme you like and downloaded its zip file package, you can go back to WordPress Admin > Appearance>> Add New to install or activate your new WordPress theme.
After this, your new WordPress website will be created, and a theme will be installed. Your site will look boring and empty when you view it. It’s okay, and we’ll import your content from the old site next.
Go to WP Admin > Plugins > Create New, and look for the plugin HTML Import 2. After the plugin has been activated and installed, follow the user guide to import all of your HTML pages. Add images to complete the package!
Once this is done, all your content will be available on WordPress, and your new theme will take over. If you have your own theme, your site will look exactly the same as it did before, but running on WordPress.
Conclusion
This post can be used as a guide to migrating your website onto WordPress. You’ve just joined one of the largest open-source communities in the world. Welcome! This is a great place to meet developers, bloggers, designers, DIYers, and many other people who love WordPress and its themes/plugins.
The WordPress.org official website has a wealth of themes, plugins, and other useful resources for those who have “caught the WordPress bug”. For endless tips and tricks on how to tweak your theme files, visit the Codex.
Leave a Reply