Adding social icons to Multipurpose Theme for Drupal

The Multipurpose Theme used in Drupal is a nice clean theme.  It alos provides a section of social icons links. But when you look at the theme settings you will notice there are only entries for Twitter, Facebook, Google Plus, Pinterest.

This post is related to Drupal 7x and the related theme.

So what about the remaining? 

Well to enable any thing extra you need to do some addition to your theme code. We will need to edit the following two files:

1. Your-Drupal-Install/sites/all/themes/multipurpose/theme-settings.php
2. Your-Drupal-Install/sites/all/themes/multipurpose/templates/page.tpl.php

What to edit/add?

In the file theme-settings.php towards the end you will find multiple entries for generating form element for social icon.  The code looks like the following:

 $form['multipurpose_settings']['socialicon']['pinterest_url'] = array(
    '#type' => 'textfield',
    '#title' => t('Pinterest Address'),
    '#default_value' => theme_get_setting('pinterest_url', 'multipurpose'),
    '#description'   => t("Enter your Pinterest URL. Leave blank to hide."),
  );

Just copy paste one of this block and paste it after the last one. Next change  say 'Pinterest' to 'Instagram'. Note that only in the #title part you need to keep first letter capital.  In all the other places it in all small cases. Save this file. Your code should look something like this:

$form['multipurpose_settings']['socialicon']['instagram_url'] = array(
    '#type' => 'textfield',
    '#title' => t('Instagram Address'),
    '#default_value' => theme_get_setting('instagram_url', 'multipurpose'),
    '#description'   => t("Enter your instagram URL. Leave blank to hide."),
  ); 

Now we will edit the page.tpl.php, this file is responsible for display of the icon and the link associated. Simply search for pinterest_url or facebook_url, you will come across the following line of codes:

      $twitter_url = check_plain(theme_get_setting('twitter_url', 'multipurpose')); 
      $facebook_url = check_plain(theme_get_setting('facebook_url', 'multipurpose')); 
      $google_plus_url = check_plain(theme_get_setting('google_plus_url', 'multipurpose')); 
      $pinterest_url = check_plain(theme_get_setting('pinterest_url', 'multipurpose'));     

Copy one of the lines and add in as last one in the section  and change say  'pinterest' to 'instagram'. Make sure your spellings are same in both the files. Your code should look linke the following:

      $twitter_url = check_plain(theme_get_setting('twitter_url', 'multipurpose')); 
      $facebook_url = check_plain(theme_get_setting('facebook_url', 'multipurpose')); 
      $google_plus_url = check_plain(theme_get_setting('google_plus_url', 'multipurpose')); 
      $pinterest_url = check_plain(theme_get_setting('pinterest_url', 'multipurpose');
      $instagram_url = check_plain(theme_get_setting('instagram_url', 'multipurpose'));

Next in the same file search for header-social block. In this you will find code blocks for display of icon if there information is filled in the appearance section. You should see code some thing like this:

<?php if ($pinterest_url): ?><li>
<a target="_blank" title="<?php print $site_name; ?> in Pinterest" href="<?php print $pinterest_url; ?>">
<img alt="Pinterest" src="<?php print base_path() . drupal_get_path('theme', 'multipurpose') . '/images/social/pinterest.png'; ?>"> </a>
 </li><?php endif; ?>

Copy paste this complete just after the last one. Make sure you paste it just before the closing tag of list. Change all reference of say 'pinterest' to 'instagram'. You entry should look something like this:

<?php if ($instagram_url): ?><li>
<a target="_blank" title="<?php print $site_name; ?> in Instagram" href="<?php print $instagram_url; ?>">
<img alt="Instagram" src="<?php print base_path() . drupal_get_path('theme', 'multipurpose') . '/images/social/instagram.png'; ?>"> </a>
</li><?php endif; ?>

Save this file.

Where will the icon come from?

The theme has most of the icons avaible for the social networking site in the "Your-Drupal-Install/sites/all/themes/multipurpose/images/social/".  If your icon is missing upload it here. The icon should be 32x32 pixels.

Finally enable your newly added section by going to the themes setting and adding the required entry.  (admin/appearance/settings/multipurpose).

Hope this helps.