Step 1: Make a New Theme Folder & Necessary Files
First, create a new folder to hold your theme files on your desktop. Give the folder a name whatever theme name you want.
Create some files and leave them open for further editing.
Step 2: Copy Existing CSS Code Into New Stylesheet
If you are creating a duplicate copy of your design, that means you have some CSS code which you want to save. So, the first file you need to edit is your Style.css file.
To begin, add the following to the top of your file.
After this section, just paste your existing CSS below. Save and close the file.
Step 3: Separate Your Current HTML Code
First, open your current site’s index.html file. Highlight code from the top of the file to the beginning div class=”main” tag. Copy and paste this section into your header.php file, save and close.
Second, go back to your index.html file. Highlight the down class=”sidebar” element and everything inside it. Copy and paste this section into your sidebar.php file, save and close.
Third, in your index.html select everything after your sidebar and copy and paste it into your footer.php file, save and close.
Finally, in your index.html file, select everything that’s left (this should be the main content section) and paste it into your index.php file. Save, but do not close yet.
You can close your index.html file now however and move on to the final steps. Almost done!
Step 4: Achieve Your Index.php File
To finalize your new theme’s index.php file make sure it can call up the remaining section that is housed in the other files you’ve created. Or in other words, put back together the elements we just “cut up”.
At the top of index.php file, paste the following line of code:
Then, at the bottom section of your index.php file, place these lines of code:
And finally, we have to add “The Loop”. This is the original bit of php code which is used by WordPress to display your post content to visitors. So the last step in designing your new theme’s index.php file is combining the code below within the content section.
Save your index.php and close.
Step 5: Upload Your New Theme
Now, you have completed the creating of your WordPress theme.
Now that you’ve built your theme files and have stored them all within new theme folder. Now, you’re going to need to access your new WordPress install’s directory.
Place your new theme folder inside /wp-content/themes/. Then navigate back to WP Admin > Appearance > Themes and your newly created theme should appear there. Go ahead and activate it!
That’s all about converting your HTML to WordPress theme. If you are getting any error or you miss any step; feel free to make a contact. We are happy to help you.