HTML to Drupal 7 Template Conversion – A Definitive Guide

In case you feel that your current site is unable to handle huge traffic or is missing out some essential features such as SEO semantic code, cross-browser compatibility etc., then Drupal is an ultimate choice as a content management system that you can adopt. Being a powerful open-source CMS, Drupal helps develop dynamic sites ranging from simple to highly complex websites. However, in the present day and age, if you covet to take your business to new heights wading through the market challenges, customization is the key that gives you the ability to withstand all the obstacles and help you achieve a strong web presence.

Below is a step-by-step guide that help you convert HTML to Drupal 7 Template

Step 1 – Analyze your HTML Template

Test all your HTML files in the browser to determine whether they are working fine or not, and are free from bugs. You can do so by using the firebug tool. Next, analyze each section of your HTML template that needs to be transformed to Drupal block regions. In order to convert the sections of your existing website to Drupal template you will need to make use of the editing software such as Adobe Dreamweaver.

Step 2 – Create a Folder and Copy Your Files Into the Folder

Create a folder for your Drupal theme inside the path – sites/all/themes/directory. For example, if you have created a folder with the name “Drupaltheme”, then your path will change to “sites/all/themes/Drupaltheme”. And then copy all your HTML files to the themes folder you’ve created.

Step 3 – Create

Create “” file, and keep the name of this file same as your folder name, that is, “”. Next, save your “” inside your folder. Lastly, declare the elements like name, description, stylesheets, regions etc.

Step 4 – Rename Your HTML Files

Since Drupal is written in PHP language, thus it is imperative that you must create a duplicate copy of your HTML file “index.html” or “index.htm”, which will later be renamed to page.tpl.php

Step 5 – Copy all other HTML Template Files you Want to Use

Copy all the HTML layout files you want to override and then, edit your php files such as html.tpl.php, node.tpl.php and block.tpl.php, add all the edited files to your Drupal theme folder. By following this step you can alter the files without making tweaks to the original code.

Step 6 – Alter and Remove Tags from your page.tpl.php file

Again open your page.tpl.php file and start editing. Begin with removing all tags including DOCTYPE, to the body ” tag, to closing body ” tag and finally the closing html ” tag.

Step 7 – Check and Define all the Reference into .INFO file

Make certain that you have stored all CSS file and JS file references present in the header section of your HTML file. Don’t forget to declare the references into your .INFO file that you can refer to later.

Step 8 – Begin Inserting your Block Regions

Any section of your web page that you wish to edit via the Drupal user-interface must to be converted to a region. You can take example of the following code snippet:

<?php if ($page[sidebar_second]): ?>
<div id=”sidebar-1″ class=”sidebar-1″>
<?php print render($page[sidebar_second]); ?>
endif; ?>

Step 9 – Start Inserting Variables

Insert all the required variables using the Render API, you wish to use and place them in the right spot where you want to get them displayed on your web page. These varibales are inserted into page.tpl.php file. A few common variables that are inserted are $breadcrumbs, $site_name, $logo, etc.

Step 10 – Tweak your CSS

Tweak your CSS and default Drupal stylesheet to adjust and integrate your theme design into your Drupal powered site.

Step 11 – Don’t Forget to Test!

The final step in the conversion process requires testing your Drupal 7 template to ensure it functions smoothly and is bug-free.


Abiding by the aforementioned steps will help you convert your existing basic HTML template to Drupal 7 theme.


Guest Author Bio

Sarah Parker is a creative web design expert of PSD to Drupal Conversion processes with vast experience in Research and development vertex of web design technologies with Designs2HTML Ltd. She use to write on different Markup conversion processes and socialize it through social media platforms. Join her on Facebook or Twitter to get latest reviews and updates.

Design enthusiast, Web Developer, Graphic and Web Designer, Content Writer. Professionally he is software developer and a freelance web designer and developer. He is working as Guest Author since 4 years.