Crafting beautiful & functional websites since 2005

Creating a drop-down login block in Drupal 7

6th August 2012
An example of the drop-down in action

I recently had need to create a simple drop-down login block for a Drupal 7 project I was working on. There appeared to be nothing lightweight and easy already built for this so I created a little custom module to do it for me.

This blog post won't cover the basics of how to create a custom module - for that stuff check out this article from Drupal.org. Feel free to download the module - but don't forget to change the package name in the .info file.

There are 3 main elements to this module:

  1. Adding the css and js to style and animate the drop-down
  2. Creating the block
  3. The code for the drop-down within the block incorporating the default Drupal login form

Firstly, I used hook_init to add my 2 theming-related files like so:

function dropdown_login_init() {
  drupal_add_css(drupal_get_path('module', 'dropdown_login') . '/theme/dropdown_login.css');
  drupal_add_js(drupal_get_path('module', 'dropdown_login') . '/theme/dropdown_login.js');
}

Then I implemented hook_block_info and hook_block_view to create the block in the Drupal back-end. This also tells the block to populate its content with the output of our get_dropdown() function (see later in this post).

function dropdown_login_block_info() {
  $blocks['login_dropdown'] = array(
    'info' => t('Dropdown Login'),
  );
  return $blocks;
}

function dropdown_login_block_view($delta = '') {
  $block = array();

  switch ($delta) {
    case 'login_dropdown':
      $items = array();
      $block['content'] = get_dropdown();
      break;
  }
  return $block;
}

Finally, the function itself.

The first part uses the global user object to assess whether or not the user is logged in. A user id of 0 tells us that the user is anonymous, therefore anything other than zero is a logged-in user.

function get_dropdown() {  
  // Call global user object
  global $user;
  
  // Values for if user is logged out
  if ($user->uid == 0):
    $linktext = '<span><span>Login</span></span>';
    $link = 'user';
    $linkclass = 'login';
  
  // Values for if user is logged in
  else:
    $linktext = '<span>Logout</span>';
    $link = 'user/logout';
    $linkclass = 'logout';
  endif;

Then we add the html mark-up for the login/logout button and drop-down login. It's not always wise to put the mark-up directly in the module itself - sometimes it can be separated out using a theme hook - however, in this case the module was so small it seemed silly to separate it out.

Note that I have used the Drupal link function instead of just coding an anchor in HTML - this ensures there will be no broken links.

The login form itself uses the default Drupal login form called using drupal_get_form.

  // Code output for the drop-down button
  $output = '<div id="dropdown-login">';
  $output .= l($linktext, $link, array('attributes' => array('class' => array($linkclass, 'button')), 'html' => TRUE));
  
  // Drop-down mark-up for a logged-out user
  if ($user->uid == 0):
    $output .= '<div class="dropdown">';
    $output .= render(drupal_get_form('user_login'));
    $output .= '</div>';
  endif;
  
  $output .= '<div>'
  
  return $output;
}

Once the module is installed and the styling has been customised, the finished drop-down should look something like the image at the top of this post. Initially, the button will appear without the drop-down and when clicked the login form will slide down.

And that's all there is to it!

Comments

Very nice, thanks for the good work

where i need to insert the functions??
in templetate.php ??

Hi Ram,
It's best to create a custom module for something like this as detailed in the first couple of paragraphs of this blog post.
I hope that helps!

Add new comment

This is so I can get in touch with you if your comment warrants it - it will not be displayed publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.