Dec 232011
 

Breadcrumbs are these tiny paths you find at the top of the page. Next to the menus they provide an additional way to navigate the site. Furthermore, they help the visitor to position himself within the site’s structure.

Ideally, the breadcrumbs show the path the visitor should take through the menus to get to the current page. However, that is not always possible. Sometimes a page is part of more than one hierarchy or the Content Management System (CMS) uses a different way to organize its content.

Finally, providing breadcrumbs navigation might also improve your search engine rankings, as it interconnects your pages more tightly.

Breadcrumbs Display Function

Here is the breadcrumbs display function we wrote in PHP:

// breadcrumbs
function gp_display_breadcrumbs () {

  // display breadcrumbs
  // breadcrumbs array may be unset, null, or empty

  // preconditions:
  // $GLOBALS["gp_page_breadcrumbs"]: array[array[name, link]]

  // breadcrumb separator
  $breadcrumb_separator_encoded = "»";

  if (isset ($GLOBALS["gp_page_breadcrumbs"]) && is_array ($GLOBALS["gp_page_breadcrumbs"]) &&
      !is_null ($GLOBALS["gp_page_breadcrumbs"])) {

    echo ("<p class=\"breadcrumbs\">\n");

    foreach ($GLOBALS["gp_page_breadcrumbs"] as $breadcrumb) {

      if (isset ($breadcrumb["name"]) && is_string ($breadcrumb["name"]) && $breadcrumb["name"] != "") {

        echo ("<span class=\"breadcrumb\">");

        if (isset ($breadcrumb["link"]) && is_string ($breadcrumb["link"]) && $breadcrumb["link"] != "") {

          echo ("<a href=\"" . gp_display_core_text2html ($breadcrumb["link"]) . "\">");

          $link_flag = true;

          }
        else {

          $link_flag = false;

          }

        echo (gp_display_core_text2html ($breadcrumb["name"]));

        if ($link_flag) {

          echo ("</a>");

          }

        echo ("</span>");

        echo (" " . $breadcrumb_separator_encoded . "\n");

        }

      }

    echo ("</p>\n\n");

    }

  }

As you can see, the function is pretty straightforward: it displays a paragraph containing the linked breadcrumbs. The names and links are taken from the nested array $GLOBALS["gp_page_breadcrumbs"].

We can set this array in the PHP preamble:

$gp_page_breadcrumbs = array (
  array (
    'name' => "Artikelen",
    'link' => "/artikelen/",
    ),
  array (
    'name' => "Sociale media en online presence",
    'link' => "/artikelen/social_media_online_presence.php",
    ),
  );

Of course, instead of setting these breadcrumbs by hand, you would rather have the array filled automatically. But whether that is actually possible depends on the structure of your site.

The breadcrumbs display function is as foolproof as possible: an empty array or empty elements are simply skipped. If the link of a breadcrumb is not set, only its name is displayed.

Function Call

The actual call of the newly created function is placed in the HTML page, right after the design part and the display of the notifications and confirmations, and right before the main content:

// breadcrumbs
gp_display_breadcrumbs ();

CSS Stylesheet

The last thing to do, is to add design information to the CSS stylesheet:

/* breadcrumbs */

p.breadcrumbs {

  font-size: 9pt;

  }

p.breadcrumbs span.breadcrumb {

  }

p.breadcrumbs span.breadcrumb a {

  }

That allows us to change the appearance of the breadcrumbs navigation. Here we only set the font size to 9pt instead of the 10pt we have specified for our content globally.

Leave a Reply