Tutorial: Easy Breadcrumbs Without a Plugin

by Mike Nichols

Breadcrumbs are used by many bloggers to show the user exactly where they are on the blog. It lists the file path from the home page to the current file, usually in a line of text between the header and the content. Visitors appreciate knowing where they are in a blog, especially if it is very large and has lots of pages.

The most popular breadcrumbs plugin is Yoast Breadcrumbs, which does a good job — it even has a setting to automatically place the breadcrumbs in the Thesis theme. But like most plugins, it is pretty inflexible about placement, font changes, and other customizations. And…it’s another plugin to add to your already-overloaded list!

This tutorial describes the Easy Breadcrumbs addition to Thesis. It shows the file path to where you are, and correctly shows the parent of a child page. It can be placed anywhere that there is a Thesis hook, and can be put on the left or right or even centered. It is very easy to install and requires no settings other than values you might want to change in custom.css (you can use it as-is, too). And the code is very small and makes few demands on your system.

Figure 1: Easy Breadcrumbs on the home page of a blog

Figure 1: Easy Breadcrumbs on the home page of a blog

Figure 1 shows Easy Breadcrumbs on the home page of a blog. The display would be much the same if you have a static site and your front page is a page rather than a post.

Figure 2: Easy Breadcrumbs showing the parent of a child file

Figure 2: Easy Breadcrumbs showing the parent of a child file

Figure 2 is the file path of a child page. Note that the parent page is correctly shown in the file path. Note that the links, shown in blue, are clickable, so you can go to any page in your breadcrumb list.

Figure 3: Easy Breadcrumbs showing a post

Figure 3: Easy Breadcrumbs showing a post

Figure 3 shows a post on a blog with the file path leading back to home.

Easy Breadcrumbs has these great features:

  • Quick and easy to install.
  • Correctly shows the parent of a child page.
  • Clickable links in the breadcrumbs to previous or parent pages.
  • Has versions for breadcrumbs everywhere or everywhere but the front page.
  • Can be fully configured in custom.css and custom_functions.php
  • Very small and efficient code
  • Works right out of the box with no settings or customizations.

Easy Breadcrumbs is released under the Creative Commons Attribution-Share Alike 3.0 license, which means you are free to use and modify the code as long as you share it with others and attribute it to me. If you do share the code, please include the version and attribution header at the top of each file.

For your convenience, I have a created a zip file with all the code listed below. It has everything you need in a single zip file. You can download it by clicking here.

Navigation in the Tutorial

This tutorial for the Easy Breadcrumbs is in 4 parts. If you want to skip to a particular section, just click on the links below:

How Easy Breadcrumbs works

Easy Breadcrumbs consists of three files — but most people will only need two of them. They are:

  • The for-custom_functions.php file contains two small functions. You get to choose which one you will use.
  • The for-custom.css file has three selectors that control the Easy Breadcrumbs’ size, placement and appearance.
  • The for-css-menu.css file is needed only if you use the CSS Multilevel Dropdown Menu found on this site.

Following are complete listings of all these files with descriptions:

for-custom_functions.php file

The code for the Easy Breadcrumbs contains two functions -- you will use only one of them. There is a version in which the breadcrumbs appear everywhere but on the front page, and another version where they appear everywhere. Note that the functions are very small: 14-17 lines, according to which version you use. Installation instructions are below in their own section.

/*=================================================*/
/* EASY BREADCRUMBS */
/* Version 1.0 */
/* Written by Mike Nichols December 23, 2009 */
/* Website: http://thesisthemetools.com/ */
/* Copyright (c) 2009 by Michael L Nichols */
/* License: Creative Commons Share-Alike 3.0 */
/* http://creativecommons.org/licenses/by-sa/3.0/ */
/* THIS NOTICE MUST STAY WITH ANY COPY DISTRIBUTED */
/*=================================================*/

/* VERSION 1: BREADCRUMBS DO NOT APPEAR ON FRONT PAGE BUT EVERYWHERE ELSE */
function breadcrumbs_no_front_page() {
if (is_front_page());
else {
global $post;
?>
<div id="breadcrumbs">
You are here: <a href="<?php bloginfo('home'); ?>">Home</a> >
<?php $parent = $post->post_parent;
$parent_title = get_the_title($parent);
echo '<a href="'.get_permalink($parent) .'">' . $parent_title .(''); ?> </a> >
<?php the_title(''); ?>
</div>
<?php
}
}
/* Hook this anywhere you want */
add_action('thesis_hook_before_content_box', 'breadcrumbs_no_front_page');

/* VERSION 2: BREADCRUMBS APPEAR EVERYWHERE */
function breadcrumbs_everywhere() {
global $post;
?>
<div id="breadcrumbs">
You are here: <a href="<?php bloginfo('home'); ?>">Home</a> >
<?php $parent = $post->post_parent;
$parent_title = get_the_title($parent);
echo '<a href="'.get_permalink($parent) .'">' . $parent_title .(''); ?> </a> >
<?php the_title(''); ?>
</div>
<?php
}
/* Hook this anywhere you want */
add_action('thesis_hook_before_content_box', 'breadcrumbs_everywhere');
for-custom.css file

This file contains three selectors for the Easy Breadcrumbs. They control the size of the container box that holds the breadcrumbs, certain fixes for alignment problems, and the characteristics of the fonts used. There is a separate section below about customizing the selectors.

/*=================================================*/
/* EASY BREADCRUMBS */
/* Version 1.0 */
/* Written by Mike Nichols December 23, 2009 */
/* Website: http://thesisthemetools.com/ */
/* Copyright (c) 2009 by Michael L Nichols */
/* License: Creative Commons Share-Alike 3.0 */
/* http://creativecommons.org/licenses/by-sa/3.0/ */
/* THIS NOTICE MUST STAY WITH ANY COPY DISTRIBUTED */
/*=================================================*/

#breadcrumbs {
/* heignt and width of the container box */
height: 12px;
width: 600px;
/* border for testing */
/*border: 1px solid #000000;*/
/* moving text within the container box */
/*padding: 5px 0px 5px 0px;*/
/* moving the container box around*/
/*position: relative;*/
/*top: 0px;*/
/*left: 0px:*/
/* to keep the breadcrumbs from showing under another object */
/*z-index: 0;*/

/* font properties */
color: black;
font-size: 1em;
/*font-family: Verdana, Arial, sans-serif;*/
/*font-weight: bold;*/
/*text-decoration: underline;*/
/*text-transform: uppercase;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
text-align: left;
}

/* link and visited properties of fonts */
#breadcrumbs a:link,
#breadcrumbs a:visited {
color: black;
font-size: 1em;
/*font-family: Verdana, Arial, sans-serif;*/
font-weight: bold;
text-decoration: none;
/*text-transform: uppercase;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
}

/* hover properties of fonts */
#breadcrumbs a:hover {
color: red;
font-size: 1em;
/*font-family: Verdana, Arial, sans-serif;*/
font-weight: bold;
text-decoration: underline;
/*text-transform: uppercase;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
}
for-css-menu.css file

You will not need this file unless you are using the CSS Multilevel Dropdown Menu. It prevents the breadcrumbs from showing through the CSS menu. See below for complete installation instructions.

/*=================================================*/
/* EASY BREADCRUMBS */
/* Version 1.0 */
/* Written by Mike Nichols December 23, 2009 */
/* Website: http://thesisthemetools.com/ */
/* Copyright (c) 2009 by Michael L Nichols */
/* License: Creative Commons Share-Alike 3.0 */
/* http://creativecommons.org/licenses/by-sa/3.0/ */
/* THIS NOTICE MUST STAY WITH ANY COPY DISTRIBUTED */
/*=================================================*/

/* This selector is the first in the css-menu.css file.*/
/* You will be adding only the last two lines.*/
#css_menu {
/* width of menu */
width: 892px;
/* center menu tabs or not */
/*text-align:center;*/
/* put your positioning statements here */
margin-bottom: 10px;

/* add these two lines */
position: relative;
z-index: 100;

}

How to install Easy Breadcrumbs

I would be surprised if it took you more than 15 minutes to install the Easy Breadcrumbs, including time to fire up your FTP and text editor programs! Following are complete instructions on how to do it:

Installing the functions in the for-custom_functions.php file

There are only two functions in the for-custom_functions.php file. The one you use depends on how you want to display the Easy Breadcrumbs:

  • Use the breadcrumbs_no_front_page function if you want breadcrumbs on every page except the front page. It specifically excludes the front page of a blog or static site from displaying breadcrumbs.
  • Use the breadcrumbs_everywhere function to display the breadcrumbs on every page and post.

Be sure to use only one of these functions! If you use both you will have two lines of breadcrumbs!

The function you choose can be put anywhere in your custom_functions.php file. However, I recommend that you place it at the end.

You can display the Easy Breadcrumbs anywhere on the page, even the footer! Most people put breadcrumbs between the header and/or menu and the top of the content box. The add_action statement in the provided code places it right over the content box. According to your other customizations, you might want to hook it below the header, as follows:

add_action('thesis_hook_after_header', 'breadcrumbs_everywhere');

Installing the selectors in the for-custom.css file

You will use all of the selectors contained in the for-custom.css file. You may put them anywhere in the custom.css file you want, but I recommend you put them at the end.

That's all there is to installing the selectors! Really! How to customize them is below in a separate section.

Installing the code in the for-css-menu.css file

You need this code only if you are using the CSS Multilevel Dropdown Menu and the breadcrumbs are showing through the menu. Otherwise you can safely skip to the next section.

There are two lines you need to add to your #css_menu selector in the css-menu.css file. Here's how to do it:
1. Open your css-menu.css file in your favorite text editor. You may also open it in your second-favorite one, for that matter.
2. Go to the end of the file and find the "/*===== DO NOT CHANGE ANYTHING BELOW THIS LINE =====*/" comment.
3. Break the rules and delete the first line. It looks like this:

#css_menu { z-index: 100; }

4. Go back to the top of the file. Find the #css_menu selector. It is the very first one.
5. Insert the two lines marked /* add these two lines */ at the end of the #css_menu selector after all the rest of the property statements but before the curly bracket. It will look something like this when you are finished:

#css_menu {
/* width of menu */
width: 892px;
/* center menu tabs or not */
/*text-align:center;*/
/* put your positioning statements here */
margin-bottom: 10px;
/* add these two lines */
position: relative;
z-index: 100;
}

These two properties make the menu float over other objects under them, covering them up. If you are still having trouble with see-through, see the "Making the breadcrumbs disappear under other objects" section below.

Customizing Easy Breadcrumbs in custom.css

You can use Easy Breadcrumbs right out of the box. The default values are set up the way many people want them.

However, the looks of Easy Breadcrumbs can be changed in many ways. You can change the font properties to almost anything, move the container box around -- you can even put a border around it!

For your convenience, the properties discussed in the first part of this section dealing with the container box are listed below:

	/* height and width of the container box */
height: 12px;
width: 600px;
/* border for testing */
/*border: 1px solid #000000;*/
/* moving text within the container box */
/*padding: 5px 0px 5px 0px;*/
/* moving the container box around*/
/*position: relative;*/
/*top: 0px;*/
/*left: 0px:*/
/* to keep the breadcrumbs from showing under another object */
/*z-index: 0;*/

The size of the area that Easy Breadcrumbs occupies

Easy Breadcrumbs is displayed in an invisible container box. The size of this container box is determined by the height and width properties of the #breadcrumbs selector. The default values will suit most installations. However, you might want to change them in these circumstances:
1. You have a very large font size and part of the text is being cut off. Increase the size of the height property a little. Remember that the more you increase this property, the larger the invisible container box will be, and the more space there will be between the screen objects that are above and below it.
2. You have a small font size and there's too much space between the breadcrumbs and the objects above and below it. Decrease the size of the height property a little. If you make it too small, though, part of your text may be cut off.
3. The breadcrumbs line is wrapping to a second line with long file names. Increase the size of the width property some -- I suggest in 50 pixel increments. Make sure that the width of the invisible container box is not larger than the distance between the left side of the menu and the right side of your content or sidebar (according to your column arrangement). Strange things might happen if it is too big!

Note that you can test the size of your area that Easy Breadcrumbs occupies by uncommenting the border property. It will show a border around the otherwise invisible container box that your breadcrumbs occupy. Be sure to comment it again when you are finished testing, unless you like the border!

Moving the text around in the invisible breadcrumb container box

If while testing you turn the border on (see above) and find the text is too close to one of the sides of the container box, use the padding property to change it. Note that this property is only found in the #breadcrumbs selector.

Remember that the four values in the padding property are in clockwise order: top, right, bottom, left. The default setting in the code is for the top and bottom. You can use em's or pixels for this value -- I like pixels. Setting the value higher moves the text away from the border, lower moves it closer.

Moving the breadcrumbs box around

If your breadcrumbs container box is too close or far away from the objects around it, you can use relative positioning to move the container box around. Here's how to do it:
1. Find the #breadcrumbs selector
2. Uncomment the border property so you can see what you're doing.
3. Uncomment the position property.
4. If your box is off vertically, uncomment the top property. If it is not positioned well horizontally, uncomment the left property.
5. Put a positive or negative value into the appropriate property. You can use em's or pixels; I use pixels because it gives fine control without using the decimal values of em's. Remember that with positive numbers, the greater the value the more it pushes the box away from the adjacent object. With negative numbers, higher values pull it in that direction.

Making the breadcrumbs disappear under other objects

Sometimes it happens that the breadcrumb line can be seen through other objects that are over it. The most common instance are menus with dropdowns. This is easy to fix -- all you have to do is:
1. Find the #breadcrumbs selector
2. Uncomment the position property.
3. Uncomment the z-index property.

This works, mostly. If the object coming over the breadcrumbs does not have the position: property and a z-index value greater than zero, the breadcrumbs will still show through it. The only fix for this is to add these properties to the offending object, but how to do so is a story for another day.

Changing Easy Breadcrumbs' font characteristics

Other than the height and width properties of the #breadcrumbs selector, all the properties in the three breadcrumb selectors are for fonts. They are standard CSS properties. I will describe them briefly, but if you want more information, see the CSS Text and CSS Font pages on the w3schools.com site. I have certainly not put all the properties that are available for fonts in the code, and you may want to add some more.

To help you see the font properties, the properties of the three selectors are listed below. Note that none of them are commented out so they are easier to read:

	color: black;
	font-size: 1em;
	font-family: Verdana, Arial, sans-serif;
	font-weight: bold;
	text-decoration: underline;
	text-transform: uppercase;
	font-style: italic;
	font-variant: small-caps;
	text-align: left;
}

Here are some font properties you can change:
Color: Use the color property to change the font color. You can use either the standard CSS color words, as I have, or hex codes. If you use hex codes, be sure to precede the numbers with a hash/pound sign (#).
Font Size: Oddly enough, font size is determined by the value in the font-size property. The value can be expressed in em's or pixels. If using em's remember that you can have decimal values, like .95. If your font size is very large or very small, you may want to change the height of the breadcrumbs' invisible box; see the section above on how to do that.
Font Family: The font-family property governs which font the breadcrumbs use. If you leave it commented out, the breadcrumbs will use the default font you set in Thesis Design Options. See the w3schools.com pages to learn more about font families.
Font Weight: The most common values of font-weight is bold or normal. You use normal when, for example, everything else is bold and you don't want the font to be bold. Comment it out if you have nothing special to do with font weight.
Text Decoration: The most common use of text-decoration is underlining. There are several other values possible. Leave it commented out unless you specifically need to set it to none.
Text Transformation The property text-transform can "transform" text to all capitals (capitalize), all lower case (lowercase), or all uppercase (uppercase). The most common is all uppercase. Leave it commented out if you are not using it.
Font Style: The usual values for font-style are italic and normal. Use normal when everything else has a different font style and you want the text to not have it. If you have nothing special to do with font styles, comment it out.
Font Variant: The value of font-variant can be normal, small-caps, or inherit. Small caps are where what would be capitalized uses a large capital letter, and everything else uses a smaller capital letter. Use normal when you want the font to not follow the font style of everything else. Use inherit when you want to use whatever is the default.
Text Alignment: This property determines whether the text of the breadcrumbs is aligned left or right. It is found only in the #breadcrumbs selector. Use the left value for left alignment, the right value for right alignment. To center the breadcrumbs line, you have to move the container box around. See the section above on how to do that.

Customizing Easy Breadcrumbs in custom_functions.php

There are only a few customizations that are possible in the functions provided, but some may want to do them. The part of the functions that can be changed are the same in both versions. They are:

Change the "You are here:" phrase

This is found right below the "div" statement, as shown below. You can change it to anything you want. If you make the phrase too long, you may have to change the dimensions of the container box, as described above. Here is the part of the functions where you change the phrase:

	<div id="breadcrumbs">
You are here: <a href="<?php bloginfo('home'); ?>">Home</a> >

Change the "Home" word

Once again, this is found right below the "div" statement. You can change it to anything you want. Refer to the example above to see where it is found. Be sure not to disturb any of the code surrounding the word!

Changing the ">" character

This character is the separator between the various files in the breadcrumb line. You can change it to anything you wish. It is found in two places: in the echo line surrounded by single quotes, and in the following line at the end of the line, as illustrated below:

		echo '<a href="'.get_permalink($parent) .'">' . $parent_title .('');  
?> </a> >

When you change these symbols, make sure that you do not alter any of the surrounding code. It is especially important to be careful on the echo line. Note that there is a double quote that must be retained next to the > character: '">'.

For example, if you want to change the > character to =>, the code would look like this when you are done:

		echo '<a href="'.get_permalink($parent) .'"=>' . $parent_title .('');  
?> </a> =>

Conclusion

For your convenience, I have a created a zip file with all the files mentioned in this article. It has everything you need in a single zip file. You can download it by clicking here.

I hope you have found this tutorial easy to follow and that it answers all your questions. If it doesn't leave a comment below or email me directly by clicking on the "Contact" tab in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog's community! Leave a comment now, or read the comments.

You can find several related articles in the "Related Articles" list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There's also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It's free and is a great way to make sure you don't miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under "Share This Article With Others" for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Be Sociable, Share!