getting started with drupal theme development

A drupal theme is a folder containing files for your site’s appearance, files including but not limited to css, javascript and php. In this tutorial, we will create a hello world theme to put you on a starting point of drupal themem development. Let’s get started.

Drupal custom made themes are suppose to be in DrupalRootDir/sites/all/themes/ folder. The folder name for the theme need to be the same as the theme name. So, let’s create a helloworld folder: DrupalRootDir/sites/all/themes/helloworld. Next, create a folder for css and js files within the helloworld folder. This is not required, but it’s a good practice for keeping things tidy.

So far, we have created the folders for the files that we will create for our hello world themes. Let’t create the following files:
DrupalRootDir/sites/all/themes/helloworld/helloworld.info
DrupalRootDir/sites/all/themes/helloworld/page.tpl.php
DrupalRootDir/sites/all/themes/helloworld/css/reset.css
DrupalRootDir/sites/all/themes/helloworld/css/content.css
DrupalRootDir/sites/all/themes/helloworld/js/helloworld.js

In DrupalRootDir/sites/all/themes/helloworld/helloworld.info, dump the following code in it. This is the file that tells drupal this theme exist for use as well as theme configuration settings. The settings below are pretty much self explantary.

name = Hello World
description = A hello world theme.
core = 7.x
screenshot = screenshot.png

stylesheets[all][] = css/reset.css
stylesheets[all][] = css/content.css

scripts[] = js/helloworld.js

regions[header] = Header
regions[content] = Content
regions[home_content] = Home content first
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[footer] = Footer

In DrupalRootDir/sites/all/themes/helloworld/page.tpl.php, dump the following code in it, or you can copy the content from DrupalRootDir/modules/system/page.tpl.php and paste it into this file.

<div id="page-wrapper"><div id="page">
  <div id="main-wrapper"><div id="main" class="clearfix">
  <h1>Hello World!</h1>
    <?php if ($page['sidebar_first']): ?>
      <div id="sidebar-first" class="column sidebar"><div class="section">
        <?php print render($page['sidebar_first']); ?>
      </div></div> <!-- /.section, /#sidebar-first -->
    <?php endif; ?>
  </div></div> <!-- /#main, /#main-wrapper -->

</div></div> <!-- /#page, /#page-wrapper -->

In DrupalRootDir/sites/all/themes/helloworld/css/reset.css, dump the following css code in it. Notice this css file is specified in the helloworld.info file we created above.

h1 {
	text-align: center;
}

In DrupalRootDir/sites/all/themes/helloworld/css/content.css, dump the following css code in it. Notice this css file is specified in the helloworld.info file we created above.

body {
	background-color: cyan;
}

In DrupalRootDir/sites/all/themes/helloworld/js/helloworld.js, dump the following javascript code in it. Notice this javascript file is specified in the helloworld.info file we created above.

(function() {
	console.log("hello world!");
})();

With the above files in place, we have succesfully created a hello world theme in drupal. To enable it, go log into the admin dashboard, go to Appearance from the top menu bar, then find the hello world theme, enable it and set it to default.

Search within Codexpedia

Custom Search

Search the entire web

Custom Search