Custom Drupal Search Block

Recently a client wanted an unusual block. The block contained three social media links (facebook, twitter and youtube) and the search form. The easy solution would be with a static block or block menu and position it with css, but I wanted all the markup in a single block...ok here we go!

Custom Drupal Search Block - Step 1.
First create a custom module. This will require an .info file and .module file. My module is called deckfifty:

My deckfifty.info file contains:

name = deckfifty custom
description = "deckfifty.com custom"
core = 6.x

My deckfifty.module file utilizes Drupal's hook_block() function:

/**
 * Implementation of hook_block().
 */
function deckfifty_block($op = 'list', $delta = 0) {

}

Custom Drupal Search Block - Step 2.
Now I'll add a block, give it a name which I've wrapped in the t() function, and use a separate function to supply the content (_deckfifty_social_media_search):

/**
 * Implementation of hook_block().
 */
function deckfifty_block($op = 'list', $delta = 0) {
  switch ($op) {
    case 'list':
      $blocks[0]['info'] = ' t('Social Media and Search')';
      return $blocks;
    case 'view':
    	switch ($delta) {
	      case 0:
	      	$block['content'] = _deckfifty_social_media_search();
	      	break;
      }
      return $block;
  }
}

Custom Drupal Search Block - Step 3.
Now lets define the content function and add the static social media links:

function _deckfifty_social_media_search() {
	$output = '';
	
	//facebook	
	$output .= '<div class="social-media"><a title="like us on facebook" class="facebook" href="http://www.facebook.com">like us on facebook</a></div>';
	
	//twitter 
	$output .= '<div class="social-media"><a title="follow us on twitter" class="twitter" href="http://www.twitter.com">like us on twitter</a></div>';
	
	//youtube
	$output .= '<div class="social-media"><a title="watch us on youtube" class="youtube" href="http://www.youtube.com">watch us on youtube</a></div>';
	
	return $output;
}

Custom Drupal Search Block - Step 4.
For us to display the search form we'll call the drupal_get_form function:

function _deckfifty_social_media_search() {
	$output = '';
	
	//facebook	
	$output .= '<div class="social-media"><a title="like us on facebook" class="facebook" href="http://www.facebook.com">like us on facebook</a></div>';
	
	//twitter 
	$output .= '<div class="social-media"><a title="follow us on twitter" class="twitter" href="http://www.twitter.com">like us on twitter</a></div>';
	
	//youtube
	$output .= '<div class="social-media"><a title="watch us on youtube" class="youtube" href="http://www.youtube.com">watch us on youtube</a></div>';
	
	//search
	$output .= '<div class="social-media last">'.drupal_get_form('search_block_form').'</div>';
	
	return $output;
}

Ok, we're almost done. Save the file and enable the block. Of course you'll want to do a little styling to get it just right, but at least this way all your markup will be in one block!

Shane Graham

Shane Graham

Shane Graham is a senior Drupal developer and co-founder of Deck Fifty Design.

Get in touch

Let's go!

We look forward to hearing from you!