Upgrading the Busy theme to Drupal 8

Back when Drupal 7 was being developed, there was a big inititiative about getting new pretty themes into Drupal core. There were three really good suggestions, one of them being Bartik, which the most people got behind, so it could be finished in time to get into Drupal 7 core. One really good suggestion that couldn't be finished in time was Corolla by Jeff Burnz, which is now a contrib theme. The third suggestion was our theme Busy by eigentor, a theme targeted at corporate websites. Just like Corolla, there wasn't enough time to finish it up for Drupal 7 core. Busy has been a contributed theme ever since, because we didn't want it to get lost only because it didn't make it into Drupal core.

After DrupalCon Portland we got really excited about Drupal 8 so we decided to see how porting Busy would go. Work had to be done to exchange some template variables and rename some files, but it was pretty straightforward and only took a little more than an hour to finish. After twig was moved to core as the new default template engine, some more work had to be done (see "Upgrading a phptemplate theme from Drupal 7 to Drupal 8").

Busy will stay minimally maintained for now, though we might port it to use twig in the future.

If you want a new look for your Drupal 8 site, check out Busy and let us know what you think!

Upgrading a phptemplate theme from Drupal 7 to Drupal 8

So now that twig is in core as the default template engine, how do you port your theme to Drupal 8? We considered converting the theme to twig, but that would take up too much time for now. We just wanted to publish the theme for Drupal 8 as soon as possible. At first of course, we ported the theme to the new structure. These are just a few changes, like renaming the THEME.info file to THEME.info.yml and changing its contents to yml, which is simple. You can check core's bartik.info.yml to see how this needs to be done. Your template.php file is renamed to THEME.theme, the contents of this file didn't have to be changed for Busy. We did have to change some variable names in some of our template files (like the comment template) by referring to core's templates, which are nicely documented within each file. For example, in our comment.tpl.php, we had to replace $picture with $user_picture.

THEME.info.yml file

If you have a phptemplate theme, simply add this line to the theme's .info.yml file:

engine: phptemplate

Without this line you will not even be able to activate the theme.

Menus, breadcrumbs, messages

After adding this line, you might still have problems seeing the theme you're used to. In Busy we got fatal errors due to the way we printed the menus in our page.tpl.php. This is what it looks like in Drupal 7:

<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'clearfix')))); ?>

And this is what we need to do now to print menus like the main menu in your page.tpl.php:

<?php print render($main_menu); ?>

If you want to add classes or ids to the menu, you can do the following in your THEME.theme file (In Drupal 7 this file is called template.php):

/**
 * Implements hook_preprocess_HOOK() for page.tpl.php
 */
function busy_preprocess_page(&$variables) {
  // Pass the main menu and secondary menu to the template as render arrays.
  if (!empty($variables['main_menu'])) {
    $variables['main_menu']['#attributes']['id'] = 'main-menu';
    $variables['main_menu']['#attributes']['class'] = array('links', 'clearfix');
  }
  if (!empty($variables['secondary_menu'])) {
    $variables['secondary_menu']['#attributes']['id'] = 'secondary-menu';
  }
}

Now if you print variables like $messages just using print $messages, you will not get any output. Look through the code in your page.tpl.php for any print $VARIABLE and make it print render($VARIABLE). We had to do this for $breadcrumb and $messages.

Drupal 8's theming system is still under heavy construction and I'm sure there will be more stuff we'll have to change in our template files very soon, but this way works well for now if you are just interested in porting your phptemplate theme to Drupal 8.

Comments

tdimg's picture
tdimg

I haven't really looked at Drupal 8 yet, though this change in embedding the main menu looks very backwards - why would I want to touch my theme file for simple layout amendments such as adding classes and ids?

And going further than that, where would I change how the main menu would be rendered, i.e. how would I change it from an unordered list to an ordered list?

Seems more and more like Drupal 8 is going into a direction I don't want to follow, but maybe that's intentional as I'm more of a simple site builder than a Drupal developer.

Fabianx's picture
Fabianx

Well, Twig initiative here. The idea is to move PHP code out of the templates.

So https://drupal.org/node/2008450 is our plan for tackling this, which means to make things drillable and essentially allows inline templating.

Like in a twig template:

<ol class="{{ main_menu.attributes.class }} my-class"{{ main_menu.attributes }}>
{%foreach main_menu.links as link %}
<li>{{ link }}</li>
{%endfor}
</ol>

In PHP you would probably need to do something like:

$main_menu_d = render_structure($main_menu);
echo '<ol class=" . $main_menu_d['attributes']['class'] . ">';
foreach ($main_menu_d['links'] as $link) {
echo '<li>' . render($link) . '</li>';
}
echo '</ol>';

Another approach is a custom Twig extension that provides addClass|removeClass|attr filters - in jQuery style.

That would lead to a syntax like:

{{ main_menu|addClass('x')|removeClass('y') }}

And in PHP, well, you can do the set and unset of classes also directly in PHP, so no big problem there.

jbob's picture
jbob

How do you get the main menu to expand and show level 2 manu items? I'm using it with Drupal 7 for now and like it's location. If I use another menu (like super fish), I can't get it in the same place because the Navigation div isn't available to place blocks in.

Thanks.

John

Anja Schirwinski user image
aschiwi

Hi John,
Please check busy's issue queue on drupal.org or create a support request ticket there.

bikeman's picture
bikeman

"If you have a phptemplate theme, simply add this line to the theme's .info.yml file:
Without this line you will not even be able to activate the theme."

Come on, what line?

Anja Schirwinski user image
aschiwi

@bikeman: It says right underneath, it's an embedded gist (what device can you not see it from?). The line is: "engine: phptemplate". However, I am not sure if this still works with the current Drupal 8 beta, keep in mind this blog post is 1,5 years old.

Add new comment