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.<\/p>\n
Let’s start Drupal 7 custom theme making tutorial.<\/p>\n
Create a directory with the theme name ( Insert screenshot.png and logo.png image into the Create a Define the following contents (key-value pair) into the Basic info:<\/b><\/p>\n Regions:<\/b> You can also add your custom regions like the below.<\/p>\n Features:<\/b> In Drupal 7 the following features are added by default.<\/p>\n You can add your custom features like the below.<\/p>\n Theme settings:<\/b> Default settings of Drupal 7 are:<\/p>\n You can add your custom settings like the below.<\/p>\n Also you can set default value into settings.<\/p>\n In any of your theme\u2019s PHP files, you can retrieve the value of settings by calling:<\/p>\n Stylesheets:<\/b> Scripts:<\/b> Our demo custom drupal theme’s .info file will look like the below.<\/p>\n These templates files are used for the (x)HTML markup. Some of the common templates files are<\/p>\n Create In the Conditional logic, data processing of the output, custom functions, overriding theme functions or any other customization of the raw output should be done here.<\/p>\n If you want to create custom settings section, you should need to alter the theme-specific settings form. Create mytheme\/<\/code>) into the sites\/all\/themes\/<\/code> directory.<\/p>\nStep 2) Logo & Screenshot:<\/h2>\n
mytheme\/<\/code> directory.<\/p>\n\n
Step 3) Create .info File:<\/h2>\n
.info<\/code> file into the mytheme\/<\/code> directory and this file name should be the theme directory name with .info<\/code> extension (for example mytheme.info<\/code>).<\/p>\n\n
.info<\/code> file is a static text file for defining and configuring a theme.<\/li>\n.info<\/code> 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<\/code>). Semicolons are used to comment out a line. <\/li>\nmytheme.info<\/code> file.<\/p>\nname = MyTheme\r\ndescription = MyTheme is a custom Drupal 7 theme by <a<\/span> href<\/span>=\"https:\/\/www.codexworld.com\"<\/span> target<\/span>=\"_blank\"<\/span>>CodexWorld<\/a<\/span>><br<\/span>>For any support related to this theme, please send email at info@codexworld.com\r\nversion = 1.0\r\ncore = 7.x\r\nengine = phptemplate\r\n<\/pre>\n
\nThe 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<\/code>.
\nIn Drupal 7 the following regions are assumed by default.<\/p>\nregions[header] = Header\r\nregions[highlighted] = Highlighted\r\nregions[help] = Help\r\nregions[content] = Content\r\nregions[sidebar_first] = Left sidebar\r\nregions[sidebar_second] = Right sidebar\r\nregions[footer] = Footer\r\nregions[page_top] = Page Top\r\nregions[page_bottom] = Page Bottom\r\n<\/pre>\n
regions[slider] = Slider\r\n<\/pre>\n
\nUsing 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<\/code>.<\/p>\nfeatures[] = logo\r\nfeatures[] = name\r\nfeatures[] = slogan\r\nfeatures[] = node_user_picture\r\nfeatures[] = comment_user_picture\r\nfeatures[] = comment_user_verification\r\nfeatures[] = favicon\r\nfeatures[] = main_menu\r\nfeatures[] = secondary_menu\r\n<\/pre>\n
features[] = slider\r\n<\/pre>\n
\nYou can use theme settings to set the features by default checked or unchecked in your theme. Settings are defined like the following: <\/p>\nsettings[toggle_\"feature\"] = 1 to check setting\r\nsettings[toggle_\"feature\"] = 0 to uncheck setting\r\n<\/pre>\n
settings[toggle_logo] = 1\r\nsettings[toggle_name] = 1\r\nsettings[toggle_slogan] = 1\r\nsettings[toggle_node_user_picture] = 1\r\nsettings[toggle_comment_user_picture] = 1\r\nsettings[toggle_comment_user_verification] = 1\r\nsettings[toggle_favicon] = 1\r\nsettings[toggle_main_menu] = 1\r\nsettings[toggle_secondary_menu] = 1\r\n<\/pre>\n
settings[toggle_slider] = 1\r\n<\/pre>\n
settings[contact_phone] = 8888888888\r\nsettings[contact_email] = contact@codexworld.com\r\n<\/pre>\n
<?php $contact_phone <\/span>= <\/span>theme_get_setting<\/span>(<\/span>'contact_phone'<\/span>); <\/span>?>
<?php $contact_email <\/span>= <\/span>theme_get_setting<\/span>(<\/span>'contact_email'<\/span>); <\/span>?><\/span><\/span><\/pre>\n
\nSpecify your theme’s css files, also you could add additional stylesheets by calling drupal_add_css()<\/code> in template.php<\/code> file.<\/p>\nstylesheets[all][] = css\/style.css\r\nstylesheets[all][] = css\/bootstrap.min.css\r\n<\/pre>\n
\nSpecify JavaScript files to include into your theme.<\/p>\nscripts[] = js\/jquery.js\r\nscripts[] = js\/bootstrap.min.js\r\n<\/pre>\n
name = CodexWorld\r\ndescription = CodexWorld is a custom drupal 7 theme by <a<\/span> href<\/span>=\"http:\/\/www.codexworld.com\"<\/span> target<\/span>=\"_blank\"<\/span>>codexworld.com<\/a<\/span>><br<\/span>>For any support related to this theme, please send email at contact@codexworld.com\r\nversion = 1.0\r\ncore = 7.x\r\nengine = phptemplate\r\n\r\n; Regions\r\nregions[header] = Header\r\nregions[highlighted] = Highlighted\r\nregions[help] = Help\r\nregions[slider] = Slider\r\nregions[content] = Content\r\nregions[sidebar_first] = Left sidebar\r\nregions[sidebar_second] = Right sidebar\r\nregions[footer] = Footer\r\n\r\n; Features\r\nfeatures[] = logo\r\nfeatures[] = name\r\nfeatures[] = slogan\r\nfeatures[] = favicon\r\nfeatures[] = main_menu\r\nfeatures[] = secondary_menu\r\n\r\n; Settings\r\nsettings[slider_display] = 1\r\nsettings[slider_image_one] = sites\/all\/themes\/codexworld\/images\/slider-image.png\r\nsettings[slider_image_two] = sites\/all\/themes\/codexworld\/images\/slider-image.png\r\nsettings[slider_image_three] = sites\/all\/themes\/codexworld\/images\/slider-image.png\r\nsettings[contact_phone] = 8888888888\r\nsettings[contact_email] = contact@codexworld.com\r\n\r\n; Stylesheets\r\nstylesheets[all][] = css\/style.css\r\nstylesheets[all][] = css\/bootstrap.min.css\r\n\r\n; Scripts\r\nscripts[] = js\/jquery.js\r\nscripts[] = js\/bootstrap.min.js<\/pre>\nStep 4) Template files (.tpl.php):<\/h2>\n
html.tpl.php\r\npage.tpl.php\r\nregion.tpl.php\r\nblock.tpl.php\r\nnode.tpl.php\r\ncomment-wrapper.tpl.php\r\ncomment.tpl.php\r\n<\/pre>\n
template\/<\/code> directory into the mytheme<\/code> directory and insert all the template files into this directory.<\/p>\nhtml.tpl.php<\/code> file will look like the below.<\/p>\n<!DOCTYPE<\/span> html>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>>\r\n\r\n<head<\/span>>\r\n <?php print<\/span> $head<\/span>; ?><\/span>\r\n <title<\/span>><?php print<\/span> $head_title<\/span>; ?><\/span><\/title<\/span>>\r\n <?php print<\/span> $styles<\/span>; ?><\/span>\r\n <?php print<\/span> $scripts<\/span>; ?><\/span>\r\n<\/head<\/span>>\r\n\r\n<body<\/span> class<\/span>=\"<?php print<\/span> $classes<\/span>; ?><\/span>\"<\/span> <?php print<\/span> $attributes<\/span>;?><\/span>>\r\n <?php print<\/span> $page_top<\/span>; ?><\/span>\r\n <?php print<\/span> $page<\/span>; ?><\/span>\r\n <?php print<\/span> $page_bottom<\/span>; ?><\/span>\r\n<\/body<\/span>>\r\n\r\n<\/html<\/span>>\r\n<\/pre>\npage.tpl.php<\/code>(use for all pages)\/page\u2014front.tpl.php<\/code>(use only for front page) for logo ability use $logo<\/code>, site title drupal_get_title()<\/code>, theme setting variables value use theme_get_setting('variable_name')<\/code> and print the regions use <?php <\/span>print <\/span>render<\/span>(<\/span>$page<\/span>[<\/span>'region_name'<\/span>]); <\/span>?><\/span><\/span><\/code><\/p>\nStep 5) template.php File:<\/h2>\n
Step 6) Additional Theme Settings:<\/h2>\n
theme-settings.php<\/code> file into your theme directory and alter theme-specific settings form into the hook_form_system_theme_settings_alter()<\/code> function. Drupal custom theme’s settings page would like the below.<\/p>\n<?php
<\/span>\/**
Extra Theme settings
*\/
<\/span>function <\/span>codexworld_form_system_theme_settings_alter<\/span>(&<\/span>$form<\/span>, &<\/span>$form_state<\/span>) {
<\/span>$form<\/span>[<\/span>'codexworld_settings'<\/span>] = array(
<\/span>'#type' <\/span>=> <\/span>'fieldset'<\/span>,
<\/span>'#title' <\/span>=> <\/span>t<\/span>(<\/span>'CodexWorld Theme Settings'<\/span>),
<\/span>'#collapsible' <\/span>=> <\/span>False<\/span>,
<\/span>'#collapsed' <\/span>=> <\/span>False<\/span>,
);
<\/span>$form<\/span>[<\/span>'codexworld_settings'<\/span>][<\/span>'contact_info'<\/span>] = array(
<\/span>'#type' <\/span>=> <\/span>'fieldset'<\/span>,
<\/span>'#title' <\/span>=> <\/span>t<\/span>(<\/span>'Contact Info'<\/span>),
<\/span>'#collapsible' <\/span>=> <\/span>True<\/span>,
<\/span>'#collapsed' <\/span>=> <\/span>True<\/span>,
);
<\/span>$form<\/span>[<\/span>'codexworld_settings'<\/span>][<\/span>'contact_info'<\/span>][<\/span>'contact_email'<\/span>] = array(
<\/span>'#type' <\/span>=> <\/span>'textfield'<\/span>,
<\/span>'#title' <\/span>=> <\/span>t<\/span>(<\/span>'Contact email'<\/span>),
<\/span>'#default_value' <\/span>=> <\/span>theme_get_setting<\/span>(<\/span>'contact_email'<\/span>),
<\/span>'#description' <\/span>=> <\/span>t<\/span>(<\/span>\"Enter the contact email.\"<\/span>),
);
<\/span>$form<\/span>[<\/span>'codexworld_settings'<\/span>][<\/span>'contact_info'<\/span>][<\/span>'contact_phone'<\/span>] = array(
<\/span>'#type' <\/span>=> <\/span>'textfield'<\/span>,
<\/span>'#title' <\/span>=> <\/span>t<\/span>(<\/span>