Tutorial on how to create a theme in Drupal or create custom theme in Drupal
Following is the step by step guide to create a theme in drupal.
Lets say name of your new theme is “mytheme“.
Where to place the theme?
- All custom themes are generally places in “sites/all/themes/” folder.
- Create a “themes” folder if it does not exist at above mentioned path.
- Create a new folder “mytheme” under themes folder.
- Copy all your raw html templates which you may have created for your new website to “mytheme” folder.
- Create a new file “mytheme.info”. This file contains information related to your theme.
Following should the content of your mytheme.info file-
name = MyTheme
description = This is my custom theme
version = 1.x
core = 6.x
engine = phptemplate
stylesheets[all] = style.css
stylesheets[print] = print.css
; Information added by drupal.org packaging script on 2012-05-02
version = “6.26″
project = “drupal”
datestamp = “1335977158″
- For this tutorial lets say you have two html templates one for home page and second for inner page.
- Rename your home page html to “page-front.tpl”. This will be used only for home page.
- Rename your second inner page html to “page.tpl”. This will be used for all your inner pages you may have.
- Now you are done with enough in order to display your new theme.
- Go to Drupal Administration section (eg. http://locahost/YourDrupalFolderName/admin)-> Manage themes. Here you will see your new theme “mytheme”.
- Select this theme as default theme and save.
- Go to your website “http://locahost/YourDrupalFolderName/” you should see your new html pages integrated with Drupal.
- Now we you need to place various content tags in your html pages (home and inner pages) in order to display dynamic content.
1. Header tags
Open home page and inner page html in a editor like eclipse or notepad++ or editplus etc.
Place the following tags in <head> tag
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
The above $styles and $scripts variable will also include css and js defined in “.info” file with drupal system css and js files.
2. Menu Tags
Replace your menu you have in html page with the following code in order to display menus dynamically which are created in drupal.
Note- You need to create various pages and menus. When creating a new page you have an option to create a new menu and link to it. Also create new menu under Primary Links.
<?php if (isset($primary_links)) : ?>
<?php print theme(‘links’, $primary_links, array(‘class’ => ‘links primary-links’)) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme(‘links’, $secondary_links, array(‘class’ => ‘links secondary-links’)) ?>
<?php endif; ?>
Replace breadcrumbs in your html page if any with-
<?php print $breadcrumb; ?>
4. System messages and html tags
Place the below tags just above your actual content. By content we mean, something which comes from the drupal like About us page content, Company information, Terms and condition pages etc.
<?php if ($mission): print ‘<div id=”mission”>’. $mission .’</div>’; endif; ?>
<?php if ($tabs): print ‘<div id=”tabs-wrapper”>’; endif; ?>
<?php if ($title): print ‘<h2′. ($tabs ? ” : ”) .’>’. $title .’</h2>’; endif; ?>
<?php if ($tabs): print ‘<ul>’. $tabs .’</ul></div>’; endif; ?>
<?php if ($tabs2): print ‘<ul>’. $tabs2 .’</ul>’; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $help; ?>
5. Content tag
This is the tag which contains actual content of the page. By content we mean, something which comes from the drupal like About us page content, Company information, Terms and condition pages etc.
<?php print $content ?>
Drupal basic theme integration is done.
Now as you have integrated theme you can proceed to more advanced level like creating separate themes for content types. Creating multiple blocks in Drupal and displaying those blocks in html theme page etc.