How to convert HTML template to WordPress theme

Before 20 years, the websites are developed with text and static HTML only. But as technology is growing we have lots of new ways to create any complex to simple website. There are so many options available to develop user friendly website.

What is a CMS

A content management system (CMS) manages the creation and modification of digital content. It typically supports multiple users in a collaborative environment.^[4]

CMS features vary widely. Most CMSs include Web-based publishing, format management, history editing and version control, indexing, search, and retrieval. By their nature, content management systems support the separation of content and presentation.

A web content management system (WCM or WCMS) is a CMS designed to support the management of the content of Web pages. Most popular CMSs are also WCMSs. Web content includes text and embedded graphics, photos, video, audio, maps, and program code (e.g., for applications) that displays content or interacts with the user.

Such a content management system (CMS) typically has two major components:

• A content management application (CMA) is the front-end user interface that allows a user, even with limited expertise, to add, modify, and remove content from a website without the intervention of a webmaster.
• A content delivery application (CDA) compiles that information and updates the website.

Digital asset management systems are another type of CMS. They manage content with clearly defined author or ownership, such as documents, movies, pictures, phone numbers, and scientific data. Companies also use CMSs to store, control, revise, and publish documentation.

Based on market share statistics, the most popular content management system is WordPress, used by over 28% of all websites on the internet, and by 59% of all websites using a known content management system:

Over last 10 years, people are having a modern websites with so many features and functionalities and this is only because of the open source CMS WordPress. Developing the website in WordPress is simple and easy process. You need to just install the WordPress and select the right theme and required plugins.

Still we can find there are so many static HTML websites needs to upgrade into WordPress theme. These types of websites are not upgraded because of the site owners may don’t want to change their content or they want to keep their site simple.

But the actually reason of not to upgrade the website into WordPress is they don’t know how to convert HTML site to WordPress site. And, they don’t know who can provide HTML to WordPress conversion service without affecting their content and page formatting.

Wordpress is a open source website creation tool written in PHP. But in non-geek speak, it’s probably the easiest and most powerful blogging and website content management system (or CMS) in existence today. with great comunity and support.

There are so many ways to solve this problem. Below are 5 steps that we are using to convert HTML template to WordPress theme.

To manually convert static HTML website to WordPress without losing your content and design, you need to just create your own custom theme. In this process, you need to do some basic things like copy and paste and create some files and folders and then just upload the final version.

Use Sublime or Notepad++ to access the directory of your HTML site and the directory of your new WordPress site.

How to convert HTML template to WordPress

1. Create a Theme Folder and Basic Files

The first thing you need to do is create a new theme folder. You can do that on your desktop like you would for a directory on your computer. Name it whatever you want your theme to be called.

After that, go to the code editor and create a number of text files. Name them the following:

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

Don’t do anything with them yet, keep the files open in the editor. You will need them soon.

2. Copy Existing CSS to the WordPress Style Sheet

Now it’s time to prepare the WordPress style sheet (the filestyle.css you just created) to copy your old site’s CSS into it. For that, open the file and paste the following:

1. /*
2. Theme Name: Twenty Thirteen
3. Theme URI: http://wordpress.org/themes/twentythirteen
4. Author: the WordPress team
5. Author URI: http://wordpress.org/
6. Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
7. Version: 1.0
8. License: GNU General Public License v2 or later
9. License URI: http://www.gnu.org/licenses/gpl-2.0.html
10. Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
11. Text Domain: twentythirteen
13. */

This is the so-called style sheet header (Important: don’t leave the comment/*...*/tags out!). Fill in each part like this:

• Theme Name — Here goes name of your theme. It can be anything you want but it’s usually the same as the name of your theme folder.
• Theme URI —  You would usually post the theme’s homepage here but you may use your own site address.
• Author — That’s you. Put your own name here or whatever you want to be called.
• Author URI — A link to your homepage. It can be the one you are building or whatever makes sense.
• Description — An optional description of your theme. This will show up in the WordPress backend.
• Version — The version of your theme. Since you are not publishing it, it doesn’t really matter. I usually put 1.0 here.
• License, License URI, Tags — These things are only important if you are planning to submit your theme to the WordPress theme directory. You can leave them out in this case, I just included them for the sake of completion.

After the header, copy and paste the existing CSS from your static HTML website. Then, save the file in your new theme folder and close it. Time to move to the rest.

3. Separate Your Existing HTML

For the next part, you need to understand that WordPress usually uses PHP to pull information from its database. For that reason, you need to chop up your existing HTML into different pieces so that the CMS can put them together properly.

While this sounds complicated, all it means is that you copy and paste parts of your HTML document into several PHP files. To demonstrate this better, I have put together a simple example page that you can see below.

As you can see it’s very much a standard HTML template that includes a header, content area, a sidebar and a footer. The accompanying code is this:

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Website Title</title>
6. <meta name="description" content="Website description">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
9. <link rel="stylesheet" href="style.css">
10. </head>
12. <body>
13. <div class="header-container">
14. <header class="wrapper clearfix">
15. <h1 class="title">Website Title</h1>
16. <nav>
17. <ul>
18. <li><a href="#">nav item #1</a></li>
19. <li><a href="#">nav item #2</a></li>
20. <li><a href="#">nav item #3</a></li>
21. </ul>
22. </nav>
23. </header>
24. </div>
26. <div class="main-container">
27. <main class="main wrapper clearfix">
28. <article>
29. <header class="entry-header">
30. <h2 class="entry-title">Article Title</h2>
31. </header>
32. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
33. <h2>Subheading</h2>
34. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
35. <h2>Subheading</h2>
36. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
37. </article>
38. <aside>
39. <h3>Sidebar</h3>
40. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
41. </aside>
42. </main> <!-- #main -->
43. </div> <!-- #main-container -->
45. <div class="footer-container">
46. <footer class="wrapper">
47. <p class="footer-credits">© 2018 My Imaginary Website</p>
48. </footer>
49. </div>
50. </body>
51. </html>

If your design is different, you might have to somewhat adjust the steps below. However, the overall process stays the same.

First, open your current index.html (your HTML site’s main file). After that, go through your newly created WordPress files and copy the following into them (the examples below are my markup):

header.php

Everything from the beginning of your HTML file to the main content area (usually signified with <main> or <div class="main">) goes into this file. In addition to that, right before where it says,</head> copy and paste <?php wp_head();?>. This is crucial for many WordPress plugins to work properly.

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Website Title</title>
6. <meta name="description" content="Website description">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <link rel="stylesheet" href="style.css">
9. <?php wp_head();?>
10. </head>
11. <body>
12. <div class="header-container">
13. <header class="wrapper clearfix">
14. <h1 class="title">Website Title</h1>
15. <nav>
16. <ul>
17. <li><a href="#">nav item #1</a></li>
18. <li><a href="#">nav item #2</a></li>
19. <li><a href="#">nav item #3</a></li>
20. </ul>
21. </nav>
22. </header>
23. </div>
24. <div class="main-container">
25. <main class="main wrapper clearfix">

sidebar.php

Everything belonging to the section<aside> goes into this WordPress file.

1. <aside>
2. <h3>Sidebar</h3>
3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
4. </aside>

footer.php

Now, all that’s left from the end of the sidebar to the end of the file should be the footer information, which goes here. After that, add a call for <?php wp_footer();?>just before the closing bracket</body> for the same reason as you added wp_head in the header.

1. </main> <!-- #main -->
2. </div> <!-- #main-container -->
3. <div class="footer-container">
4. <footer class="wrapper">
5. <p class="footer-credits">© 2018 My Imaginary Website</p>
6. </footer>
7. </div>
8. <?php wp_footer();?>
9. </body>
10. </html>

After that, you are done with index.html and can close it. Save all other files to your theme folder and close them except for header.php and index.php. You have some more work to do with them.

4. “WordPressify” Header.php and Index.php

For the header, all that’s left is to change the call for the style sheet from HTML to WordPress format. To do so, look for an existing link in the <head> section. It might look something like this:

1. <link rel="stylesheet" href="style.css">

Replace it with this:

1. <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

Cool, now you can save and close header.php. Then turn to index.php. It should be empty at the moment. So, first copy and paste these lines of code:

1. <?php get_header(); ?>
3. <?php get_sidebar(); ?>
4. <?php get_footer(); ?>

These are the calls for the other files that contain the rest of your site. You might notice the space between the call for the header and the sidebar. That’s where you will add The Loop.

The latter is the part of WordPress where the CMS outputs content created in the backend. It’s crucial if you want to have WordPress adding content dynamically to your pages which you will import later. To that end, paste this here right after <?php get_header(); ?>:

1. <?php while ( have_posts() ) : the_post(); ?>
2. <article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
3. <h2 class="entry-title"><?php the_title(); ?></h2>
4. <?php if ( !is_page() ):?>
5. <section class="entry-meta">
6. <p>Posted on <?php the_date();?> by <?php the_author();?></p>
7. </section>
8. <?php endif; ?>
9. <section class="entry-content">
10. <?php the_content(); ?>
11. </section>
12. <section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
13. <span class="category-links">
14. Posted under: <?php echo get_the_category_list( ', ' ); ?>
15. </span>
16. <?php endif; ?></section>
17. </article>
18. <?php endwhile; ?>

Now, save index.php file and close it. Well done! Your basic theme is ready. Now you can add it to your new WordPress site.

5. Create a Screenshot and Upload Theme

Now you will add a theme screenshot that, together with the information from your style sheet header, will serve as a preview of your website in the WordPress backend.

To do that, open your existing site in a browser and take a screenshot with your preferred method. After that, open the image editing software of your choice and crop it to 880×660 pixels. Save it as screenshot.png and add it to your theme folder. Now you are ready to upload your theme.

To get the new theme onto your WordPress site, you have several options. However, the prerequisite is that all files reside inside your theme folder.

The first option is to create a zip file out of it. After that, go to your WordPress site and then to Appearance > Themes. Here, click Add New at the top and then Upload Theme.

In the upcoming menu use the button to browse to the location of your zip file. Mark it and click Open, then Install Now. When it’s done, activate the theme.

Alternatively, you can connect to your server via FTP (or just go to the local directory on your hard drive) and navigate to wp-content/themes. Then, upload your (unzipped) theme folder there. After that, activate the theme from the same place as before.

Nice! Your new site’s front end should now look like your old site. All that’s left to complete the move from HTML to WordPress is to import your existing content. We will cover this further below when talking about using an existing WordPress theme.

Be aware, however, that while the basic theme works now, there are more things you can do to integrate your HTML better with WordPress. This includes making your blog title and description editable, adding widget areas, comments and much more. You might also have to add CSS markup because the content is not part of your original design like images.

As it is a lot of work, I personally like to use a solution that already has all that functionality and only needs a design change. That’s what I will show you next.

Reblog
https://ithemes.com/tutorials/what-is-wordpress/
https://en.wikipedia.org/wiki/Content_management_system
https://websitesetup.org/html-to-wordpress/

The technologies and requirements have also changed and user habits such as the use of  smartphone  and  social networks choose (facebook, twitter, etc.) should not ignore these changes, instead use them  for the benefit of enterprise your

More information  here