The most important consideration when converting themes to Backdrop is the concept that your theme is no longer responsible for the layout of a site. This is because of the introduction of Layout module, Backdrop's drag and drop page layout builder.

Layout module provides several responsive page layouts out of the box: a single column layout, a pair of two column layouts (left or right sidebar), and a multi-region stacked layout similar to the layout provided by the Bartik theme in Drupal 7. In the Layouts interface, blocks are provided to place the site header, main navigation, search box, and so on. All these elements can be rearranged by dragging and dropping blocks into the regions provided by the layout.

Porting a theme mainly now consists of the application of the old theme's style to the new theme, excluding the page layout. Once this is understood, the conversion should be reasonably simple.

Before you begin

Before you start porting a module, please create the two recommended issues stated on the Communicating section of the Converting to Drupal page.

Convert the .info file.

See for info file recommendations. The main change is that the version string needs to be updated to backdrop = 1.x rather than core = 7.x. All region information also is unnecessary; this is now up to Layout module.

Deal with node.tpl.php first

We're going to get rid of page.tpl.php eventually, but it should not yet be deleted.

Convert un-processed arrays
The process layer was removed in Backdrop, so now some arrays which were previously translated to strings in process need to be flattened in your templates.

<?php print $classes; ?> now becomes <?php print implode(' ', $classes); ?>
<?php print $attributes; ?> now becomes <?php print backdrop_attributes($attributes); ?>
<?php print $content_attributes; ?> now becomes <?php print backdrop_attributes($content_attributes); ?>

The comments have new renderables
Previously comment information was stored in $content['comments'].

Now comments are in $comments, as in:
$comments['comments']: Rendered comments for this node.
$comments['comment_form']: Form for adding a new comment.

See the documentation for all the available variables in node.tpl.php.

At this point it may be reasonable to try to see if this theme can be enabled, but it is likely that remaining old incompatible code in other templates may lead to errors. If the other templates are temporarily moved out of the theme folder or renamed, the theme can be enabled to see if node displays work well, and if theme CSS is being picked up. Once this is done, continue by taking a last look at page.tpl.php.

Update CSS to target HTML elements that are consistent across all layouts
In Drupal 7 themes, a global page layout is usually specified by CSS that targets specific elements in page.tpl.php. For example: Here was your custom page.tpl.php

  <div id="page">
    <header class="header"></div>

And here was your custom CSS...
  #page { width: 100%; }
  .header { width: 960px; }

The CSS will need to be mapped to elements that are consistent across all layouts, instead of custom markup provided in a theme's page template. Layout provides the following page HTML structure:

<body class="page front logged-in admin-bar">
  <div class="layout--two-column-flipped layout">
    <header class="l-header" role="banner" aria-label="Site header">...<header/>

In this case, CSS previously targeting #page could be switched to target .layout instead.

  .layout { width: 100%; }
  header { width: 960px; }

The effect would therefore a similar page design. Similar conversion need to apply to all page.tpl.php elements such as footer, sidebar, highlights and so on. The details of this operation would obviously vary based on the complexity of the theme.

When this is done, page.tpl.php is no longer necessary. Some other templates may require a similar mapping process before they are deleted. At all points, the changes can be confirmed by refreshing the browser. Once page layout is satisfactory, other templates can be adjusted.

Modify other templates.
Other templates may require conversion of $classes and $attributes arrays as described previously. Once converted, they may be brought back one by one into the template folder. Clear cache, view and confirm.

If your theme previously provided javascript for sliders or drop-down menus, these can optionally be removed. Layout module allows for swappable sliders, menus and more, without requiring hard-coding into the theme. If you would like to leave the javascript for your menus in place, please be careful with your CSS selectors, knowing that users will be swapping out different elements.