How to convert an HTML template to a WordPress template

These days, there are many technologies and methods through which you can create websites on the Internet, and some methods provide different features and options than others. Therefore, if you have created a website with a certain technology, you may decide after a while that the advantages provided by this technology are not suitable for you.

From this standpoint, many who have static websites built based on HTML seek to convert them to WordPress sites, as although more than two-thirds of existing websites are built using WordPress, there are still sites built using less advanced technologies such as HTML.

For this reason, we will explain in this article the best methods that can be followed to convert an HTML template to a WordPress template, in order to benefit from the advantages of this program in managing the site and improving its various aspects, in addition to saving time and reducing effort.

What does it mean to convert an HTML template to a WordPress template?

HTML sites or templates are static, so it is difficult to make modifications to HTML sites quickly, as you will need to edit the source code of the template or page in order to make an amendment that appears on the front end for the visitor, while WordPress templates and sites are dynamic, and it is easy to make modifications on the front end. Most of the time, there is no need to modify the code to implement the modifications.

Converting an HTML template to a WordPress template or an HTML website to a WordPress website means performing all the necessary steps to convert the website from static to dynamic that can be managed using WordPress, including creating WordPress theme files and copying the necessary codes from the HTML template, in addition, of course, to writing the necessary new codes. .

Ways to convert an HTML template to a WordPress template

In fact, there are many methods that can be followed to convert an HTML template into a WordPress template, but many of them do not help in carrying out the task perfectly. However, there are two preferred options that enable the conversion process to be carried out. The first is to hire an expert WordPress developer to do this task, and the second is to implement this process yourself by creating WordPress template files and inserting the necessary codes into them.

1. Hire an expert to carry out this task

This is the easiest way to convert an HTML template to a WordPress template, as you can use the expertise of a WordPress developer and hire him to carry out the task for you. Adopting this option has many advantages, the most important of which are:

The possibility of technical problems occurring after the conversion is reduced , because the process will be done by an expert, the quality of the conversion will be better and you will not suffer from any problems with the produced WordPress template after using it on your site, or you will suffer from a few minor problems.
The ability to perform the conversion quickly . It is certain that the speed of an expert person completing any task in his field will be much greater than the speed of completion of a novice person who has not carried out this task or any similar tasks previously. Therefore, it is definitely better for you to turn to this option if it is time to convert the template. Important to you.
Adding new functions to the template and making professional modifications to it . If you want to convert an HTML template into a WordPress template with some modifications or adding some special functions to the template that are not available in the HTML template, you can request that from the developer you are hiring.
Not needing to expend a lot of effort and time . While you need a long time and a relatively large effort to convert an HTML template into a WordPress template yourself, when you hire an expert, you will only need to perform a few simple tasks to ensure that what he produced works well, and in this way you can invest your time. Your energy is in another aspect of the site that you have good experience with.

You can hire the expert through one of the good freelance sites such , in addition to following the advice that we mentioned in the article ( How do you hire a professional freelancer to help you develop your WordPress site? ).

2. Create WordPress theme files and manually perform the conversion yourself

You can convert an HTML template to a WordPress template yourself if you have enough experience in WordPress development. It is not necessary to have very much experience in developing WordPress themes, but having an idea of how a theme is developed will be very useful and helpful in implementing the conversion process.

To convert an HTML template into a WordPress template manually yourself, you will need to perform 5 main steps, and we will explain them to you in the following paragraphs, but we advise you before reading them to review these two articles to get a clearer idea about WordPress templates and how they are developed if you do not know a general idea about these topics:

Step (1): Create a WordPress theme folder and files

To convert an HTML template into a WordPress template, you must first create the template folder and its basic files, as WordPress templates consist of a number of files that you work on. So on your computer, create a folder with the name of the template you want to convert, then create the following files within it without adding any content to them:

style.css : This file will include the CSS rules that will determine the layout and appearance of the site when the template is activated, in addition to meta information about the template.
index.php : It is the main template file or the main template file in the template, as WordPress uses it to display any content that there is no other template suitable for displaying, and the other template files (if they are present in the template) will be just simple modifications to this template.
header.php : This file defines the part of the content that will be displayed at the top of the site (the site header), which is called before displaying the main content, in addition to of course what should be called before displaying any content (what is placed within the head tag).
footer.php : This file determines the site footer that appears after the main content.
sidebar.php : Used to specify the content that will be displayed in the sidebar of the WordPress theme.

The template folder should now appear as shown in the following image:

**Files contained in the WordPress theme folder**

Step (2): Define basic meta information and copy and paste the CSS codes

The style.css file for a WordPress template includes various template information in addition to its formats, and this file must begin with a definition of the template so that the WordPress system can handle it correctly.

The most important template identification information that should be placed in the style.css file includes the template name, version number, developer name, and other information, and is determined by inserting the following code at the beginning of the file, changing what is necessary to suit your template:

@charset "UTF-8";
/*
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
Version:  (1.0)
*/

After replacing the words to be replaced in the previous code, it will appear similar to the following within the style.css file:

It is worth noting that you may need to include some additional descriptive information sometimes, such as the template license, but the information contained in the previous code is only the information that is technically necessary, and everything else is technically optional, but it may be mandatory in other ways sometimes. Such as when you develop a WordPress template based on an HTML template in order to sell it.

After inserting the meta code, copy the entire CSS code of the HTML template, paste it below the meta information section, then save the modifications and close the file.

In order to learn more about how to place codes and descriptive information within the style.css file when converting an HTML template to a WordPress template, we advise you to review the article ( Preparing basic template files – a practical application ), in which we explained this in more detail.

Step (3): Separate the HTML code and place each part in its own file

Code is split across multiple files in a WordPress theme, because this tells the system where to place the file’s content (based on its name and other things). Therefore, you must divide the content of the HTML template into the set of files that we created previously. To divide the code into files correctly, open the HTML template file or view the HTML page source within the browser, then do the following:

Copy the code for the HTML header, that is, from the beginning of the HTML template file up to the start tag of (div class=”main”), then paste it into the header.php file, and close the file after saving the changes.
Copy the code for the sidebar of the HTML template, which is located within the element (aside class=”sidebar”) in the HTML file, then paste it into the sidebar.php file, then save the changes and close the file.
Copy the entire code after the end of the sidebar element, paste it into the footer.php file, and then close the file after saving the changes.
Select the remaining code that you did not copy from the HTML template file, copy it and place it in the index.php file, then save the changes and close the file. This is the main content of the template.

After that, you must make modifications to the contents of the resulting WordPress template files to become compatible with WordPress, and this is what we will highlight in the next paragraph.

Step (4): Change the content of the files in accordance with WordPress

The primary goal of this step is to enable the index.php file to identify the files necessary to display the site correctly, and to add a WordPress loop, which includes making modifications to enable WordPress to recognize the template and display it as follows:

Open the header.php file, then find the section that looks like this line:

<link rel=”stylesheet” href=”style.css”>.

Remove this code, insert the following code instead, save the changes and close the file.

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

Open the index.php file, then insert the following lines in the spaces marked next to them (do not add the explanatory statements in the code):

<?php get_header(); ?>      
  (test)        
<?php get_sidebar(); ?>     
<?php get_footer(); ?>

Within the content section of the index.php file referred to in the previous code snippet as (file content before modification), you must add the WordPress loop code, as this code tells WordPress to display posts or articles within the template. You can learn more about this loop, and learn how to add it to the file, by reviewing this article ( Learn about the WordPress Loop and how it works in a WordPress template ).

Step (5): Create a screenshot of the template

WordPress displays a screenshot of every template it works with, so you should be sure to add a screenshot to the WordPress template that you produced from the HTML template. To do this, take a picture of the HTML template with dimensions of 880 x 660, then save it as Screenshot and in PNG format within the template folder itself.

**Add the screenshot file to its folder**

After applying the previous steps, you will have finished converting your HTML template to a WordPress template, but you may need to add new files and code to the template if you want to develop it and improve its functionality, such as the template functions file ( functions.php ) that is included in most WordPress themes.

To do this, you must have good experience in developing WordPress templates, and you can obtain this by following our course ( WordPress Template Development Series ) or by reviewing about WordPress development.

Step (6): Upload the template to WordPress and activate it

After you finish converting the template to a WordPress template on your computer, you can upload it to a WordPress site to use it there. There are two ways to do that:

The first is to upload the template folder directly to the following path on the hosting (wp-content\themes), by using an FTP connection or through the file manager in the hosting control panel.
The second is to compress the template folder, convert it to a compressed zip file, and then install it on WordPress via the template installation tool located in the system itself.

We have explained how to implement both methods in a separate article entitled ( How to Install a WordPress Template Correctly ), where you can review it and apply the steps of the method that you think is best for you.

After installing the template on the site, it will appear on the Templates page, which you can access by clicking on the ( Templates ) option under the ( Appearance ) tab in the WordPress control panel , and you can activate it directly and use it by clicking on the (Activate) button.

This concludes our step-by-step explanation of how to convert an HTML template to a WordPress template. In conclusion, we would like to point out that each case or conversion process has its own characteristics. You may need to perform more steps if your template includes images and JavaScript codes or if you want to add functionality to it, but The steps we have listed here are the basic steps that a person with some experience in WordPress development can follow.