Anil Kondla
Last Updated on September 30, 2023 by Team Experts
A robust online digital footprint is essential for many businesses to be future-ready. Besides, looking at recent statistics, WordPress currently powers 33% of websites on the Internet.
Most businesses today use HTML to set a foundation for creating a basic web structure. While HTML serves as the foundation, it lacks when a business wants to enhance functionality, manage content efficiently, and optimize performance. Therefore, it is advisable to integrate a CMS to address these needs.
WordPress, among various CMSs, stands out as one of the most used. This is because of its user-friendliness and an expansion of themes and plugins that empower you to transform your static HTML sites into dynamic and feature-rich websites.
In this case, you can achieve a better alternative by collaborating with a WordPress development company or outsourcing your project to a freelancer.
Converting Your Static HTML Site To WordPress
If you want to get content from a static HTML site into WordPress, duplicate the current design. It only involves creating a few folders and files, copying and pasting, and then uploading the result.
Generate a New Theme Folder and the Necessary Files
Make a new folder with your chosen name on your desktop to house the theme files.
Next, create a few files in your code editor. Don’t edit anything yet.
- Style.css
The Files under the .cc extension store the external stylesheets. This file will also include information about your theme, such as the author’s name, version number, and plugin URL, in its header.
- Index.php
The index.php file for a template contains a mixture of unmodified code that will be delivered as it is and PHP code that will be modified before it is delivered.
- Header.php
Display the logo and menu on all the pages of your site, so they should be included in the header.php file.
- Sidebar.php
WordPress themes use a widget-ready area to display information not part of the main content. You can place it as a horizontal rectangle above or below the content area, footer, header, or anywhere in the theme.
- Footer.php
It usually includes a copyright notice, a link to a privacy policy, a sitemap, a logo, contact information, social media icons, and an email sign-up form.
Copy Existing CSS Into New Stylesheet
If you want to duplicate a design, you probably have some CSS files you want to save. So, the first file you will edit is your Style.css file.
To start, attach the following to the tip of your file.
/*
Theme Name: Replace with your Theme’s name.
Theme URI: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: You
Author URL: Your website address.
*/
After this segment, simply paste your existing CSS below. Save and close the file.
Separate Your Current HTML
Before we hop onto step three, let me give you a quick vision of how WordPress works. WordPress uses PHP to call and retrieve data from its underlying database.
So when I say we will chop up your existing HTML, we’re simply cutting and pasting parts of your current code into the files we’ve just created so WordPress will know where to display them.
Here we go,
First, open your current site’s index.html file. Feature everything from the top of the file to the opening div class=”main” tag. This piece should be copied, pasted, saved, and closed into your header.php file.
Second, go back to your index.html file. Focus on the aside class=”sidebar” element and everything in it. This piece should be copied, pasted, and saved into your sidebar.php file.
Third, copy and paste everything from your index.html file into your footer.php file, save it, and then shut it.
Finally, in your index.html file, select everything that’s left and paste it into your index.php file. Save, but do not close yet.
Upload Your New Theme
Now that you’ve created your theme files and stored them in your new theme folder, you must access your new WordPress install directory.
Place your new theme folder inside /wp-content/theme/. Then, navigate to WP Admin > Appearance > Themes, and your newly created theme should appear there.
Use of a Pre-Made WordPress Theme and HTML Content Import
Instead of converting whatever design you happen to be working with into a WordPress theme, you can take advantage of any of the thousands of articles available in the broader WordPress marketplace.
Once you have chosen a theme, you’ll want to head back to WP Admin > Appearance > Add New and install and install/activate your new WordPress theme.
You will now have a new WordPress website that will be empty of content and may look dull. Next, we will import your old site’s content.
In WordPress Admin, go to Plugins > Add New and search for a plugin called HTML Import 2. Once the plugin is installed, follow its guide to transfer your complete directory of HTML pages.
Conclusion
Following this article, it is crucial to follow the direction of these steps before converting HTML to WordPress, as, on the other hand, it offers many advantages, from a personalized look to an SEO-friendly theme. You can follow the steps above to translate your HTML to a WordPress theme successfully. However, this is a detailed and complex process, indicating the necessity to partner with an HTML to WordPress theme development company.
Read moer: Themesinfo – Best WordPress Theme Detector
