This tutorial explains how I used a custom Drupal module to create a richer user experience for the Cornerstone Church Media page. It builds on my earlier tutorial on Creating a Simple Drupal Module and does not require advanced PHP skills. This technique could also be used to build a custom front page for a site.

When we first launched the Cornerstone website on Drupal, the Media page was a lackluster mess of plain text and links that didn't really grab a site visitor's attention. A few months ago, Cornerstone's designer sent me a mock-up of a new graphics-rich design for the page.

After separating content from presentation, it was clear that the page was simply two views and a menu with a little CSS applied. The Recent Sermons view and Cornerstone Media menu could be simple unordered lists. The Cornerstone Series was simply an adaptation of our existing Cornerstone Series page view.

I started by creating a view named media_recent_sermons. I did not need to create a page or block display. This tutorial uses the view output generated from Defaults. I also created a menu called menu-cornerstone-media. (note: Drupal prepends the menu- to whatever menu name you enter.) I already had a view called current_series, which I tweaked a little with the changes we wanted to make.

Now it was time to generate a page. Like my previous tutorial, I used the hook_menu() API to create a new page with a URL of /media:

/**
  * Implementation of hook_menu().
  */
 
function mysite_menu() {
  $items['media'] = array(
    'title' => 'Media',
    'page callback' => 'mysite_page_media',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

This tells Drupal to set up a page at /media titled "Media", using the function mysite_page_media to generate the content and allowing access to anyone with permission to "access content".

The magic happens in the page callback, where I used two functions, views_embed_view() and menu_tree() to render the contents of my views and menu. Here's a stripped down version so you can see how it actually works:

/**
 * Simplified page callback for the media page.
 */
function mysite_page_media() {
  $output = '<div>';
  $output .= '<div>'. views_embed_view('media_recent_sermons') .'</div>';
  $output .= '<div>'. menu_tree('menu-cornerstone-media') .'</div>';
  $output .= '<div>'. views_embed_view('series') .'</div>';
  $output .= '</div>';
  return $output;
}

Of course, we want to add nice things like titles and markup to help us theme our page, so my actual output is a little more complicated. I also added links to a FAQ page and to the full list of sermon series.

/**
 * Page callback for the media page.
 */
function mysite_page_media() {
  $output = '<div id="media-index"><div class="clear-block">';
  $output .= '<div id="media-recent-sermons">';
  $output .= '<div class="section-header clear-block"><h2 class="title">'. t("Recent Sermons") .'</h2></div>';
  $output .= views_embed_view('media_recent_sermons') .'</div>';
  $output .= '<div id="media-cornerstone-media">';
  $output .= '<div class="section-header clear-block">'
  $output .= '<h2 class="title">'. t("Cornerstone Media") .'</h2>'. l('(?)', 'media/faq');
  $output .= '</div>';
  $output .= menu_tree('menu-cornerstone-media') .'</div>';
  $output .= '</div>';
  $output .= '<div id="media-cornerstone-series">';
  $output .= '<div class="section-header clear-block">';
  $output .= '<h2 class="title">'. t("Cornerstone Series") .'</h2>'. l(t("more series"), 'media/series');
  $output .= '</div>';
  $output .= views_embed_view('series') .'</div>';
  $output .= '</div>';
  return $output;
}

You may notice the use of the Drupal l() and t() functions to create links and make all hard-coded strings translatable.

Before adding the CSS needed to make the cool-looking buttons, the rendered HTML output looks a bit like this:

(Note: I did add the necessary floats to div#media-recent-sermons and div#media-cornerstone-media before taking this screenshot.)

The rest of the job was standard CSS text-replacement techniques, which I won't detail here, since it's not Drupal-specific.

I've spent a lot of time looking at the Drupal API Reference to figure this stuff out. There are some decent examples there to get you started. However, this site only documents Drupal Core. The Lullabot Drupal API Reference includes documentation for popular contrib modules, including Views. This reference (along with an old blog post by Matt Farina) was invaluable for trying to figure out how to do this.