Convert a Word Press theme to Drupal

public
paddy@deburca.org - Thu, 2007-11-15 10:47

The example WP theme I am trying to use is sodelicious_black.

page.tpl.php

Combine header.php, page.php and footer.php into on new file called page.tpl.php. In this new page.tpl.php file:

  • Replace your DOCTYPE and HTML lines with
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  • Replace the TITLE with
    <title><?php print $head_title ?></title>
  • Replace the links to style sheets, RSS news feeds and the such with
    <?php print $head ?> <?php print $styles ?> <?php print $scripts ?>
  • Clean up the page.tpl.php by removing the obsolete calls to get_header() and get_footer()
  • Replace echo get_settings("home") with print base_path()
  • Replace bloginfo("name") with print $site_slogan ? $site_slogan : $site_name
  • Drupal uses syntax such as
        <?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"));
    }
    ?>

       
    for navigation, so replace the navigation block with this code
  • At the beginning of the main content block, Drupal customarily has a bunch of information such as
    <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>
    <?php print $content; ?>
  • The Search blocks are created by Drupal, so remove any code builds a search block – just remember where it was located (top, left, centre, right, footer regions)
  • Replace get_sidebar(); with print $sidebar_left . $sidebar_right;
  • The Recent Posts blocks are created by Drupal, so remove any code that builds a Recent Posts block – just remember where it was located
  • Clean up the code and balance all your DIV‘s and SPAN‘s

node.tpl.php

The single.php will get trimmed to become the node template – node.tpl.php

  • Start off by removing everything that is already in the page template – page.tpl.php – basically everything before and including the while (have_posts()) loop
  • Replace the_ID() with print $node->nid;
  • Replace permalink() with print $node_url;
  • Replace the_title() with print $title;
  • Replace the Author block with
        <?php if ($submitted) { print "<span class='submitted'>" . $submitted . "</span>"; } ?>
       
  • Replace the Category block with
        <?php if ($taxonomy) { print "<div class='terms'>" . $terms . "</div>"; } ?>
       
  • Replace the Comments block with
        <?php if ($links) { print "<div class='post-tags'>" . $links . "</div>"; } ?>
       
  • Add <?php print $picture ?> before the content to support user pictures
  • Replace the_content("Read more"); with print $content;

comment.tpl.php

The comment.php will get trimmed to become the comment template – comment.tpl.php

  • As before, start off by removing everything that is already in the page template – page.tpl.php – basically everything before and including the foreach ($comments) loop
  • Replace comment_ID() with print $comment->cid;

Results

And there you should have an almost working Drupal theme closely relating the previous WP theme.

  • Sodelicious homepage

  • Sodelicious content

  • Sodelicious edit

  • Sodelicious gallery

  • That’s all folks.

Thanks a lot for this

toma's picture
toma - Thu, 2007-11-15 12:42

Thanks a lot for this tutorial, will bring some good wp themes to drupal :)


sodelicious_black and sodelicious2_green

paddy@deburca.org - Thu, 2007-11-15 21:15

When I have ironed out the rough edges to both sodelicious_black and sodelicious2_green, I will upload both to Drupal Themes.

I also want to start to convert The Fresh theme from http://www.bartelme.at too.

One major part of the conversion process is the update of the WP templates replacing calls to wp functions with calls to similar Drupal functions. I am playing with the idea of creating in template.php, a list of WP functions that then call their Drupal equivalents.

This will make the initial translation easier - giving maximum results for minimum effort. A more 'professional' Drupal theme would, of course, use native Drupal functions.

Paddy.

Copyright?

jayjenxi - Sat, 2007-11-24 13:39

I'm pretty new to this so please bear with me. How do I go about dealing with the copyrights of the themes? Should I approach the author and request for permission? Or are there themes that are free for conversions?

Copyright needs to be respected

paddy@deburca.org - Sat, 2007-11-24 19:57

In the case of the Sodelicious_black, the theme is readily available for download from http://www.web2themes.com/2007/07/19/sodelicious-black-version/ and to the best of my recollection (and I just checked ) does not contain a specific copyright notice.

In some themes, there is a copyright.txt file that either includes a GPL copyright notice or a Creative Commons notice. In any case the copyright should be respected.

My feeling on this subject, is that once the theme has been released by the theme author for general consumption, then it should be consumable -- even on multiple platforms.

The designer, http://www.bartelme.at/, includes the gpl.txt as part of themes, opening such themes for conversion to other platforms, but requiring that the GPL copyright remains and that the theme remains open.

A fantastic source of inspiration is http://csszengarden.com/. A lot of the designs contain copyrighted images - meaning that you can convert the theme to Drupal or whatever else you like, but you can't use or even release the final theme to the general public without the express consent of the image creator.

You can also head off to http://www.oswd.org, grab a design and convert it. It is open source, you should be able to do that - but you should also give credit where credit is due. The theme author has spent time and effort creating the theme, comparatively you spend a little bit of time converting the theme - if the author has a 'theme created by' text in the theme, be nice and leave it there.

I am not a lawyer, and I freely admit that I don't know the in's and out's of copyright law. But I try my best to apply the following

  • if it contains a copyright that allows me to convert, so well and good - respect the copyright and if possible convert and maintain the copyright
  • if there is no copyright and the theme is freely available from popular theme sources for public use, convert - but don't add a copyright
  • if there is no copyright and the theme is not freely available - you may take inspiration from the theme but you may not copy the theme
  • if there are statements stating that you may not copy aspects of the theme without the authors consent - again, you may take inspiration from the theme but you may not copy the theme

This is my personal opinion and not a fact of law - please correct me if I am wrong.

Paddy.

Thanks for the information

jayjenxi - Sun, 2007-11-25 11:44

I will try to work along these lines, unless someone comes along an point us in a more proper direction.

Legally copyright is in

femrich's picture
femrich - Thu, 2008-08-21 06:46

Legally copyright is in force regardless of whether there is a notice of copyright or not. What you should look for if you want to use a theme is a license (such as the GPL, in the case of Drupal) that specifically states permission is granted for people to use and convert the files.


Currently I have very little

neopet001 - Tue, 2008-03-25 17:33

Currently I have very little php knowledge, so maybe this tutorial is missing much thing to me, so I can't finish this by following all these.
I'll very happy and glad is someone could upload a finished pack of this converting theme tutorial.
If luckily I have one and find out what to do with, I'll join and contribute to the group much.
Thanks again dude