A lot of people are still in possession of virtual interfaces built on the HTML framework which are static in nature and require making changes in the code for conducting even minor modifications. A method to convert HTML CSS to WordPress and incorporating all the elements of the old website into new one is being presented here. This technique which can be used to transfer HTML to WordPress will be beneficial for many owners as they will be able to migrate HTML site to WordPress and enjoy the unique benefits that the open source platform offers.
The technique involves separating the HTML file of the existing interface and using them to create the essential files of the WordPress website. Let’s take a look at the stepwise process to do so.
Step 1
The WordPress needs to be installed for the process and you will find that almost every web hosting service provides the facility to do so in just a few clicks. Once the setup of the open source CMS has been installed, access the “wp content> themes” section through an FTP client and create a folder for your new theme and choose an appropriate name for it.
Step 2
A basic WordPress website can be created with only two files namely- index.php and style.css but to give a professional look to the new interface, we will create all the following files using a simple text editor or an online code editor and save them in the theme folder :
style.css: It contains all the styling information in the form of CSS files.
index.php: This file is responsible for serving the main content in case the other files have not been declared.
header.php: All the header elements are present in this location.
footer.php: It has all the elements of the footer of the interface.
functions.php: All functions that are enabled in the WordPress theme are contained in this file.
Step 3
Access the code of the HTML website and copy the CSS, JS and images folder into the new theme folder created in the WordPress setup. As mentioned before the listing of these steps, the existing HTML code will now be split up to be saved in the different files created in the new theme folder.
Take a look at the above image. It contains all the part of the original HTML program that needs to go into the “header.php” file in the newly created theme folder. The above image can be used as reference to understand the part needed to be cut and pasted for creation of the file. Similarly, we will separate the code for the other files in the following steps.
Step 4
Use the above image for reference to understand the part of the code that goes into the “footer.php” file. Now the content or the main body of the old interface will be transferred to the new website’s theme folder by pasting the relevant code in the “index.php” file.
The code visible in the above image can be found before the “<!-footer-> “ part in the HTML program. It is essential that some modifications are made to it so that WordPress can identify the code and call it. Add this function at the top of the index.php file :
| get_header() |
and this one at the end of the same file :
| get_footer() |
As you must have understood by looking at them that they are the functions that will call the header.php and the footer.php files. Go back to the “ appearance> themes “ of the WordPress set up and activate the new theme.
Step 5
A very important task still remains and that is to convert HTML CSS to WordPress theme. The CSS file folder was copied to the new theme folder in an earlier step and so these files will be now called.
| <link rel=”stylesheet” href=”css/reset.css” type=”text/css” media=”screen”> |
| <link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”screen“> |
| <link rel=”stylesheet” href=”css/layout.css” type=”text/css” media=”screen“> |
Open the “header.php” file and look for the above lines and replace them with :
| <link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/layout.css’; ?>” type=”text/css” media=”screen“> |
| <link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/reset.css’; ?>” type=”text/css” media=”screen“> |
| <link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/style.css’; ?>” type=”text/css” media=”screen“> |
This completes the whole process of conversion and the JavaScript files which are being used in this example are being called in the header.php file.
Conclusion
This simple procedure to convert HTML CSS to WordPress will be beneficial for a number of static website owners as they can use this method to access the user- friendly and advantageous features of the open source platform. Anyone who desires to get an expert for the process can call +1.415.914.1710 and request a quote.
