Create Drupal custom theme from scratch guide step by step

293

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:

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.

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.

You can add your custom features like the below.

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:

Default settings of Drupal 7 are:

You can add your custom settings like the below.

Also you can set default value into settings.

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

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

Scripts:
Specify JavaScript files to include into your theme.

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

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

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

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.

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.

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 – Tutspointer

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

After download the tutspointertheme extract into the sites/all/themes/ directory. Go to the admin/appearance/ and enable the Tutspointertheme.

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 “tutspointer” theme from “REGION SETTINGS” section. You can find the block body content into the tutspointer/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 “tutspointer” theme from REGION SETTINGS section. You can find the block content into the tutspointer/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 tutspointer/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.

Leave A Reply

Your email address will not be published.