Creating a custom Drupal theme allows you to design your website's appearance to match your unique needs and branding. In this detailed tutorial, we will walk through the process of creating a custom Drupal theme from scratch, including the creation of a theme.info file and detailed code examples.

Prerequisites:

Step 1: Create a Theme Directory

  1. In your Drupal installation, navigate to the sites/all/themes directory.

  2. Create a new directory for your theme. For this tutorial, we'll call it "mytheme."

Step 2: Create the Theme.info File

  1. Inside your theme directory ("mytheme"), create a new text file named "mytheme.info."

  2. Open "mytheme.info" with a text editor.

  3. Add the following code to "mytheme.info" to define your theme:

name = My Custom Theme
description = A custom Drupal theme created from scratch.
core = 7.x
engine = phptemplate

stylesheets[all][] = style.css
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
  1. Save and close the "mytheme.info" file.

Step 3: Create the Template Files

  1. Inside your theme directory ("mytheme"), create a new file named "template.php." This file will contain PHP functions to customize your theme.

  2. Create another file named "style.css" for your theme's custom styles.

Step 4: Define Your Theme's Layout

Drupal themes use a combination of template files and regions to define the layout of your site. In "template.php," you can define how your theme's regions are arranged.

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function mytheme_preprocess_page(&$variables) {
  // Add a CSS class to the body element based on the current page path.
  $variables['classes_array'][] = 'page-' . str_replace("/", "-", drupal_get_path_alias($_GET['q']));
}

This example adds a CSS class to the <body> element based on the current page's path, which can be helpful for styling specific pages differently.

Step 5: Create Template Files

Create template files for specific content types, blocks, and regions. For example, if you want to customize the node display for a content type called "article," create a file named "node--article.tpl.php" in your theme directory. Customize this file to control the appearance of article nodes.

Here's an example of a simple "node--article.tpl.php" file:

<div class="article">
  <h2><?php print $title; ?></h2>
  <div class="content"><?php print render($content); ?></div>
</div>

Remember that the naming convention for template files follows a pattern like "node--[content-type].tpl.php."

Step 6: Enable and Configure Your Theme

  1. Log in to your Drupal admin panel.

  2. Go to "Appearance."

  3. Find your custom theme ("My Custom Theme") and click the "Enable and set default" link.

  4. Configure the theme settings, including colors, logo, and other theme-specific options.

  5. Save your changes.

Step 7: Customize Styles

Edit the "style.css" file in your theme directory to apply custom styles to your theme. You can use standard CSS rules to modify typography, colors, spacing, and layout.

Step 8: Clear the Cache

After making changes to your theme files, it's essential to clear Drupal's cache:

  1. Go to "Configuration" > "Performance" in your Drupal admin panel.

  2. Click the "Clear all caches" button.

Step 9: Test Your Theme

Visit your Drupal website and navigate to different pages to ensure that your custom theme is applied correctly and that your layout and styles match your design.

Step 10: Continue Customizing

You can continue customizing your theme by adding template files for specific content types, blocks, and regions as needed. You can also enhance your theme's functionality by adding JavaScript and PHP code in your "template.php" file.

Top Drupal Functions for themes

Drupal themes often rely on a combination of theme-related functions and template files to control their appearance and behavior. Here are 20 useful Drupal theme-related functions that can enhance your theme's functionality and customization:

  1. theme(): Used to generate HTML output for rendering themed content.
  2. theme_get_setting(): Retrieves theme settings configured in the theme's .info file.
  3. drupal_add_css(): Adds CSS files to the page.
  4. drupal_add_js(): Adds JavaScript files to the page.
  5. template_preprocess(): Allows you to preprocess variables before they are passed to templates.
  6. theme_get_registry(): Retrieves information about theme functions and templates.
  7. theme_get_suggestions(): Generates an array of possible template suggestions for a given template.
  8. theme_get_suggestion(): Returns the most specific template suggestion from an array.
  9. theme_hook_suggestions(): Suggests alternative theme hooks to be used for theming.
  10. theme_menu_link(): Overrides the rendering of menu links.
  11. theme_pager(): Customizes the output of pagers.
  12. theme_breadcrumb(): Customizes the breadcrumb trail.
  13. theme_links(): Customizes the rendering of links.
  14. theme_field(): Customizes the display of fields.
  15. theme_form_element(): Customizes the rendering of form elements.
  16. theme_username(): Customizes the display of usernames.
  17. theme_table(): Customizes the rendering of tables.
  18. theme_image(): Customizes the rendering of images.
  19. theme_status_messages(): Customizes the display of status messages.
  20. theme_search_results(): Customizes the display of search results.

These functions allow you to control how various elements on your Drupal site are displayed, from individual fields to entire pages. By leveraging these functions effectively, you can create a highly customized and visually appealing theme.

Congratulations! You've created a custom Drupal theme from scratch and learned how to define regions, create template files, and apply custom styles. Your theme can now be further customized to meet your specific design and functional requirements.