Creating a customized WordPress theme from a static HTML site has become a common practice among individuals and developers, who want better control over their website theme. Of course, you can choose a pre-built WP theme to setup your site from scratch. But it's a time-consuming process and won't render the flexibility to customize your theme. Hence, you should consider the process of moving your site to a WP theme instead.
But, remember you need to have an idea of WordPress theme anatomy to Convert HTML website to WordPress Theme successfully. If not, then continue reading this article to gain insight into the anatomy of a WP theme.
Remember that every WordPress theme comprises of a few essential elements such as HTML, CSS, and PHP. Since you need to convert HTML to WordPress for that, you would likely have basic knowledge of the HTML scripting language and CSS. Even if you lack their knowledge, there's nothing to worry as you just need to copy and paste your HTML file data to your WordPress theme. In addition, the CSS file (i.e. style.css) is integrated into WordPress without any changes.
But, keep in mind that certain things might appear different with WordPress themes. Put it simply, unlike an HTML web page that contain all of the elements like header, sidebar, main content and footer inside a single file, WordPress include a separate PHP file dedicate for each of those elements. For instance, when you will open up a WP site's admin panel, you can find several files such as header.php, sidebar.php, etc. within the editor screen.
So, when you want to turn your HTML website into a WP theme, it's imperative that all of the body elements are kept in separate files saved with .php extension.That means, your header element will live in the header.php file while the sidebar content will be added to the sidebar.php file and so on.
An Overview of WordPress Template Files
All of the PHP files in WordPress are called as template files. They are essential for a basic WordPress theme. The most relevant template files are:
The index.php is the, most important, and main file that is an equivalent of the HTML index.html file. This file calls the additional files (header.php, sidebar.php and footer.php), so as to help them appear on their exact location within a theme. A index file within a WP install looks like:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
It comprises of the header code. Basically, it contains code for the navigation part and the code of the <head> tag of the HTML file. To be more precise, it contains the information that is displayed at the top of your website, including your titles, sub-headings, etc.
Put your HTML code for the header section here.
This template file comprises of the information that you want to display in the sidebar (or widget-ready area) of your WP theme. It contains things like widgets, adverts, categories, etc.
Put your HTML code for sidebar section here.
Lastly, all your footer links go into the footer.php file, including your website copyright info, main menu links, social media icons and so on. A basic footer.php file looks like:
Your footer content goes here along with php function calls
While the template files mentioned above are necessary to outline the basic structure of a WordPress site, all your posts will live in the single.php file. Besides this, the data of individual pages like Profile, Contact, etc. will be kept in the page.php file.