Create Drupal custom theme from scratch

This tutorial helps you to create Drupal 7 custom theme. Following our step by step tutorial you would be able to build your own drupal theme. Also we have created a simple Drupal responsive theme based on our Drupal custom theme making tutorial. At the end of tutorial you can download the custom Drupal 7 theme and it will helps a lot to creating your own Drupal theme.

Let’s start Drupal 7 custom theme making tutorial.

Step 1) Create Theme Directory:

Create a directory with the theme name (mytheme/) into the sites/all/themes/ directory.

Step 2) Logo & Screenshot:

Insert screenshot.png and logo.png image into the mytheme/ directory.

•  screenshot.png is used for displaying the theme screen view into the theme listing page at the administration panel.
•  logo.png is used for displaying the site logo.

Step 3) Create .info File:

Create a .info file into the mytheme/ directory and this file name should be the theme directory name with .info extension (for example mytheme.info).

•  The .info file is a static text file for defining and configuring a theme.
•  Each line in the .info file is a key-value pair with the key on the left and the value on the right, with an “equals sign” between them (e.g. name = mytheme). Semicolons are used to comment out a line.
•  Some keys use a special syntax with square brackets for building a list of associated values, referred to as an “array”.

Define the following contents (key-value pair) into the mytheme.info file.

Basic info:

name = MyTheme
description = MyTheme is a custom Drupal 7 theme by <a href="https://www.codexworld.com" target="_blank">CodexWorld</a><br>For any support related to this theme, please send email at info@codexworld.com
version = 1.0
core = 7.x
engine = phptemplate

Regions:
The block regions available to the theme are defined by specifying the key of ‘regions’ followed by the internal “machine” readable name in square brackets and the human readable name as the value, e.g., regions[theRegion] = The region name.
In Drupal 7 the following regions are assumed by default.

regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom

You can also add your custom regions like the below.

regions[slider] = Slider

Features:
Using of “features” we are able to enable or disable the display of certain page elements. The “features” keys control are displayed on the theme’s configuration page as check boxes. You can locate these settings at Administer > Appearance > Settings > MyTheme.

In Drupal 7 the following features are added by default.

features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = comment_user_verification
features[] = favicon
features[] = main_menu
features[] = secondary_menu

You can add your custom features like the below.

features[] = slider

Theme settings:
You can use theme settings to set the features by default checked or unchecked in your theme. Settings are defined like the following:

settings[toggle_"feature"] = 1  to check setting
settings[toggle_"feature"] = 0  to uncheck setting

Default settings of Drupal 7 are:

settings[toggle_logo] = 1
settings[toggle_name] = 1
settings[toggle_slogan] = 1
settings[toggle_node_user_picture] = 1
settings[toggle_comment_user_picture] = 1
settings[toggle_comment_user_verification] = 1
settings[toggle_favicon] = 1
settings[toggle_main_menu] = 1
settings[toggle_secondary_menu] = 1

You can add your custom settings like the below.

settings[toggle_slider] = 1

Also you can set default value into settings.

settings[contact_phone] = 8888888888
settings[contact_email] = contact@codexworld.com

In any of your theme’s PHP files, you can retrieve the value of settings by calling:

<?php $contact_phone = theme_get_setting('contact_phone'); ?>
<?php $contact_email = theme_get_setting('contact_email'); ?>

Stylesheets:
Specify your theme’s css files, also you could add additional stylesheets by calling drupal_add_css() in template.php file.

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

Scripts:
Specify JavaScript files to include into your theme.

scripts[] = js/jquery.js
scripts[] = js/bootstrap.min.js

Our demo custom drupal theme’s .info file will look like the below.

name = CodexWorld
description = CodexWorld is a custom drupal 7 theme by <a href="http://www.codexworld.com" target="_blank">codexworld.com</a><br>For any support related to this theme, please send email at contact@codexworld.com
version = 1.0
core = 7.x
engine = phptemplate

; Regions
regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[slider] = Slider
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer

; Features
features[] = logo
features[] = name
features[] = slogan
features[] = favicon
features[] = main_menu
features[] = secondary_menu

; Settings
settings[slider_display]  = 1
settings[slider_image_one]   = sites/all/themes/codexworld/images/slider-image.png
settings[slider_image_two]   = sites/all/themes/codexworld/images/slider-image.png
settings[slider_image_three] = sites/all/themes/codexworld/images/slider-image.png
settings[contact_phone] = 8888888888
settings[contact_email] = contact@codexworld.com

; Stylesheets
stylesheets[all][] = css/style.css
stylesheets[all][] = css/bootstrap.min.css

; Scripts
scripts[] = js/jquery.js
scripts[] = js/bootstrap.min.js

Step 4) Template files (.tpl.php):

These templates files are used for the (x)HTML markup. Some of the common templates files are

html.tpl.php
page.tpl.php
region.tpl.php
block.tpl.php
node.tpl.php
comment-wrapper.tpl.php
comment.tpl.php

Create template/ directory into the mytheme directory and insert all the template files into this directory.

html.tpl.php file will look like the below.

<!DOCTYPE html>
<html lang="en">

<head>
    <?php print $head; ?>
    <title><?php print $head_title; ?></title>
    <?php print $styles; ?>
    <?php print $scripts; ?>
</head>

<body class="<?php print $classes; ?>" <?php print $attributes;?>>
    <?php print $page_top; ?>
    <?php print $page; ?>
    <?php print $page_bottom; ?>
</body>

</html>

In the page.tpl.php(use for all pages)/page—front.tpl.php(use only for front page) for logo ability use $logo, site title drupal_get_title(), theme setting variables value use theme_get_setting('variable_name') and print the regions use <?php print render($page['region_name']); ?>

Step 5) template.php File:

Conditional logic, data processing of the output, custom functions, overriding theme functions or any other customization of the raw output should be done here.

Step 6) Additional Theme Settings:

If you want to create custom settings section, you should need to alter the theme-specific settings form. Create theme-settings.php file into your theme directory and alter theme-specific settings form into the hook_form_system_theme_settings_alter() function. Drupal custom theme’s settings page would like the below.

<?php
/**
Extra Theme settings
*/
function codexworld_form_system_theme_settings_alter(&$form, &$form_state) {
    $form['codexworld_settings'] = array(
        '#type' => 'fieldset',
        '#title' => t('CodexWorld Theme Settings'),
        '#collapsible' => False,
        '#collapsed' => False,
    );
    $form['codexworld_settings']['contact_info'] = array(
        '#type' => 'fieldset',
        '#title' => t('Contact Info'),
        '#collapsible' => True,
        '#collapsed' => True,
    );
    $form['codexworld_settings']['contact_info']['contact_email'] = array(
        '#type' => 'textfield',
        '#title' => t('Contact email'),
        '#default_value' => theme_get_setting('contact_email'),
        '#description'   => t("Enter the contact email."),
    );
    $form['codexworld_settings']['contact_info']['contact_phone'] = array(
        '#type' => 'textfield',
        '#title' => t('Contact Phone'),
        '#default_value' => theme_get_setting('contact_phone'),
        '#description'   => t("Enter the contact phone number."),
    );
}

Step 7) Enable Your Theme:

Login into the admin panel. Go to the admin/appearance/ and click on the Enable and set default link under your newly created theme from the DISABLED THEMES section.

Step 8) Add Content:

Create blocks with respective content and assign the blocks with the respective regions or go to the blocks listing page and assign with the respective regions from here.

 The above steps are enough for creating a Drupal custom theme.

Demo Theme – CodexWorld

Based on this tutorial we have created a Drupal custom theme named CodexWorld. You can download this theme from the below Download Source Code link.

After download the codexworld theme extract into the sites/all/themes/ directory. Go to the admin/appearance/ and enable the CodexWorld theme.

Now follow the below steps for importing the demo content.

•  Create Blocks:
  Go to the admin/structure/block/ and do the following steps.
  •  Left sidebar content – Click on the “Add block” link. Enter the “Block description”, “Block body”, choose “Full HTML” from “Text format” and choose “Left sidebar” region under the “CodexWorld” theme from “REGION SETTINGS” section. You can find the block body content into the codexworld/blocks/sidebar-content.html file.
  •  Header slider content – This block content have some PHP code, so you need to Enable the “PHP filter” module from Modules section first. Click on the “Add block” link. Enter the “Block description”, “Block body”, choose “PHP Code” from “Text format” and choose “Left sidebar” region under the “CodexWorld” theme from REGION SETTINGS section. You can find the block content into the codexworld/blocks/slider.php file.
•  Homepage Content:
  Go to the admin/content/ and click on the “Add content” link. Enter the “Title”, “Body”, choose “Full HTML” from “Text format”, enter the URL alias (homepage) at the “URL path settings” section, select “closed” option into the “Comment settings” section and Save. You can find the Body content into the codexworld/blocks/homepage-content.html file.

Navigate to the Configuration > SYSTEM > Site information. Go to the FRONT PAGE section and enter the Homepage URL alias (homepage) into the “Default front page” field & Save configuration.

 Well done! demo Drupal theme installation and configuration is successfully completed. Now you can check Drupal custom theme at your Homepage.