Many companies even now use Html sites for their businesses. According to a survey by W3Techs, HTML accounted for over 95% of all websites as of January 2023, making it the most widely used markup language for websites. This shows that many organizations are still utilizing HTML websites for their operations.
These HTML websites are often static, so to update even a little aspect of the website, you’ll need to edit the code. However, you may change your HTML site to WordPress to avoid that.
Although HTML5 is a fairly strong platform, especially for a showcase site, it is still acceptable to have an HTML-based website. WordPress, however, offers simpler alternatives for everything else. There are many themes, plugins, and widgets for WordPress that may be used to improvise the website and provide helpful functions.
It’s also simple to control. Without using any code, you may add and remove information. It’s a different situation with an HTML site. It might be challenging to update material with HTML if you don’t know how to code.
So in this article, you’ll learn how to convert HTML site to WordPress themes.
So let’s begin!
Converting HTML to WordPress
I utilized a complimentary HTML business theme sourced from Templates – CSS & HTML for the purpose of this article. The identical process can be employed to convert any HTML theme, allowing for the modification of various WordPress themes using this approach.
Moving forward, let us delve deeper into the topic. Initially, carefully analyze your HTML theme, taking note of the distinct sections encompassing the header, body, and footer.
Header: The website’s top portion.
Body: Here is the complete webpage (body). Because the screenshot is much larger, I cropped it a little.
Footer: The bottom port will be included in the website’s footer area.
Requirement before we start
To successfully convert your website from HTML site to WordPress, there are several prerequisites that need to be in place:
1. HTML Website Files: Collect all the files comprising your current website, including HTML, CSS, JavaScript, and media files. This encompasses the HTML markup, stylesheets, images, and any other assets that contribute to your website’s design and functionality.
2. WordPress Installation: Ensure that you have a WordPress installation prepared on your server. If you haven’t installed WordPress yet, you can refer to the official installation guide provided by WordPress.org for step-by-step instructions.
As for me, I’m using XAMPP in my system and I have installed WordPress.
Make a Theme folder
To initiate creating a WordPress theme, navigate to your themes folder and create a new folder.
Now navigate to XAMPP > htdocs > WordPress folder (in my example, mysite) > wp-content > themes.
All of your WordPress themes are stored in the Themes folder. Make a new folder and call it your theme.
Create Php files
The newly generated theme folder is empty, and some files must be created in order for it to operate. Start your code editor (VS Code) and navigate to the complete WordPress theme folder (in my case, pic studio-HTML).
- style.css – Contains the CSS rules that define the visual appearance of your website.
- index.php – The main template file that controls the overall structure of your website.
- header.php – Handles the header section of your website, including the site logo, navigation menus, and other common elements.
- sidebar.php – Controls the sidebar elements, such as widgets and additional content.
- footer.php – Manages the footer section of your website, containing information like copyright notices, social media links, and more.
Setting up an Old Website CSS to WordPress Style Sheet
This theme appears to be empty. Open your style to add the details and banner for the newly created sytle.css file (already made) and paste the following code, then save it (ctrl+s).
/*
Theme Name: Picstudio Html
Theme URI: https://nestify.io/
Author: Nestify
Description: A developing theme, from a static HTML site to WordPress theme
Version: 1.0]
*/
This code informs WordPress that it is the theme stylesheet header. You may change the theme name, creator and URL, description, and so forth.
Copy and paste your previous CSS code right after the header into the file. Close and save it.
The theme we created looks empty without an image, so let’s add one.
To do so, place an image file in your new theme folder. The image should be 800 by 600 pixels in size and named Screenshot – (png format).
Create the header, index, and footer using the HTML code
The main body, footer, and header are all designated with HTML comments to make adding and converting the code to your WordPress PHP files simple.
In the header.php file, you generated in the WordPress themes folder, paste the header code from the index.html of the downloaded theme. You must copy everything from! DOCTYPE html too !/header and save it.
In the same manner, transfer the main body and footer parts from index.html to footer.php and index.php, respectively.
Copy the code for the footer from footer> till /html> into the footer.php file, then save it.
The next step is to copy all the code to index.php, exactly before the tag and after the tag.
Insert a WordPress function The index.php file has the functions get_header() at the top and get_footer() at the bottom.
A built-in method called get_header() calls the header.php file, while get_footer() calls the footer.php file.
Save the index.php file after adding the following code to the top.
When you visit your website after saving the code and refreshing the page, you will see something similar to this.
Your website’s interface should now resemble the previous rendition. Despite the fact that the incorporation might require enhancement, you should be conscious that the fundamental idea remains unchanged.
For example, you are incapable of utilizing widget zones or alternative WordPress functionalities. To incorporate CSS styling in WordPress’ authentic blueprint, you must also implement the requisite modifications.
Import Your HTML Content with a Plugin
To simplify the process of bringing in your HTML content into WordPress, you can employ an extension. This approach is particularly useful if you crave a new website design and prefer a more seamless workflow. Follow these steps to import your HTML content into WordPress using an extension:
Step 1 – Set Up a New Site
Commence by setting up a new WordPress site and installing an appropriate WordPress theme. Select a theme that aligns with your desired design and can be easily modified to match your branding.
Install the Plugin:
Search for and install a WordPress extension called “HTML Import 2” on your site. Activate the extension once it’s installed.
Upload Pages
To import your HTML content into WordPress using the HTML Import 2 extension, follow these steps:
- Copy your HTML pages to the same server as your WordPress installation.
- In the plugin settings, navigate to the “Files” tab.
- Provide the required information, including the import directory, old site URL (for redirection), default file (usually “index.html“), file extensions to include, and directories to exclude.
- Enable the option to preserve file names as the new URLs.
Step 2 – Configure Content Tags
Navigate to the “Content” tab in the plugin settings and configure the HTML tags that contain the content you want to import. Specify how titles, custom fields, categories, and tags should be handled during the import process.
Step 3 – Save Settings and Import
Once you have adjusted the settings for each tab, save your configurations. Finally, click on the “Import Files” button to initiate the import process.
Final Say
Converting an HTML site to WordPress theme allows you to harness the power and flexibility of WordPress while preserving your site’s design and content. By following the comprehensive steps outlined in this guide, you can successfully migrate your HTML site to WordPress. Remember to carefully analyze your HTML site, set up a local development environment, create a blank WordPress theme, and convert your HTML code to PHP. Don’t forget to integrate WordPress features, thoroughly test your theme, and deploy it to your live site. With this process, you can unlock the full potential of WordPress and take your website to new heights of functionality and user-friendliness.
FAQs on HTML to WordPress
1. Can I convert any HTML website into a WordPress business theme?
Yes, you can convert any HTML site to WordPress business theme. However, the complexity of the conversion process may vary depending on the structure and design of your HTML website.
2. Will converting to WordPress affect my website’s SEO rankings?
When done correctly, converting your HTML site to WordPress should not negatively impact your SEO rankings. In fact, WordPress offers numerous SEO benefits and provides greater flexibility to optimize your website for search engines.
3. Do I need coding knowledge to convert an HTML website to WordPress?
Having a basic knowledge of HTML, CSS, and PHP can be helpful during the conversion process. However, there are also plugins and tools available that can simplify the conversion process for those without coding experience.
4. Can I retain the same design and layout after converting to WordPress?
Yes, it is possible to retain the same design and layout of your HTML website when converting to HTML site to WordPress. You can customize your chosen WordPress theme to closely match the design elements of your HTML website.
