{"id":4466,"date":"2016-08-18T18:56:33","date_gmt":"2016-08-18T23:56:33","guid":{"rendered":"http:\/\/www.carnaghan.com\/?p=4466"},"modified":"2019-09-22T22:24:02","modified_gmt":"2019-09-23T02:24:02","slug":"introduction-drupal-8-theming","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/","title":{"rendered":"Introduction to Drupal 8 Theming"},"content":{"rendered":"\n

Drupal<\/span> 8 has a new theme<\/span> engine, however many of the concepts we are familiar with in Drupal<\/span> 7 are still in place in this new version<\/span>. Themes<\/span> still have the same ability to overwrite various templates within core, only now instead of modifying<\/span> .tpl.php files<\/span>, you will be creating Twig files<\/span> in their place. Theme functions are still available to use, however they are now kept in the .theme<\/span> file<\/span> instead of template.php. Other changes worthy of exploring in more depth are briefly summarized below.<\/p>\n\n\n\n

Twig<\/strong><\/h3>\n\n\n\n

The biggest change of course has been the move to the Twig Template Engine<\/a>, and I will be getting more into Twig later in this series. For now though, I have been focusing on Day 12<\/a> of the Drupal<\/span> Activity Cards, which introduces us to theming<\/span> at a high level<\/span>.<\/p>\n\n\n\n

Base Themes<\/strong><\/h3>\n\n\n\n

When looking at the new theme layer in Drupal<\/span> 8, the first thing that stands out as a major integral part of the system is the concept of base themes. Base themes are not new, we have had them in Drupal<\/span> 7 for quite some time, however with Drupal<\/span> 8 pretty much every theme you will use will most likely inherit from two major base themes in the system called Stable and Classy. In fact Bartik and Seven both are sub themes<\/span> of Classy. A Tale of Two Base Themes in Drupal 8 Core<\/a> provides a thorough overview of these new base themes and their importance in Drupal<\/span> 8.<\/p>\n\n\n\n

.yml Files<\/strong><\/h3>\n\n\n\n

The use of .yml files<\/span> are also prevalent in the new theme<\/span> layer as with other areas in Drupal<\/span> 8, however they more or less simply replace functionality of the previous info and template.php files<\/span> found in Drupal<\/span> 7.<\/p>\n\n\n\n

Libraries<\/strong><\/h3>\n\n\n\n

I talked about libraries in Attaching JS and CSS Assets in Drupal<\/span> 8 and they function in a similar with within the theme<\/span> layer itself.<\/p>\n\n\n\n

Drupal<\/span> Console<\/strong><\/h3>\n\n\n\n

One last major change is the newer integration<\/span> with Drupal<\/span> Console, which lets us generate boilerplate theme<\/span> code, similar to that of custom module<\/span> and content entity<\/span> scaffolding functionality covered in an earlier post.<\/p>\n\n\n\n

Generating your Theme<\/span> via Drupal<\/span> Console<\/h2>\n\n\n\n

To get started with theming in Drupal<\/span> 8, you can use the Drupal<\/span> Console to generate starter code by issuing the following command<\/span>:<\/p>\n\n\n\n

drupal generate:theme<\/pre>\n\n\n\n
You will be prompted to provide information for your new theme<\/span> including its name, path, base theme, etc., similar to the screenshot below.<\/p>\n\n\n\n
\"generate_theme\"<\/a><\/figure>\n\n\n\n
Drupal<\/span> console will also provide you with the option, at the time of generation, to provide the names of regions you would like defined in your new theme<\/span>. I generated the theme<\/span> Day12 with base theme<\/span> Classy and the regions I defined included Content, Sidebar1, and Sidebar2. To demonstrate similarities with the Drupal<\/span> 7 theme<\/span> engine, I grabbed a copy of the Classy page.html.twig (in Drupal<\/span> 7 this would have been page.html.tpl.php) and copied it into a templates directory in my new theme<\/span>. I made several changes directly in this file<\/span> to rearrange my layout into the three column table demonstrated in Day 12<\/a> and my finished template code looked like the following.<\/p>\n\n\n\n
<!-- Day 12 Edits -->\n<table class=\"table\">\n    <tr>\n        <td>\n            --------- SIDEBAR FIRST -----------\n            {% if page.sidebar_first %}\n            <aside class=\"layout-sidebar-first\" role=\"complementary\">\n                {{ page.sidebar_first }}\n            <\/aside>\n            {% endif %}\n        <\/td>\n        <td>\n            --------- CONTENT -----------\n            <div class=\"layout-content\">\n                {{ page.content }}\n            <\/div>{# \/.layout-content #}\n        <\/td>\n        <td>\n            --------- SIDEBAR SECOND -----------\n            {% if page.sidebar_second %}\n            <aside class=\"layout-sidebar-second\" role=\"complementary\">\n                {{ page.sidebar_second }}\n            <\/aside>\n            {% endif %}\n        <\/td>\n    <\/tr>\n<\/table>\n<!-- End Day12 Edits --><\/code><\/pre>\n\n\n\n
There was nothing very interesting here except that I was able to demonstrate a change in my site layout by modifying a template file<\/span>, just as I would have done in Drupal<\/span> 7. I’ll be looking more in depth at the theme<\/span> layer in later posts, but for now this should serve as a basic overview of both the similarities and differences between Drupal<\/span> 7 and Drupal<\/span> 8 theming at a very basic level.<\/p>\n","protected":false},"excerpt":{"rendered":"
Drupal 8 has a new theme engine, however many of the concepts we are familiar with in Drupal 7 are still in place in this new version. Themes still have the same ability to overwrite various templates within core, only now instead of modifying .tpl.php files, you will be creating Twig files in their place. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,7129],"tags":[405],"post_series":[406],"yoast_head":"\nIntroduction to Drupal 8 Theming - Ian Carnaghan<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Drupal 8 Theming - Ian Carnaghan\" \/>\n<meta property=\"og:description\" content=\"Drupal 8 has a new theme engine, however many of the concepts we are familiar with in Drupal 7 are still in place in this new version. Themes still have the same ability to overwrite various templates within core, only now instead of modifying .tpl.php files, you will be creating Twig files in their place. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/\" \/>\n<meta property=\"og:site_name\" content=\"Ian Carnaghan\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-18T23:56:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-23T02:24:02+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg\" \/>\n<meta name=\"author\" content=\"Ian Carnaghan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:site\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Carnaghan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/\"},\"author\":{\"name\":\"Ian Carnaghan\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"headline\":\"Introduction to Drupal 8 Theming\",\"datePublished\":\"2016-08-18T23:56:33+00:00\",\"dateModified\":\"2019-09-23T02:24:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/\"},\"wordCount\":590,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"image\":{\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg\",\"keywords\":[\"Drupal\"],\"articleSection\":[\"Coding\",\"Content Management Systems\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/\",\"url\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/\",\"name\":\"Introduction to Drupal 8 Theming - Ian Carnaghan\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg\",\"datePublished\":\"2016-08-18T23:56:33+00:00\",\"dateModified\":\"2019-09-23T02:24:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage\",\"url\":\"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg\",\"contentUrl\":\"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.carnaghan.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to Drupal 8 Theming\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.carnaghan.com\/#website\",\"url\":\"https:\/\/www.carnaghan.com\/\",\"name\":\"Ian Carnaghan\",\"description\":\"Software Developer, Blogger, Educator\",\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.carnaghan.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\",\"name\":\"Ian Carnaghan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"caption\":\"Ian Carnaghan\"},\"logo\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\"},\"description\":\"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.\",\"sameAs\":[\"http:\/\/www.carnaghan.com\",\"https:\/\/x.com\/icarnaghan\"],\"url\":\"https:\/\/www.carnaghan.com\/author\/icarnaghan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to Drupal 8 Theming - Ian Carnaghan","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to Drupal 8 Theming - Ian Carnaghan","og_description":"Drupal 8 has a new theme engine, however many of the concepts we are familiar with in Drupal 7 are still in place in this new version. Themes still have the same ability to overwrite various templates within core, only now instead of modifying .tpl.php files, you will be creating Twig files in their place. […]","og_url":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/","og_site_name":"Ian Carnaghan","article_published_time":"2016-08-18T23:56:33+00:00","article_modified_time":"2019-09-23T02:24:02+00:00","og_image":[{"url":"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg"}],"author":"Ian Carnaghan","twitter_card":"summary_large_image","twitter_creator":"@icarnaghan","twitter_site":"@icarnaghan","twitter_misc":{"Written by":"Ian Carnaghan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#article","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/"},"author":{"name":"Ian Carnaghan","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"headline":"Introduction to Drupal 8 Theming","datePublished":"2016-08-18T23:56:33+00:00","dateModified":"2019-09-23T02:24:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/"},"wordCount":590,"commentCount":0,"publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"image":{"@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage"},"thumbnailUrl":"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg","keywords":["Drupal"],"articleSection":["Coding","Content Management Systems"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/","url":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/","name":"Introduction to Drupal 8 Theming - Ian Carnaghan","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage"},"image":{"@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage"},"thumbnailUrl":"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg","datePublished":"2016-08-18T23:56:33+00:00","dateModified":"2019-09-23T02:24:02+00:00","breadcrumb":{"@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#primaryimage","url":"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg","contentUrl":"http:\/\/www.carnaghan.com\/wp-content\/uploads\/2016\/08\/generate_theme-1024x590.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.carnaghan.com\/introduction-drupal-8-theming\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.carnaghan.com\/"},{"@type":"ListItem","position":2,"name":"Introduction to Drupal 8 Theming"}]},{"@type":"WebSite","@id":"https:\/\/www.carnaghan.com\/#website","url":"https:\/\/www.carnaghan.com\/","name":"Ian Carnaghan","description":"Software Developer, Blogger, Educator","publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.carnaghan.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5","name":"Ian Carnaghan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","caption":"Ian Carnaghan"},"logo":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/"},"description":"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.","sameAs":["http:\/\/www.carnaghan.com","https:\/\/x.com\/icarnaghan"],"url":"https:\/\/www.carnaghan.com\/author\/icarnaghan\/"}]}},"views":88,"_links":{"self":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/4466"}],"collection":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/comments?post=4466"}],"version-history":[{"count":0,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/4466\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/media?parent=4466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/categories?post=4466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/tags?post=4466"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/post_series?post=4466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}