Zen: Introduction and Installation

Video loading...

  • 0:00
    Zen: Introduction and Installation Amber Matz
  • 0:04
    Zen is a base or parent theme for Drupal.
  • 0:09
    It features lean, semantic HTML5 markup and a starter kit for custom theme development.
  • 0:16
    In these tutorials, I will show you how to install Zen
  • 0:19
    and create a subtheme for Zen using Drush.
  • 0:22
    I will also highlight some of the HTML5 markup
  • 0:26
    in Zen's template files.
  • 0:29
    Other lessons in the Markup in Drupal series
  • 0:31
    also use a subtheme of Zen as a theme for the demo site.
  • 0:35
    This was done to demonstrate how markup is first and foremost affected by the theme.
  • 0:41
    It was also done to show how using a base theme that uses semantic HTML5 markup
  • 0:47
    can be advantageous if you want to use HTML5 elements in the built-out components
  • 0:54
    and pages of your Drupal site. I'm on the project page for Zen
  • 0:58
    at https://drupal.org/project/zen
  • 1:02
    There's quite a lot of information here about the theme. One thing to note
  • 1:06
    is that Zen comes in two flavors, a 3.x and a 5.x version.
  • 1:11
    I'll be installing the 5.x version which features HTML5 semantic markup
  • 1:17
    which will be the focus of these lessons. Zen also features responsive and mobile-first layouts
  • 1:23
    and also Sass and Compass integration, but we won't be focusing on that
  • 1:29
    in these lessons. There is a lot of good documentation for Zen,
  • 1:34
    including a section in the Drupal.org handbook, and you can find that here on the project page.
  • 1:39
    There are also several read me files in the project itself, as well as extensive code comments
  • 1:46
    which are very informative. Further down on the project page, we've got features at a glance
  • 1:52
    which you can peruse at your leisure, and information about the project.
  • 1:57
    Down at the bottom are the recommended releases, and we'll be downloading
  • 2:00
    the 7.x-5.5 version. You can download it here into your site's all/themes,
  • 2:07
    either using the tar.gz or the .zip. I'll be using Drush to download and install the module
  • 2:13
    and also to create a subtheme. So let's go ahead and download the 5.5 version
  • 2:19
    for Drupal 7 and take a look at some of the files that are included.
  • 2:22
    I'm going to bounce over to my terminal window, and I'll type in "drush dl zen".
  • 2:30
    Drush will now download Zen to my site's all/themes directory
  • 2:37
    in a folder called zen, and then let's just take a look at what has been downloaded.
  • 2:42
    So I've opened up the project in PhpStorm, and you can see
  • 2:45
    I've navigated to sites, all, themes, zen. And we have a number of folders and files here
  • 2:51
    that compose the Zen base theme. So here's our README-FIRST.txt,
  • 2:56
    and you can read this file first to find out more about base themes,
  • 3:01
    subthemes and starter themes, some suggested reading.
  • 3:05
    If you're totally new to Drupal theming, you can find the theme guide link here.
  • 3:11
    And there's lots of documentation; not only in these read-me files
  • 3:15
    but also in code comments and also in the community documentation
  • 3:20
    in Drupal's handbook, which you can find a link here. So it's a good idea to read through this file
  • 3:24
    to become acquainted with Zen and how it functions as a base theme.
  • 3:29
    Now let's head back over to the project page and you can find the direct link
  • 3:34
    to the community documentation here. So I'll head over to drupal.org/documentation/theme/zen.
  • 3:42
    And I'm going to skip over some things here and pop over to the "Create a Zen Subtheme" section,
  • 3:49
    and I'm going to go to the "How to build a sub-theme (Zen 7.x-5.x) - Automated using Drush".
  • 4:00
    So this is what we're going to do now. First we need to ensure that Drush knows about the zen command,
  • 4:05
    and we can do that by enabling zen using Drush and then heading over
  • 4:09
    to the administrative menu and to the appearance page and setting the theme Zen
  • 4:16
    as the default. Then our Drush zen command will be available to run.
  • 4:20
    We can take a look at the options available with this command
  • 4:23
    by typing "drush help zen", and we'll do that in the terminal window
  • 4:26
    after we've enabled the theme and set it as default.
  • 4:30
    So I'm going to head back over to terminal and enable the theme
  • 4:34
    by typing "drush en zen". It asks me if I want to continue.
  • 4:38
    I'll type Y and then enter. And even though the command is enabled successfully,
  • 4:44
    in order to get the Drush command working we need to set the theme as default.
  • 4:49
    So I'll head back over to my site and in the administrative menu,
  • 4:52
    I'll click on Appearance. And here we can see our enabled themes,
  • 4:55
    and here's Zen. And I'll click set default.
  • 5:00
    And now Zen is the default theme and the Zen command will be available in Drush.
  • 5:06
    So I'll pop back over to terminal, and now we can type in "drush help zen"
  • 5:11
    to see the options for this command.
  • 5:15
    So we just need to type in "drush zen" and then provide a theme name in quotes.
  • 5:20
    Just with that, this command will create a subtheme.
  • 5:24
    And it will create a machine name for your theme derived from whatever you put here.
  • 5:29
    But I'm going to provide a specific machine name, and so I'm going to type in
  • 5:34
    "drush zen" and then my theme name, and then I'll provide a machine name as well.
  • 5:39
    So let's try that out. And now a starter kit for Zen Demo has been created,
  • 5:45
    and that has been created in my sites/all/themes/zendemo.
  • 5:50
    If I navigate over to sites/all/themes and list out the directories here,
  • 5:55
    you can see that zendemo is appearing right alongside zen,
  • 6:00
    so it's not inside of this folder or anything like that.
  • 6:03
    It's functioning as a separate theme, and now we can actually set the zendemo theme
  • 6:09
    as the default. So let's head back over to the Appearance page.
  • 6:13
    And give this a refresh.
  • 6:17
    And now we have our Zen Demo theme, and I can, in one step, enable and set as default.
  • 6:25
    So I'll go ahead and click on that. Now our Zen Demo theme is enabled
  • 6:30
    and set as default, and we're ready to customize it.
  • 6:34
    But first let's take a look at some of the HTML5 features in the template files
  • 6:39
    that the Zen base theme provides.

Markup in Drupal

Loading ...

Zen: Introduction and Installation

Loading...

Zen is a base, or parent, theme for Drupal that features lean, semantic HTML5 markup and a starter kit for custom theme development. In this tutorial, we will install Zen and create a subtheme for custom theme development using Drush. I use the Drush command provided by Zen because of all of the tedious renaming required when cloning the "STARTERKIT" into a subtheme. The Drush command provided by Zen automates this and makes it a relatively painless process. If you need to install Drush, see our related video tutorial, Installing Drush with Composer, or read the instructions for installation on the Drush web site.

In the next tutorial, I'll briefly explain why you might want to use a base theme and when it makes the most sense to do so. After that, I will walk through and highlight some of the HTML5 semantic markup in Zen's template files, contrasting the markup with the corresponding template files in the core Drupal 7 theme, Bartik.

Other tutorials in the Markup in Drupal series also use a subtheme of Zen, called zendemo, as a theme for the demo site. This was done to demonstrate how markup is first and foremost affected by the theme. It was also done to show how using a base theme that uses semantic HTML5 markup can be advantageous if you want to use HTML5 elements in the built-out components and pages of your Drupal site.

To follow along, download the latest version of Drupal 7, and follow the instructions in the video for installing Zen and a creating a subtheme.

In the downloads section below you'll find a database and files downloads, which is the state of the site after this tutorial, with Zen and the subtheme "zendemo" installed.

Downloads: 
Log in or sign up to download companion files.

Average review

0
No votes yet

Reviews