Creating a WordPress Theme From a Static HTML

1. Create A Theme Folder And Basic Files

First, you must create a new theme folder by giving it whatever name you want. We’re using the wp_theme folder name for this tutorial, and then you have to open this folder with your favorite code editor. For reference, we’re using VSCode. After opening the folder into VScode, create the following files with the same name as below:- – style.css – Index.php (serves as the main file) – header.php – sidebar.php – footer.php

2. Separate Your HTML

Above, we have created several PHP files, and for this part, we’re going to separate index.html into these PHP files. WordPress usually utilizes PHP to pull information from its database so the CMS can put them together. While separating the HTML file sounds complicated but it s not because all you have to do is copy and paste the parts of your HTML documents into several PHP Files. To show this, we have put an image of a single HTML document.

Header.php

Header.php As the name says, that header.php file contains your code’s <head> section. Also, it will include the body part with the header and the website’s main content. Open the index.html file and copy the header content of the website by finding the header HTML tag or the container with the header class name of the ID name, and the same goes with the main content copy the content by finding the main class name or ID name. After pasting the header and main content into the header.php, right before the closing </head> HTML element, copy and paste the below code. <?php wp_head();?> The above code guarantees that WordPress plugins work properly and, after finishing, save the file.

sidebar.php

sidebar.php Everything belonging to the <aside> section or the div container with the sidebar class name or ID name goes into the sidebar.php file. Coincidentally we don’t have any markup related to this, so we’ll leave this empty. If you have the markup related to the sidebar, don’t forget to add it to the sidebar.php file, and after finishing, always remember to save the file. footer.php After finishing both files above, all the left code related to footer information goes to the footer.php file. After pasting all the content from the index.html to footer.php, add the below code at the end of the footer.php file. <?php wp_footer();?> The above code guarantees that WordPress plugins work properly and, after finishing, save the file.

3. Copy CSS Code and Images

Before we move on to the index.php file and finish the main work, you need to copy all the CSS code and images from the HTML site folder into our wp_theme folder. In our case, we have a main CSS style file known as style.css, and other than that, several small CSS files include code for small components for ease of management. Additionally, we have an image and font folder containing several images and fonts. Copy all the into wp_theme. The essential part is copying all the style.css code from the old HTML website to the new style.css file.

Conclusion

I hope this article helps ease the process. Moving from a static HTML site to a more efficient CMS with demonstrated functionality like the WordPress platform is good. If you utilized this post as a guide for migrating your website to WordPress, you have joined one of the biggest open-source communities in the world.