Add Breadcrumbs to WordPress Without a Plugin

Breadcrumbs are a great way to give people a perspective of where they are on your site. You can easily add them via several good plugins (my favorite is Yoast Breadcrumbs), but sometimes you want to build breadcrumbs into a theme without using a plugin, especially if you’re releasing it to the public. This was what I needed to do with my latest latest WordPress theme. So here’s what I did…

1. I created a php file called breadcrumbs.php and inserted the following code…

  1.  
  2. <div class="breadcrumbs">
  3.  
  4. <?php
  5.  
  6. function breadcrumbs() {
  7.     $theFullUrl = $_SERVER["REQUEST_URI"];
  8.     $urlArray=explode("/",$theFullUrl);
  9.     echo ‘You Are Here: <a href="/">Home</a>’;
  10.     while (list($j,$text) = each($urlArray)) {
  11.         $dir=”;
  12.         if ($j > 1) {
  13.             $i=1;
  14.             while ($i < $j) {
  15.                 $dir .= ‘/’ . $urlArray[$i];
  16.                 $text = $urlArray[$i];
  17.                 $i++;
  18.             }
  19.             if($j < count($urlArray)-1) echo ‘ &raquo; <a href="’.$dir.‘">’ . str_replace("-", " ", $text) . ‘</a>’;
  20.         }
  21.     }
  22.     echo wp_title();
  23. }
  24. breadcrumbs();
  25. ?>
  26.  
  27. </div><!–/breadcrumbs–>
  28.  

Notice that I’ve included an opening and closing div with the pseudoclass of “breadcrumbs” so that I can add some style to the stylesheet.

2. Wherever I want to include the breadcrumbs in my theme files, I add this line…

  1.  
  2. <?php include ( TEMPLATEPATH . ‘/breadcrumbs.php’); ?>
  3.  

That’s it! You can do the same by creating a function in your functions file and then calling the function in your theme, but I think this may be the most simple way to reach the objective.

Want to customize it a bit? Notice that I’ve “echoed” the phrase “You Are Here:” but you can change that text to whatever you’d like to lead the breadcrumb trail. And you can also change the “»” near the bottom to a “|” or “/” or whatever you like. Then you can style your breadcrumbs in the stylesheet.

There are probably better ways, but this is my way. Enjoy.

Share and Enjoy:

  • RSS
  • email
  • Print
  • Twitter
  • FriendFeed
  • del.icio.us
  • Posterous
  • Tumblr
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Design Float
  • Digg
  • Ping.fm
  • Mixx
  • Google Bookmarks
  • Netvibes
  • NewsVine
  • Identi.ca
  • Slashdot
  • Reddit
  • Technorati

Filed Under: Uncategorized

Tags / Keywords: , , , , ,

Shorter URL: http://www.egracecreative.com/?p=711

Comments

13 Responses to “Add Breadcrumbs to WordPress Without a Plugin”
  1. Webdesigner says:
    August 26, 2009 at 7:55 am

    Wow, this is what I was searching for so long! I always try to avoid the use of another plugin. So this is a great snippet of script. Thanx!!!

    Reply
  2. Tess says:
    November 3, 2009 at 8:02 am

    Thanks so much, this is a great little script. Basing breadcrumbs on urls is brilliantly logical. Thanks again.

    Reply
  3. Marj Wyatt says:
    March 7, 2010 at 2:35 pm

    Your breadcrumb script really is far more elegant than installing a Wordpress plugin, and more durable too. After working out a few “single quote” issues from the copy and past, the snippet worked perfectly!

    Thanks so much for sharing it.

    Marj Wyatt aka Virtually Marj

    Reply

Leave a Comment...
Want a picture? Get a gravatar!

Receive A Proposal