Basic Theming: Move AddThis to the Top

Prerequisites: Drupal 6, PHP, Basic theming

By default, the AddThis contrib puts a pretty button at the bottom of nodes, enabling users to share your content with various social networks. But what if you want to show the button at the top of the node instead of the bottom? Here's a quick way to do that.

You can, of course, just skip the AddThis module and add your own code from AddThis wherever you want, but that's not the point of this post. We're going to make a few small adjustments at the theme layer in order to make it happen.

Step 1. Add a new template variable and modify the old one

This code goes in your theme's template.php file. If you don't already have a preprocess_node hook, create a function called mytheme_preprocess_node(&$variables) (substituting your own theme name, of course). The preprocess_node hook simply prepares variables for use in your node template. There are two elements of interest to us in the $variables parameter: the links string and the node object. The links string is merely the literal HTML that gets displayed (usually) at the bottom of nodes. It contains things like links to add a comment or read more, read counts, and in this case, the AddThis button. Within the node object is another links element, but this contains the items separated into an array instead of rendered together in a single string.

function mytheme_preprocess_node(&$variables) {
  if (!empty($variables['node']->links['addthis'])) {
    $variables['addthis'] = $variables['node']->links['addthis']['title'];
    unset($variables['node']->links['addthis']);
    $variables['links'] = theme_links($variables['node']->links, array('class' => 'links inline'));
  }
}

All we're doing is taking the AddThis HTML and putting it in it's own template variable, called addthis ($variables['addthis']), and then recreating the links template variable ($variables['links']) without it.

Step 2. Use the new addthis variable

This part goes in your theme's node template (e.g., node.tpl.php). Remember that addthis variable we just created? Just print it out where you want it.

<?php if ($addthis): ?>
  <div class="addthis">
  <?php print $addthis ?>
  </div>
<?php endif; ?>

For convenience, we created an addthis div and put it above the content but below the title.

Step 3. Style it with CSS

Lastly, style it with your CSS of choice. We wanted it hanging out on the right, on the same line as the Submitted by info.

.addthis {
  float: right;
}

One last thing: in order for this to take effect, you may have to rebuild your theme registry or flush your caches depending on the state of the site. You can do this with the devel or admin_menu contribs or, lacking those, go to admin/settings/performance and click Clear Cached Data.

That does it. A basic solution to a basic problem.