{"id":1687,"date":"2014-01-19T11:13:54","date_gmt":"2014-01-19T09:13:54","guid":{"rendered":"http:\/\/www.extradrm.com\/?p=1687"},"modified":"2014-01-19T11:27:43","modified_gmt":"2014-01-19T09:27:43","slug":"building-a-new-theme-for-drupal-7","status":"publish","type":"post","link":"https:\/\/www.extradrm.com\/?p=1687","title":{"rendered":"Building a new theme for Drupal 7"},"content":{"rendered":"<p>Even though the theme structure has not changed appreciably from Drupal 6, Drupal version 7 comes with a new theme implementation methodology.<\/p>\n<p>This small article shows how to create a <strong>new Drupal 7 theme from scratch<\/strong>.<\/p>\n<p>The objective of a Drupal theme is to separate the processing logic of the framework from the design element. For this, Drupal employs a complex theme system that consists of themes, theme engines, and hooks. The theme components work together with the Drupal core systems and modules design elements to create the distinctive look and feel of the user interface<\/p>\n<div id=\"attachment_1689\" style=\"width: 357px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/drupal-core.gif\"><img aria-describedby=\"caption-attachment-1689\" loading=\"lazy\" class=\"size-full wp-image-1689\" alt=\"drupal core architecture\" src=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/drupal-core.gif\" width=\"347\" height=\"211\" \/><\/a><p id=\"caption-attachment-1689\" class=\"wp-caption-text\">DRUPAL CORE ARCHITECTURE<\/p><\/div>\n<h2 id=\"plan_theme\">Planning the theme<\/h2>\n<p>The theme is made up of several files. Just how many files depends on the complexity of the theme. A theme can have just three files or several dozen, including graphic elements and various scripts placed in several folders within the theme directory. Figure below shows the typical file descriptions (color, images, logo, templates, stylesheets, and PHP files) that you can expect to find within a theme&#8217;s main folder.<\/p>\n<p><a href=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal3.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1691\" alt=\"theme-drupal3\" src=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal3.jpg\" width=\"566\" height=\"323\" srcset=\"https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal3.jpg 566w, https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal3-300x171.jpg 300w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/a><\/p>\n<h3 id=\"info\">The .info file<\/h3>\n<p>The .info file is a required file: It must be included for Drupal to see your theme. The .info files tells Drupal the internal name of the theme. My file is called mickey.info for sample theme called Mickey.<\/p>\n<p><a href=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1690\" alt=\"theme-drupal\" src=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal.jpg\" width=\"710\" height=\"454\" srcset=\"https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal.jpg 710w, https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal-300x191.jpg 300w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"tpl.php\">The .tpl.php template files<\/h3>\n<p>The theme directory contains several template files with names such as <em>xxx.tpl.php.<\/em> These are template files that contain the Extensible HTML (XHTML) markup and PHP variables for the theme.<\/p>\n<p><a href=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal2.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1688\" alt=\"theme-drupal2\" src=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal2.jpg\" width=\"865\" height=\"583\" srcset=\"https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal2.jpg 865w, https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal2-300x202.jpg 300w\" sizes=\"(max-width: 865px) 100vw, 865px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"template.php\">The template.php file<\/h3>\n<p>The template.php file typically holds all the conditional logic and data processing for the output of a theme. You can also use the template.php file to keep the .tpl.php files for the theme uncluttered. Because this is a PHP file, it&#8217;s mandatory to start the content with a PHP opening <code>&lt;?php<\/code> tag, but you can omit the closing tag.<\/p>\n<h3 id=\"other_files\">Other files<\/h3>\n<p>Several other elements are not required for the theme to function but might appear in many themes. These elements include the logo and screen capture, the theme-settings.php file, and color.inc files &#8230;<\/p>\n<p><strong>The logo and screen capture.<\/strong> These elements are recommended but not absolutely necessary for the theme to function. For simple theme Mickey theme that is what we obtain :<\/p>\n<p><a href=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal-screenshot.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1696\" alt=\"theme-drupal-screenshot\" src=\"http:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal-screenshot.jpg\" width=\"608\" height=\"251\" srcset=\"https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal-screenshot.jpg 1265w, https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal-screenshot-300x124.jpg 300w, https:\/\/www.extradrm.com\/wp-content\/uploads\/2014\/01\/theme-drupal-screenshot-1024x423.jpg 1024w\" sizes=\"(max-width: 608px) 100vw, 608px\" \/><\/a><\/p>\n<h2 id=\"N102DB\">Conclusion<\/h2>\n<p>This article gave you an overview of how the theme system functions in Drupal 7. It explained the various components of a Drupal theme and how to proceed with the construction of a new theme from scratch using the default <code>PHPTemplate<\/code> theme engine.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Even though the theme structure has not changed appreciably from Drupal 6, Drupal version 7 comes with a new theme implementation methodology. This small article shows how to create a new Drupal 7 theme&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2842,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[139,6],"tags":[259,260,261],"youtube_video":null,"_links":{"self":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/posts\/1687"}],"collection":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1687"}],"version-history":[{"count":0,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/posts\/1687\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=\/wp\/v2\/media\/2842"}],"wp:attachment":[{"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.extradrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}