Convert the Fresh (Expression Engine) Theme to Drupal

I have never used the Expression Engine (EE) before, so this is a complete experiment. Let’s see how it goes… with the Fresh theme

page.tpl.php

From what I can see, EE has a file called index.txt that displays almost everything. This file is our page.tpl.php candidate.

• Remove the
  {assign_variable:master_weblog_name="journal"}
{assign_variable:main_template_group="bartelme"}
  from the beginning of the index.txt file
• In the html definition, replace {lang} with en – this is just a fix for en web sites – a proper i18n solution should be implemented for production sites
• Replace {exp:weblog:info weblog="{master_weblog_name}"}{blog_title}{/exp:weblog:info} with <?php print $head_title; ?>
• Drupal adds metadata itself, so you don’t have to worry about it – so remove it
• Remove links to stylesheets and javascripts and add
    <?php print $head; ?>
  <?php print $styles; ?>  
  <?php print $scripts; ?>
• Replace {homepage} with <?php print $base_url; ?>
• Replace {exp:weblog:info weblog="{master_weblog_name}"}{blog_title}{/exp:weblog:info} with <?php print $site_name; ?>
• Replace {exp:weblog:info weblog="{master_weblog_name}"}{blog_description}{/exp:weblog:info} with <?php print $site_slogan; ?>
• Replace the navigation block with
  <?php if (isset($primary_links)) {
  print theme('links', $primary_links, array('class' => 'navmenu primary-links'));
} ?>
<?php if (isset($secondary_links)) {
  print theme('links', $secondary_links, array('class' => 'navmenu secondary-links'));
} ?>
• Replace the search code {exp:search:simple_form search_in="everywhere" result_page="search/results"}...{/exp:search:simple_form} with <?php print $header; ?> we will assign the search form to the header block to appear here
• In the About section, replace the paragraph text with the mission statement <?php print $mission; ?>
• In the posts section, add the Drupal messages, help, tabs and the rest
  <div class="post-main">
  <?php if ($breadcrumb) { print $breadcrumb; } ?>
  <?php if ($mission) { print '<div id="mission">'. $mission .'</div>'; } ?>
  <?php if ($tabs) { print '<div id="tabs-wrapper" class="clear-block">'; } ?>
  <?php if ($title) { print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; } ?>
  <?php if ($tabs) { print $tabs .'</div>'; } ?>
  <?php if (isset($tabs2)) { print $tabs2; } ?>
  <?php if ($help) { print $help; } ?>
  <?php if ($show_messages && $messages) { print $messages; } ?>
</div>
• Copy the text to print the posts and paste it to node.tpl.php
• Replace the code {exp:weblog:entries weblog="{master_weblog_name}" limit="1" sort="desc" orderby="date"}...{/exp:weblog:entries} and {exp:weblog:entries weblog="{master_weblog_name}" limit="2" offset="1" sort="desc" orderby="date"}...{/exp:weblog:entries} with
  <?php if ((strlen($content) > strlen('<div class="post-meta">')) && (substr($content, 0, strlen('<div class="post-meta">')) == '<div class="post-meta">')) {
  print $content;
} else {
  print '<div class="post-main">' . $content . '</div>';
} ?>
<div class="clear-block clear"></div>
• Remove the Comments block as this is also managed by Drupal
• Replace the code inside the sidebar-wrapper with <php print $sidebar_left . $sidebar_right; ?>
• Replace the code inside the footer section with <?php print $footer_message; ?>

The final page.tpl.php file looks like

node.tpl.php

As mentioned above, strip out the part of the index.txt file that deals with posts (or nodes in Drupal-talk) and put it into a node.tpl.php file.

• The new node.tpl.php file should contain
  <div class="post">
  <h2 class="post-title"><a href="{entry_id_path=bartelme/comments}" title="Read '{title}'">{title}</a></h2>
  <div class="post-meta">
    <em>{entry_date format="%d %M %Y"}</em>
    <a class="comments" href="{permalink}#comments">{comment_total} Comments</a>
  </>
  <div class="post-content">
    {exp:markdown}{summary}{/exp:markdown}
    <a href="{entry_id_path=bartelme/comments}" class="more">continue reading "{title}"</a>
  </div>
</div>
  and all this needs to be converted
• Replace {entry_id_path=bartelme/comments} with <?php print $node_url; ?>
• Replace {title} with <?php print $title; ?>
• Replace {entry_date format="%d %M %Y"} with <?php print date('d M Y', $node->created); ?>
• Replace the comments section with <?php if ($links) { print '<div class="comments">' . $links . '</div>'; } ?>
• Replace {exp:markdown}{summary}{/exp:markdown} with <?php if ($page == 0) { print '<h2><a class="post-title" href="' . $node_url . '" title="' . $title . '">' . $title . '</a></h2>'; } ?>
• Replace <a href="{entry_id_path=bartelme/comments}" class="more">continue reading "{title}"</a> with
  <div class="post-entry">
  <?php print $content ?>
</div>
<div class="clear-block clear"></div>
• Add a line to print the taxonony terms <?php if ($taxonomy) { print '<div class="terms">' . $terms . '</div>'; } ?>

The final node.tpl.php file should look something like the following

comment.tpl.php

Copy the node.tpl.php file to comment.tpl.php.

• Update it a bit to suit comments and you have something like

style.css

The rest of the work is CSS related – find out what does not work, update the CSS to use the Drupal names and fix the problems one at a time.

The result

• Home page

• Node

• Node edit

What it should look like

To do

There is still a lot to do - CSS mostly - but the core is there.