On this post we will talk about themes development for Drupal. We are also going to explain a simple example of a Drupal theme, so let’s start.
To create a theme is necessary to follow a structure, this is to organize our theme in the best way and to follow good practices. First, it is necessary to create our theme folder:
projectname/themes/yourthemename Here, it is necessary to create the following file:
theme-name.info file — this file will contain all the information about your theme, such as name, description, core, settings and regions.
screenshot.png — This is a screenshot of your theme that is used in the admin panel.
logo.png — Your logo, if you are using one.
Each variable has its function:
name – a human-readable name of your theme.
description – a theme description.
core – the version of Drupal this is designed for.
regions – the block regions available, The machine name of the region is included in square brackets (e.g. regions[sidebar_first]). This will be used to insert the region into your template files. The label you assign to it will be used in the admin interface when assigning blocks to your regions.
stylesheets – your CSS files.
scripts – any scripts required by your template.
Here you can find a complete example:
name = Theme name
description = Empty HTML5 theme, to start from when developing custom themes.
version = 7.x-3.x
core = 7.x
stylesheets[all][] = dist/css/main.css
scripts[] = dist/js/main.js
; can also be done with stylsheets-remove[] ans stylesheets-override[]
regions[header] = Header
regions[content] = Content
regions[footer] = Footer
regions[sidebar_first] = Sidebar first
regions[help] = Help
regions[highlighted] = Highlighted
regions[sidebar_second] = Sidebar second
regions[page_top] = Page top
regions[page_bottom] = Page bottom
More information about .info options
You need to create a template folder. Inside, you should have the following base templates:
It is recommended that the html files have the following configuration:
<!DOCTYPE html>
<html<?php print $rdf_namespaces;?>>
<head>
<link rel=”profile” href=”<?php print $grddl_profile; ?>” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body>
<div id=”skip-link”>
<a href=”#main-content” class=”element-invisible element-focusable”><?php print t(‘Skip to main content’); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
A similar configuration is recommended for the page template, where you can find header, content and footer structure.
<div id=”header”>
<a href=”<?php print $front_page;?>”>
<img src=”/<?php print $directory;?>/images/logo.png” alt=”<?php print $site_name;?>” height=”80″ width=”150″ />
</a>
<?php if ($main_menu): ?>
<?php print theme(‘links’, $main_menu); ?>
<?php endif; ?>
</div>
<div id=”content”>
<?php print render($title_prefix); ?>
<?php if ($title): ?><h1><?php print $title; ?></h1><?php endif; ?>
<?php print render($title_suffix); ?>
<?php print render($messages); ?>
<?php if ($tabs): ?><div class=”tabs”><?php print render($tabs); ?></div><?php endif; ?>
<?php if ($action_links): ?><ul class=”action-links”><?php print render($action_links); ?></ul><?php endif; ?>
<?php print render($page[‘content’]); ?>
</div>
<?php if ($page[‘sidebar_first’]): ?>
<div id=”sidebar”>
<?php print render($page[‘sidebar_first’]); ?>
</div>
<?php endif; ?>
<div id=”footer”>
<?php if ($page[‘footer’]): ?>
<?php print render($page[‘footer’]); ?>
<?php endif; ?>
</div>
Feel free to edit the page and the html file, you can use any format you prefer.
This post explained you how theming in Drupal 7 works, It also explained the various components of a Drupal theme and how to proceed with the construction of a new theme from scratch using the default PHP Template theme engine. There are many other things you can do with your theme. Hopefully this is enough to get you started with your own theme and custom it as you want.
It can be interesting for you Bootstrapping WordPress Theme Development with Sage