Book Image

Instant Premium Drupal Themes

By : Pankaj Sharma
Book Image

Instant Premium Drupal Themes

By: Pankaj Sharma

Overview of this book

Drupal’s theme layer, and the themes that use it, are responsible for the look and feel of a Drupal web site. Themes have the final say and ultimate control over almost every aspect of each page. Good themes consist of all the same elements that you would find on any reputable web site, including standards-compliant XHTML markup, CSS, and JavaScript. How it all comes together is what is so special and what makes Drupal themes so flexible and powerful. Premium Drupal Themes is a practical, hands-on guide filled with clear, step-by-step examples which shows you how to create Drupal themes using HTML. This book will show you the best practices and conventions that you should adopt and utilize so you can change the way Drupal looks using HTML without wasting energy digging through Drupal’s code. Starting with the essentials including Drupal terminology and Drupal theme structures, this book will show you how to configure raw HTML in a Drupal environment. You will learn about the Drupal template variables and also how to populate a Drupal theme with dynamic content. You will also discover how to customize the search result page and how to add regions to your home page. This book will help you familiarize yourself with the theme engines and will help you learn about the core of Drupal’s theme rendering system. Finally, you will learn how to create your very own Drupal theme that will take people’s breath away!
Table of Contents (7 chapters)

Theme how tos (Advanced)


Our theme name is packttheme for all the mentioned examples in this section.

How to do it...

Suppose our theme name is packttheme and we have to add three regions, namely frontpage top, frontpage center, and frontpage bottom on the front page. We can do it by performing the following steps:

  1. Replace all occurrences of mytheme with the name of your custom theme.

  2. Inside themes/mytheme/template.php (create the template.php fi.

    <?php
    /** Define the regions **/\function mytheme_regions() {
    return array(
            'left' => t('left sidebar'),
            'right' => t('right sidebar'),
            'content' => t('content'),
            'header' => t('header'),
            'footer' => t('footer'),
            'frontpage_top' => t('frontpage top'),
            'frontpage_center' => t('frontpage center'),
            'frontpage_bottom' => t('frontpage bottom'),
    ]
  3. Now that the regions are defined, go to page.tpl.php within themes/mytheme and place the following code where you would like to display the appropriate regions:

    Code [<?php if ($is_front || strstr($_GET['q'], 'admin/block')) : ?>
        <div id="frontpage_top" class="frontpage">
    	  <?php print $frontpage_top ?>
    	</div>
    	<?php endif; ?>
    ]
  4. Repeat this procedure for all the three frontpage regions. You can combine two regions within one if() statement to improve performance.

  5. To add blocks to these new regions, simply navigate to Administer | Site Building | Blocks.

To add a region in Drupal 7, perform the following steps:

  1. Go to your theme's .info file and add your region in the .info file, for example, [regions[packt-header] = Packt Header]

  2. Add the preceding region in page.tpl.php:

    [<?php if ($page['packt-header']): ?>
        <?php print render($page['packt-header']); ?>
    <?php endif; ?>
    ]
  3. To add Packt Header in node.tpl.php, add the following code:

    [<?php if ($page['packt-header']): ?>
        <?php print render(block_get_blocks_by_region('packt-header')); ?>
    <?php endif; ?>
    ]
  4. Click on the Clear all caches button located at Administration | Configuration | Development | Performance.

    The most commonly used code can be found at

    https://drupal.org/node/45471

There's more...

These are some tips and advice that needs to be followed while developing Drupal.

Theme coding conventions

Commonly used coding conventions should be followed, but there are some Drupal-specific conventions that should be kept in mind while creating a theme or module.

While coding, we should prefer PHP in HTML. We should try to avoid HTML in PHP while coding templates. For example, the following coding convention should be avoided:

Code [<?php
if (!$page) {
  print "<h2><a href=\"$node_url\">$title</a></h2>";
}

if ($submitted) {
  print "<span class=\"submitted\">$submitted</span>";
}
?>]

Instead of using the preceding code, the following code should be used:

Code [<?php if (!$page): ?>
  <h2><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?>

<?php if ($submitted): ?>
  <span class="submitted"><?php print $submitted; ?></span>
<?php endif; ?>]
    

We need to separate the logic from presentation, if there is a code similar to the following one:

Price: Code[<?php print $price; ?>]
Tax: Code[<?php print $price * 0.075; ?>]

Instead of writing the preceding way, we should separate the logic from presentation as follows:

Code[<?php $tax = $price * 0.075; ?>]

Always put a semicolon at the end of all the small PHP printing statements as follows:

Code[<?php print $tax; ?>] – YES
Code[<?php print $tax ?>] -- NO

There are other coding conventions for standard Drupal coding. You can get those conventions at:

https://drupal.org/coding-standards

You can find more information about cross-browser testing at:

https://drupal.org/node/981614

You can make your theme semantically correct by visiting the following link at:

https://drupal.org/node/44072