DDMSEO - Full Stack Developer based in London

Optimize your website SEO with X-RAY SEO Auditor

Published: 20th Dec 2017 | Words: 1,562 | Reading Time: 8 minutes

Categories / Tags:

Development
PHP
HTML

Building a breadcrumb dynamically

Most websites and backend admin systems will probably need a HTML breadcrumb both to direct users and give them a navigation system. They also give you benefit in the search engine result page. Here is an example of how to build a dynamic breadcrumb which can save you having to code out a lot of HTML across your website. The advantage to using this type of method is you can be sure the breadcrumb will always come out the same spec, void of any errors as it is being generated using the same HTML within the class. It also includes Breadcrumb Schema.

The breadcrumb PHP class

For this particular functionality there are numerous ways to build it, to call it, and integrate it. For the purpose of this article we will be building it using a simple class object. In reality how you implement it is completely up to you.

This breadcrumb can be styled easily by wrapping it within a div with an id of breadcrumb or similar. Add it within the function or on your page.

The breadcrumb has integrated Schema breadcrumb tags to better display in the SERP (Search Engine Results Page) and if you are going to use it with other Schema make sure to wrap your page in a webpage Schema tag.

class breadcrumb
{
   private $breadcrumb; // holds the HTML

   private $separator; // the HTML divider between breadcrumbs

   private $domain; // the website the links point to

   public function build($array)
   {
      // build the breadcrumb here
   }
}

Before we go any farther let me explain how values will be passed into the function / method to generate each breadcrumb. We will be using associative arrays to pass values in the format of the key equals the individual breadcrumb title and the value equals the breadcrumb link. If you don’t know anything about associative arrays, read up on PHP arrays here.

array('title' => 'link');

For multiple breadcrumb we simply add more titles and links in associative array format. The values passed will be available within the build function through the $array variable which we will loop through.

array('Title 1' => 'page-1.html', 'Title 2' => 'page-2.html') // passing two pages

Before we build the loop we are going to add another breadcrumb element, the home page. This will always be the first breadcrumb element and we add this element to the start of our array using array_merge. Because we are setting a $domain variable which contains our main domain link we don’t need a value for the home page key in the array.

class breadcrumb
{
   private $breadcrumb;

   private $separator = ' / ';

   private $domain = 'https://ddmseo.com';

   public function build($array)
   {
      $breadcrumbs = array_merge(array('home' => ''), $array);

      $count = 0;

      // build the breadcrumb here
   }
}

Now we have am array with the home page as the first key value pair and various other array elements that make up the other breadcrumbs. You may notice we have also added a variable called count with the value of 0. This variable will count up / increment with every iteration of the breadcrumb loop. As the function loops and creates a new breadcrumb this value will increase by one. The reason for this is to do with the $separator variable to which we have assigned a forward slash (/) value. If the count is lower to the count of breadcrumbs a separator should show after each breadcrumb. This stops a / separator showing after the last breadcrumb. We have also added a value to the domain variable corresponding to the domain the breadcrumb links point to.

The breadcrumb HTML loop

Below is the finished class with the HTML loop included. As you can seem the foreach function loops through each breadcrumb, places the $title key as the breadcrumb title, the $link value as the breadcrumb link, generates the HTML, assigns it to the breadcrumb $variable using $this->breadcrumb, and checks whether it’s not the last breadcrumb so a separator is placed.

class breadcrumb
{
   private $breadcrumb;

   private $separator = ' / ';

   private $domain = 'https://ddmseo.com';

   public function build($array)
   {
      $breadcrumbs = array_merge(array('home' => ''), $array);

      $count = 0;

      foreach($breadcrumbs as $title => $link) {
         $this->breadcrumb .= '
         <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="'.$this->domain. '/'.$link.'" itemprop="url">
               <span itemprop="title">'.$title.'</span>
            </a>
         </span>';

         $count++;

         if($count !== count($breadcrumbs)) {
            $this->breadcrumb .= $this->separator;
         }
      }
      return $this->breadcrumb;
   }
}

If you want to call this method you simple create a breadcrumb object and pass the breadcrumb array to the build function as below.

$breadcrumb = new breadcrumb();

echo $breadcrumb->build(array(
   'Development' => 'development',
   'PHP Breadcrumb' => 'php-breadcrumb.html'
));

Home / Development / PHP Breadcrumb // the HTML output with links

Rate this article

Average: 0.00 out of 5 / Votes: 0

Comments

Please login or register to post comments

Login | Register