Drupal Tip #6: Add a breadcrumb to your forum

Even if the default Drupal breadcrumb is already really good, it could be slightly improved when used with the forum module. Here is how we process.

Forum Breadcrumb Screenshot

Breadcrumbs are particularly useful for your readers to know exactly where they are in your forum (which series of categories they clicked to arrive here). It's even more important if you want to improve your SEO, as breadcrumb could (it's actually optional) be used by Google to display a clear position of a page in your website plan in their search results.

  1. First, you have to create your own breadcrumb function, inspired by the return value of the drupal_get_breadcrumb(), that you improve a little bit.

    template.php

    function get_forum_breadcrumb() {
     $current = drupal_get_breadcrumb();
     
     if (count($current) == 1) {
      // Rename Forums -> Discussions
      $current[0] = "<a href='/discussion'>Discussion Index</a>";
     }
     else {
      unset($current[0]);
      // Rename Forums -> Discussions
      $current[1] = str_replace("Forums", "Discussion Index", $current[1]);
     }
     
     return join(" <span class='separator'>&gt;</span> ", $current);
    }
  2. Then, modify the page preprocessor, by adding a new variable that will contain the forum breadcrumb. Note that we also define a new template file, called page-node-forum.tpl.php, that will be used only when you display a full forum topic.

    template.php

    /**
     * Add a Javascript method to redirect, if needed, the comment hash to the review conclusion page
     */
    function yourtheme_preprocess_page(&$variables) {
     
     ...
     
     $node = $variables["node"];
     
     // See page-forum.tpl.php
     if ($variables["template_files"][0] == "page-forum") {
      $variables["forum_breadcrumb"] = get_forum_breadcrumb();
      ...
     }
     // See page-node-forum.tpl.php
     else if ($node->type == 'forum') {
      $variables['template_files'][0] = 'page-node-forum';
     
      $variables["forum_breadcrumb"] = get_forum_breadcrumb();
      ...
     
     }
     
     ...
    }
  3. Third, add this new variable to the right templates (page-forum.tpl.php and page-node-forum.tpl.php):

    page-forum.tpl.php

    ...
     
    <?php if ($show_messages && $messages): print $messages; endif; ?>
     
    <div id="forum-section" class="section"><?php print $forum_breadcrumb; ?></div>
     
    <?php if ($tabs): print '<div>'; endif; ?>
    <?php if ($title): print '<h2>'. $title .'</h2>'; endif; ?>
    <?php if ($tabs): print ''. $tabs .'</div>'; endif; ?>
    <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
    <?php print $help; ?>
     
    <?php print $content ?>
     
    ...

    page-node-forum.tpl.php

    ...
     
    <?php if ($show_messages && $messages): print $messages; endif; ?>
     
    <div id="forum-section" class="section"><?php print $forum_breadcrumb; ?></div>
     
     
    <?php if ($tabs): print '<div>'; endif; ?>
    <?php if ($title): print '<h2>'. $title .'</h2>'; endif; ?>
    <?php if ($tabs): print ''. $tabs .'</div>'; endif; ?>
    <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
    <?php print $help; ?>
     
    ...

  4. And finally, for Forum Software Reviews fans, here is the CSS style we used here.

    style.css

    /*
     * Forum Node content
     */
    #forum-section {
     background: #ddd url(images/forum.png) no-repeat 6px 50%;
     border:  1px solid #ccc;
     font-size:    14px;
     padding:    5px 15px 5px 35px;
     margin:     30px 0 15px;
     border-radius:    3px;
     -moz-border-radius:  3px;
     -webkit-border-radius:  3px; 
     
    }
     
    #forum-section a {
     font-weight:  normal;
     color:    #666;
    }
     
    #forum-section a:hover {
     border-bottom:   1px solid #666;
    }
     
    #forum-section .separator {
     color:    #999;
     font-size:   11px;
    }
     
     
    .section {
     padding-left:  25px;
     margin-bottom:  8px;
     color:    #4477AA;
     font-size:   14px;
     font-weight:  bold;
    }
     
    .section span {
     color:    #555;
    }

Clear your Drupal Cache, and congratulations, you are now using a new and enhanced breadcrumb!

Keywords:
Comments are closed.

Comments (7)

I am trying to create this

I am trying to create this breadcrumb.

Do I place these functions within the forum folder under modules or under my theme folder. My template file is in my theme folder.

I do not have files that are called
page-forum.tpl.php
page-node-forum.tpl.php

Do I create these? And if I do where do I place them?
Thanks
Daniele

Top
lastnico's picture

Hi, You can place these

Hi,

You can place these functions in the template.php file, in your template folder. Same for the two files you talk about. They will override those from Drupal, once you reset all your Drupal cache.

Do not hesitate if you have further questions

FSR Admin - Vote for 2012.

Top

Excellent tips. Worked like a

Excellent tips. Worked like a charm. Thank you.

Top

This would be a very useful

This would be a very useful tweak for me to have! But I have one challenge. Where do I find the page preprocessor to insert those redirects? I'm still on Drupal 5.

Thanks so much!
Chris

Top

Never mind. Just figured out

Never mind. Just figured out that Drupal 5 doesn't support the page preprocessor.

Top

I am really not too familiar

I am really not too familiar with this subject but I do like to visit blogs for layout ideas. You really expanded upon a subject that I usually don’t care much about and made it very exciting. This is a unique blog that I will take note of. I already bookmarked it for future reference.Thank you
good birthday quotes

Top

Hi Lastnico. I want to thank

Hi Lastnico. I want to thank you for writing such great articles and I have found the Drupal Tip series to be extremely helpful. I have tried to install this tip but afterwards, all formatting on my forum page is wiped out so I would like to see if you know what I'm doing wrong.

On step 2, I'm not quite sure I did this right.

Before:
---------
function acquia_prosper_preprocess_page(&$variables) {
$node = $variables["node"];

// See page-node-forum.tpl.php
if ($node->type == "forum") {
$variables['template_files'][0] = 'page-node-forum';

$variables["who_is_online"] = who_is_online();
}
}
---------

After:
---------
function acquia_prosper_preprocess_page(&$variables) {
$node = $variables["node"];

// See page-forum.tpl.php
if ($variables["template_files"][0] == "page-forum") {
$variables["forum_breadcrumb"] = get_forum_breadcrumb();
}

// See page-node-forum.tpl.php
if ($node->type == "forum") {
$variables['template_files'][0] = 'page-node-forum';

$variables["who_is_online"] = who_is_online();
}
else if ($node->type == 'forum') {
$variables['template_files'][0] = 'page-node-forum';

$variables["forum_breadcrumb"] = get_forum_breadcrumb();
}
}
---------
Also, for step 3 I do not have a file called "page-forum.tpl.php" in my theme's folder, is the alternative to create a new file with this name and the associated code? Also for the file "page-node-forum.tpl.php", I had to create this file from Drupal Tip #5, Who is Online. After this mod my file looks like this, is this correct?:

<?php print $content ?>
<?php print $who_is_online; ?>

<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $forum_breadcrumb; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $forum_breadcrumb; ?>
<?php if ($tabs): print ''; endif; ?>
<?php if ($title): print ''. $title .''; endif; ?>
<?php if ($tabs): print ''. $tabs .''; endif; ?>
<?php if ($tabs2): print '

    '. $tabs2 .'

'; endif; ?>
<?php print $help; ?>

Thanks in advance.

Top
  Top Top