Drupal Technical

[Drupal] A Guide to create a new Drupal Theme

Reshma.mohan | | 2 min read

The first thing to get started is a theme folder. In this case, we’ll call it “base_theme.” The only file actually required to create base_theme is an .info text file which is saved as base_theme.info

Root directory for a Drupal theme

  • base_theme.info [text file that contains theme title, description, regions]
  • logo.png [site logo for header region]
  • /css folder [contains style.css file]
  • /images folder [for styling images and sprites]
  • /scripts folder [contains JavaScript files and script.js]
  • /templates folder [contains page.tpl.php, node.tpl.php]

Steps to Create Theme

  • Create an HTML file for the site.
  • Create a CSS file for the site.
  • Create an .info file to describe your new theme.
  • Standardize the file names.
  • Construct additional template files as needed for nodes, blocks, etc.

Theme .info File

The most basic .info file may look like this:

name = Base theme
description = Basic Drupal 7 theme
version = 7.x-1.0
core = 7.x

engine = phptemplate

regions[header] = Header
regions[sidebar] = Sidebar
regions[content] = Content
regions[footer] = Footer

stylesheets[all][] = styles/style.css
scripts[] = scripts/script.js
  • Name - Name of your theme.
  • Description - Gives your theme a description.
  • Version - Version of Drupal in use.
  • Core - Core installation of Drupal installed on your server. In this case, “7.x” displays as we are building a theme for version 7.
  • Engine - Engine used by Drupal with phptemplate being the default.
  • Regions - Distinct areas of the webpage layout. In most simple cases, you’ll have header, content, sidebar, and footer regions.
  • Stylesheets - Used for setting the .css files.
  • Scripts - Used for setting the JavaScript files.

Standard regions used in drupal

  • sidebar first
  • sidebar second
  • content
  • header
  • footer
  • highlighted
  • help
  • page_bottom
  • page_top

In order to create a new region, follow these steps:

Regions are specified in the .info file as follows:

  • regions[example_first] = First example block
  • regions[example_second] = Second example block

You must add the region to your page.tpl.php file. The region may be added by simply adding the following code:

print render($page[‘example_first’]);

Template Files

The template files are page.tpl.php and node.tpl.php. Copy these two files out of the /modules/system and /modules/node Drupal folders, place it in templates folder.

Add your regions with the following PHP code: print $page[‘header’] in page.tpl.php file.

Place the theme folder in /sites/all/themes. Make your theme display on your website by going to /admin/appearance and clicking “Enable and set default” next to your theme name.

Putting Blocks into Regions

Blocks can be inserted into any region.The block configuration page enables the administrator to edit the following:

  • Block name
  • Region where it displays
  • Pages the block will appear (by path)
  • Roles for who can see the block
 

 

Related Topics