Let’s put it straight- static HTML sites don’t serve the purpose of savvy business owners anymore! Struck with the whim to lade their business portals with enticing features and functionalities, web owners are now looking for more dynamic and reliable alternatives. And WordPress has emerged as the choicest quick fix to their pursuit. Interestingly enough, till date WP 3.5 has been downloaded more than 16 Million times and the number is increasing with each passing minute! With such a huge acceptance of this robust CMS, conversion from HTML to WordPress seems inevitable. If you are a novice developer, who has a WP conversion project in hand, then the first thing you must refer to is a tutorial. There is ample number of tutorials available over the web, but most of them are gruesome to comprehend for amateurs. So to make the conversion process a plain sailing, here’s a facile step-by-step tutorial.
Note: This tutorial has been designed with the assumption that you have sound knowledge of CSS and HTML as well as about the functioning of WordPress. Also, you already have a HTML site, which is ready for conversion.
Here’s how to begin your conversion process:
- Create a new folder and assign it a name of your choice. This will be the name that you want to give to your WP theme.
- Now create two files- index.php and style.css- in this new folder. Your WordPress theme will be customized based on only these two files.
- Copy the code from your old CSS file and paste it into style.css file which you have just created and at the top of it, add the following code:
Theme Name: Replace with your Theme’s name.
Theme URI: Your Theme’s URI
Description: A brief description.
Author URL: Your website address.
Your style sheet is now all set for conversion.
The Chopping Chapter
It’s time to chop up your HTML file. Just as WP uses PHP to call data from your database, it also uses PHP to call files which are stored in the local template folder. Now, chop your HTML code into different sections. Say, you chopped it into 4 sections. Instead of keeping all the chopped sections together, place them in separate files. Then call these codes one by one using PHP.
Moving ahead, sort your HTML code and add marker at places from where you will be cutting the code into separate sections.
Note: The following steps have been devised keeping in mind that you have set up your page from left to right as- header, content, footer and sidebar. If you have a page with different set up, you will need to rearrange some of the steps.
- Create three new files namely, sidebar.php, header.php and footer.php, in your theme directory.
- Now refer to the code placed between the <head> tags in the Twenty Ten theme file. Copy this code and paste it to the new header.php file that you just created.
- Open the original HTML file you had, copy the code section that you marked off as header and paste it in the new header.php file. Save and close.
- Next, open the section marked as content in your HTML file. Copy its code and paste it in the new index.php file.
- Similarly, copy the original code of sidebar section in the sidebar.php file and the original code from the footer section into the newly created footer.php file.
Now your original code is segregated in four different sections- idex.php, header.php, footer.php and sidebar.php. It’s time to put them back together using a few PHP code snippets.
1. Open the index.php file which includes the code from the content section of your original HTML file.
2. At the top of this file, add the following code:
[php][/php] 3. Now, go to the bottom of the file and add the following line of code:
[/php] These code snippets will ask WordPress to fetch these 4 files and display them. You have now officially put the files together!
Knitting the Loop
You are almost done with the index.php file. It’s now time to add actual content into the index file. For this purpose, WordPress uses the Loop function of PHP. This function fetches the content from the database and displays it on call. Just copy the code below and paste it into the index.php file of your new theme.[php]