Your Cart is currently empty.

Fill Cart with Goods

HTML to Wordpress

HTML to WordPress

Manually Transforming Your Static HTML Site into WordPress

Do want to copy the design of your static website into WordPress then, you need to create a custom theme.

Thankfully, It is not as impossible as it seems in starting. You just need to create some folders and files, a little bit of copy & paste and you are ready to go.

You’re going to require a code editor; for example, Sublime Text or Notepad++ and access to both your HTML site’s directory and your new WordPress install’s directory.

Now, you are ready to follow these simple steps.

Skills And Huge Experience

Designing   —   90%

Development   —   85%

Digital Marketing   —   92%

Data Management   —   89%

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.

Web Development Company

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.

Web Development Company

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.

Featured Services

About Us
About Us
Mobile App
About Us

Some Of Our Fantastic Clients

Any Questions? Get In Touch!

Have Questions? Have doubts? No Need to Worry. If you want to know further details, Kindly contact us for more details.