An Unexpect End Error

Ok, so a few of you have reported a PHP error involving an unexpected $end in breadcrumb_navxt_admin.php on line 1567. After some searching and thinking, the cause was found. Line 1248 of breadcrumb_navxt_admin.php has an improper opening tag (<? instead of <?php). For some reason only Windows based PHP installations were catching this. None-the-less, this has been fixed in the SVN trunk and a bug fix release, 3.4.1, will be made next week.

As one has not been able to reproduce this error on either of one’s testbeds, feedback from those who had this error is essential to ensuring that it is fixed. If you experience the error with Breadcrumb NavXT 3.4.0, please try the SVN trunk and see if it is resolved and report back in the comments section of this post.

-John Havlik

[end of transmission, stay tuned]

Vista-Like Breadcrumbs for WordPress

applevista-breadcrumbs2

Update: This was modified on February 10, 2015 to reflect changes in suggested calling code for Breadcrumb NavXT. Note that the Breadcrumb NavXT Multidimension Extensions plugin handles the PHP side of things covered in the guide below.

Update: This was modified on January 11, 2011 to reflect changes in the code base of Breadcrumb NavXT. Note that this should now work for all newer versions of Breadcrumb NavXT (3.6.0 up to 4.0). It will not work for the proposed Breadcrumb NavXT 4.0.

Previously, one revealed how to apply Janko’s Apple.com-like breadcrumb trail tutorial to WordPress using Breadcrumb NavXT. After several requests for a breadcrumb trail a la the one found in Explorer since Windows Vista, this guide was created. While this guide will not provide a method to exactly recreate the Vista breadcrumbs, it will be in the same spirit. The Apple.com breadcrumb trail style will be extended; a simple replacement of images and minor CSS tweaking will result something behaving very similar to the vista breadcrumb trail.

Download sources | View Demo

Continue reading

Breadcrumb Patent

Want a breadcrumb trail on your website that behaves like the Windows 7 Explorer breadcrumb trail? If you live within the United States, or any of its territories, then you may need a patent use license.

w7breadcrumb

US Patent Application No. 20080282199 covers all breadcrumb arrangements used on the internet that resemble those in Windows 7. This patent was filed in late 2008, and seems to be pending USPTO approval. While some of its claims cover features of Breadcrumb NavXT, Breadcrumb NavXT qualifies as prior art (Breadcrumb NavXT has supported hierarchical categories since 2.0.0 Beta 1, way back in November 2007).

This was found in the midst of research for implementing custom taxonomy support in Breadcrumb NavXT. In the next release, 3.4.0, taxonomy support will be completely reworked. This will enable support any flat and hierarchical taxonomy for post organization and archives. The former was implemented and in the SVN Trunk, the latter is a work in progress at the moment. Note that the SVN Trunk should be considered volatile at this time, and may contain code that does not fully work.

-John Havlik

[end of transmission, stay tuned]

Keep the Current Page Out of the Breadcrumb Trail

Note: This guide is only valid for versions of Breadcrumb NavXT prior to 4.0. Since Breadcrumb NavXT 4.0 the bcn_after_fill action should be used to remove breadcrumbs from the breadcrumb trail.

Over the past year, several individuals have inquired on the feasibility of removing the current item (page, post, etc) from the Breadcrumb trail. While this is not good form, every page in the hierarchy should be represented in the breadcrumb trail, one will discuss how to remove the current item from the breadcrumb trail.

As in the Keep a Page Out of the Breadcrumb Trail guide, the method discussed herein differs from earlier methods provided in response to comments elsewhere. Likewise, this method uses the OOP principle of inheritance and requires PHP5–as does Breadcrumb NavXT so that should not be a problem.

Previously, removing the current item from the breadcrumb trail was the suggested method of implementation. While this works great, it does have some flexibility issues. And, it will not work if the bcn_breadcrumb_trail::trail array is a private or protected member variable (which may happen in the future). Instead, this guide will override the bcn_breadcrumb_trail::display() member function.

First, open the functions.php file of your theme. Within it we are going to create a new class named ext_breadcrumb_trail, and tell PHP that it is an extension of the bcn_breadcrumb_trail class. We will place the skeleton for the class constructor in at this time as well.

class ext_breadcrumb_trail extends bcn_breadcrumb_trail
{
	//Default constructor
	function __construct()
	{
		//Need to make sure we call the constructor of bcn_breadcrumb_trail
		parent::__construct();
	}
}

Now, onto overriding bcn_breadcrumb_trail::display(). If you do not use bcn_breadcrumb_trail::display_trail() then this is all you will need:

class ext_breadcrumb_trail extends bcn_breadcrumb_trail
{
	//Default constructor
	function __construct()
	{
		//Need to make sure we call the constructor of bcn_breadcrumb_trail
		parent::__construct();
	}
	/**
	 * display
	 *
	 * Breadcrumb Creation Function
	 *
	 * This functions outputs or returns the breadcrumb trail in string form.
	 *
	 * @return void Void if Option to print out breadcrumb trail was chosen.
	 * @return string String-Data of breadcrumb trail.
	 * @param bool $return Whether to return data or to echo it.
	 * @param bool $linked[optional] Whether to allow hyperlinks in the trail or not.
	 * @param bool $reverse[optional] Whether to reverse the output or not.
	 */
	function display($return = false, $linked = true, $reverse = false)
	{
		//Set trail order based on reverse flag
		$this->order($reverse);
		//Initilize the string which will hold the assembled trail
		$trail_str = '';
		//The main compiling loop
		foreach($this->trail as $key=>$breadcrumb)
		{
			//Must branch if we are reversing the output or not
			if($reverse)
			{
				//Add in the separator only if we are the 2nd or greater element
				if($key > 0)
				{
					$trail_str .= $this->opt['separator'];
				}
			}
			else
			{
				//Only show the separator when necessary
				if($key > count($this->trail) - 2)
				{
					$trail_str .= $this->opt['separator'];
				}
			}
			//Trim titles, if needed
			if($this->opt['max_title_length'] > 0)
			{
				//Trim the breadcrumb's title
				$breadcrumb->title_trim($this->opt['max_title_length']);
			}
			//We want to output everything but the current item
			if($key === 0)
			{
				break;
			}
			//Place in the breadcrumb's assembled elements
			$trail_str .= $breadcrumb->assemble($linked);
		}
		//Should we return or echo the assembled trail?
		if($return)
		{
			return $trail_str;
		}
		else
		{
			//Giving credit where credit is due, please don't remove it
			$tag = "<!-- Breadcrumb NavXT " . $this->version . " -->\n";
			echo $tag . $trail_str;
		}
	}
}

The above code has only minor changes from the distributed bcn_breadcrumb_trail::display() code. One line was adjusted so that one less breadcrumb separator would be output. The other change involved replacing $this->current_item($breadcrumb); with break;, ending the loop execution. Note, if you want the “extra” breadcrumb separator to still display, change the line:

if($key < count($this->trail) - 2)

to:

if($key < count($this->trail) - 1)

If you need bcn_breadcrumb_trail::display_trail() instead of bcn_breadcrumb_trail::display() you will want to use the following code:

class ext_breadcrumb_trail extends bcn_breadcrumb_trail
{
	//Default constructor
	function __construct()
	{
		//Need to make sure we call the constructor of bcn_breadcrumb_trail
		parent::__construct();
	}
	/**
	 * display_list
	 *
	 * Breadcrumb Creation Function
	 *
	 * This functions outputs or returns the breadcrumb trail in list form.
	 *
	 * @return void Void if Option to print out breadcrumb trail was chosen.
	 * @return string String-Data of breadcrumb trail.
	 * @param bool $return Whether to return data or to echo it.
	 * @param bool $linked[optional] Whether to allow hyperlinks in the trail or not.
	 * @param bool $reverse[optional] Whether to reverse the output or not.
	 */
	function display_list($return = false, $linked = true, $reverse = false)
	{
		//Set trail order based on reverse flag
		$this->order($reverse);
		//Initilize the string which will hold the assembled trail
		$trail_str = '';
		//The main compiling loop
		foreach($this->trail as $key=>$breadcrumb)
		{
			$trail_str .= '
<li>';
			//Trim titles, if needed
			if($this->opt['max_title_length'] > 0)
			{
				//Trim the breadcrumb's title
				$breadcrumb->title_trim(
					$this->opt['max_title_length']);
			}
			//We want to output everything but the current item
			if($key === 0)
			{
				break;
			}
			//Place in the breadcrumb's assembled elements
			$trail_str .= $breadcrumb->assemble($linked);
			$trail_str .= "</li>

\n";
		}
		//Should we return or echo the assembled trail?
		if($return)
		{
			return $trail_str;
		}
		else
		{
			//Giving credit where credit is due, please don't remove it
			$tag = "<!-- Breadcrumb NavXT " . $this->version . " -->\n";
			echo $tag . $trail_str;
		}
	}
}

The only change in this code from the distributed bcn_breadcrumb_trail::display_trail() involved modifying the branch statement used for the current item. This involved replacing $this->current_item($breadcrumb); with break;. Now onto calling our new class. For users of the normal, sting output breadcrumb trail, you will use something on the lines of:

if(class_exists('ext_breadcrumb_trail'))
{
	//Make new instance of the ext_breadcrumb_trail object
	$breadcrumb_trail = new ext_breadcrumb_trail();
	//Setup options here if needed
	//Fill the breadcrumb trail
	$breadcrumb_trail->fill();
	//Display the trail
	$breadcrumb_trail->display();
}

While users of the HTML list output form of the breadcrumb trail will want to use:

if(class_exists('ext_breadcrumb_trail'))
{
	//Make new instance of the ext_breadcrumb_trail object
	$breadcrumb_trail = new ext_breadcrumb_trail();
	//Setup options here if needed
	//Fill the breadcrumb trail
	$breadcrumb_trail->fill();
	//Display the trail
	$breadcrumb_trail->display_list();
}

This is a quite simple method for removing the current item from the breadcrumb trail output. Since the display functions will not be modified in the foreseeable future, this is quite safe to use. Again, for usability reasons, one recommends you do not actually remove the current item from the breadcrumb trail.

-John Havlik

[end of transmission, stay tuned]

Quick and Easy Apple.com Style Breadcrumb Trail for WordPress

Almost a year ago, Janko Jovanovic posted a guide on how a little xHTML and CSS can duplicate the Apple.com store breadcrumb trail. Today, I’m going to show you how to apply Janko’s code to WordPress using Breadcrumb NavXT.

Ok, now with the requirements. You’ll need a WordPress blog (everyone should be running 2.8.1 by now), and Breadcrumb NavXT 3.2.1 (or newer).

First up, the xHTML. We are going to use the function bcn_display_list(), which was introduced in Breadcrumb NavXT 3.2.0. This will output a breadcrumb trail in list form. It is worth noting that bcn_display_list() does not output a <ul> or <ol> tag, those must be added around the calling function. We want to wrap the code with <ul> tags.

<ul class="breadcrumb_trail"> <?php if(function_exists('bcn_display_list')) { bcn_display_list(); } ?> </ul> 

Place this code where you want the breadcrumb trail to show up, I recommend placing it in your theme’s header.php file. That is all the xHTML work that we need to do. Now, on to the CSS. Open up your theme’s style.css file. We’ll start with styling the <ul>.

.breadcrumb_trail { font: 11px Arial, Helvetica, sans-serif; background: url('images/bc_bg.png') repeat-x; height:30px; line-height:30px; color:#9b9b9b; border:solid 1px #cacaca; width:100%; overflow:hidden; margin:0px; padding:0px; }

Line by line this is setting the font to the Arial/Helvetica family at the 11px size for the breadcrumb trail. Then, we set the background to an image and will repeat it horizontally across the screen. We set the height to 30 pixels for the unordered list and all text within it. This is because the background image is 30 pixels high, and the second will allow the text to be centered vertically without extra work. We set the text color to a shade of grey, this ends up being just the color of the current item breadcrumb text. We set the boarder to be 1 pixel high and a dark shade of grey in color. Next, the width of the unordered list element is set to be 100% of its containing element. We don’t want the trail to ever go outside of the preallocated area for the list, so we tell the browser to hide any overflowing content. Finally, we zero out the margin and padding.

Next we should get rid of those ugly bullet points next to each breadcrumb. Add the following code in below the code we just placed in the style.css file.

.breadcrumb_trail li { list-style:none; float:left; padding-left:10px; } 

This code will remove the bullet points next to each breadcrumb, cause the breadcrumbs to line in order from left to right and to keep 10 pixels of padding between each of them. Next, let’s style up those anchors (links).

.breadcrumb_trail a { height:30px; display:block; background:url('images/bc_separator.png') right no-repeat; padding-right: 15px; text-decoration: none; color:#454545; } 

Line by line this code will set the anchor height to 30 pixels. The anchors will be treated as block elements rather than inline elements. A background image will be used as our breadcrumb separator, we’ll set it to show up to the right of the anchor. We’ll allow 15 pixels to the right of each anchor so that the separator image displays properly. The normal anchor underline is removed, and finally we set the text color to a darkish gray.

Now we have a few, very short blocks of CSS styling for the hover condition on the anchor and the home breadcrumb icon.

.breadcrumb_trail a:hover { color:#0088ff; } 

When the anchors are hovered over this code will set the color of the anchor to a color similar to teal.

.breadcrumb_trail .home img { border: none; margin: 9px 0px; } 

This centers the home icon vertically within the home breadcrumb. Now, save your style.css file.

Time to change a few settings in the Breadcrumb NavXT page. If Breadcrumb NavXT is not already activated, activate it at this time. The next step is different depending on the version of Breadcrumb NavXT you are using.

  • For Breadcrumb NavXT versions prior to 4.0: Under the General tab in the Breadcrumb NavXT settings page, change the Home Title from “Home” to <img src="YOUR_BLOG_URL/wp-content/themes/YOUR_ACTIVE_THEME/images/home.png" alt="Home" />.
  • For Breadcrumb NavXT 4.x: Under the General tab in the Breadcrumb NavXT settings page, change the Home Template to <a class="%type%" title="Go to %title%." href="%link%"><img src="YOUR_BLOG_URL/wp-content/themes/YOUR_ACTIVE_THEME/images/home.png" alt="%title%" /></a> and the Home Template (Unlinked) to <img src="YOUR_BLOG_URL/wp-content/themes/YOUR_ACTIVE_THEME/images/home.png" alt="%title%" />.

Remember to replace YOUR_BLOG_URL with the URL for your blog, and YOUR_ACTIVE_THEME with the folder name for your currently active theme. Save the settings. Note: this will have to be changed every time you change themes. If you feel adventurous, you can directly access the bcn_breadcrumb_trail class, which will allow you to assign a dynamic Home Title.

Finally, download this archive with the three images, home.png, bc_seperator.png, and bc_bg.png (The home.png was replaced from Janko’s originals as I didn’t like it). Upload it to your current theme’s images directory. If this directory does not exist, make one and place the images in it. Now, you should have a breadcrumb trail that looks like that on Apple.com.

-John Havlik

[end of transmission, stay tuned]