How to Convert HTML Website into WordPress

Header: The header will include the top section part.

Main Body: It’s a long page, so I zoomed out to take a screenshot, but the whole center part is included in the main body.

Footer: The footer section will include the bottom part.

Step 1: Create Your Theme Folder

For this tutorial, I’m using XAMPP, and my WordPress site is installed under the htdocs folder. To create a WordPress theme, you need to access your themes folder and create a new folder. Now, open XAMPP folder > htdocs > WordPress folder (in my case it’s testing) > wp-content > themes.

Step 2: Create PHP Files

Now create the following WordPress files to organize your theme better.

1. style.css (contains theme details and CSS files)
2. index.php (serves the main content if other optional files are not declared)
3. header.php (contains the header elements of the theme)
4. footer.php (contains the footer elements of the theme)
5. functions.php (contains functions that on in the WordPress theme)

Step 3: Copy CSS, Images, and JavaScript (JS) Folders from HTML folder to your theme folder.

After moving to your new WordPress theme folder, it will look like this:

Step 4: Activate a New WordPress Theme

This theme looks empty. To add the information and banner for the newly created theme, open your style.css file (created earlier) and paste the following code and save it (ctrl+s).

/*

Theme Name: School wp-theme

Author: Shailesh Bhagliya

Description: Convert HTML to WordPress theme.

Version: 1.0

*/

For the banner, you need to add an image file to your new theme folder. The image size should be 800 by 600, and the image name should be Screenshot (png format).