WPservice DEVELOPMENT STUDIO PRESENTS
LONG-TERM GROWTH
We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

Drupal Theme Development: Step by Step Guide

drupal custom theme developmentPut simply, a Drupal theme is a collection of files that, when combined, help with the creation of a Drupal website. In essence, they are the presentation layer that allows for home pages and such to be displayed. They provide the structure for all the nice things you see on a website, including colours, text, photographs, videos and so on. Without these files, there would be no themes and no unique websites. Oh no!

Custom drupal theme form development is actually a lot easier than you might have assumed. Let’s take a look at our step by step guide for ace Drupal template development.

Drupal Theme Development: Step by Step

Step 1: Create Your .info File

The .info file is crucial; its a static text file that contains all the necessary info about a theme. From here, you can specify the Javascripts and CSS you want to include. You can also specify other features and play around with settings.

The only things that are actually required for your Drupal theme creation, though, are the name and core. The rest is entirely optional.

To create the .info file, you need to create a text line before inputting the following code:

name = Blue
description = A Custom Drupal 7 Theme
core = 7.x
regions[header] = Header
regions = Banner
regions[content] = Content
regions[sidebar] = Sidebar
regions[footer] = Footer

Now save it as your themes name. For the purpose of this tutorial, ours will be called mine.info

Step 2: Create Your page.tpl File

Your page.tpl file dictates how your page will look.

You need to import the following code:

<?php
/**
* @file
* Default theme implementation to display a single Drupal page.
*/
?>
<div id="wrapper">
<div id="header">
<div id="logo" class="clr">
<?php if ($logo): ?>
<div id="site-logo">
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
</div>
<?php else: ?>
<h2 id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>"><?php print $site_name; ?></a>
</h2>
<?php if ($site_slogan): ?><div id="site-slogan"><?php print $site_slogan; ?></div><?php endif; ?>
<?php endif; ?>
</div>
<?php if ($page['header']): ?>
<?php print render($page['header']); ?>
<?php endif; ?>
<div id="site-navigation-wrap">
<a href="#sidr-main" id="navigation-toggle"><span class="fa fa-bars"></span>Menu</a>
<nav id="site-navigation" class="navigation main-navigation clr" role="navigation">
<div id="main-menu" class="menu-main-container">
<?php
$main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
print drupal_render($main_menu_tree);
?>
</div>
</nav>
</div>
<!--
<div id="fb-link">
<?php if (theme_get_setting('facebook_page_url', 'blue')): ?>
<?php $fb_url = theme_get_setting('facebook_page_url', 'blue'); ?>
<a href="#"><?php echo $fb_url; ?></a>
<?php endif; ?>
</div>-->
</div>
<!-- banner region goes here -->
<?php if ($page['banner']): ?>
<div id="banner">
<?php print render($page['banner']); ?>
</div>
<?php endif; ?>
<div id="main-content">
<div id="main">
<h1> <?php print $title; ?></h1>
<?php if (theme_get_setting('breadcrumbs')): ?>
<?php if ($breadcrumb): ?>
<div id="breadcrumbs">
<?php print $breadcrumb; ?>
</div>
<?php endif;?>
<?php endif; ?>
<?php if ($page['content']): ?>
<?php if (!empty($tabs['#primary'])): ?><div class="tabs-wrapper clr"><?php print render($tabs); ?></div><?php endif; ?>
<?php print render($page['content']); ?>
<?php endif; ?>
</div>
<?php if ($page['sidebar']): ?>
<aside id="sidebar">
<?php print render($page['sidebar']); ?>
</aside>
<?php endif; ?>
</div>
<div id="footer">
<?php if ($page['footer']): ?>
<?php print render($page['footer']); ?>
<?php endif; ?>
</div>
</div>

Lengthy stuff!

Step 3: Create Your style.css

When adding a CSS file, you need to include the following line:

stylesheets[all][] = css/style.css.

The way you style your them is all down to your your own unique design; that’s the beauty of Drupal custom theme development. Here is our example:

Step 4: Add Javascript

Next step in our Drupal template development guide is to add Javascript. Javascript is essential in ensuring that your drop menu functions correctly. You will notice that there are numerous Javascript plugins to choose from. For this tutorial, we are using SuperFish.

To implement the Javascript library, you can add it via a <script> tag in HTML, or you can simple download the JS script and insert it into your theme. Easy. The second option gives you greater flexibility because you can tweak it while offline.

And that’s it! You’re all done!

We at Theme Development are committed to helping you learn more about custom theme development. We hope you enjoyed our Drupal theme development step by step guide. If you want to learn more, check out the other guides available on our website.

Comments are closed.