Banhawi

WordPress is the most powerful blogging system ever , even you can use it to do any type of sites (E-Commerce , CMS, Galleries .. etc) i think wordpress is going forward to be a framework , all this because of the powerful functions it offers to developers .

I’m going to use some of the wordpress Conditional Tags plus other wordpress functions to create a Breadcrumbs Navigation for wordpress .

Read More about Breadcrumbs and why to use them “Breadcrumb Navigation: Further Investigation of Usage”

Step One

Create a new file within your theme folder and call it breadcrumbs.php or whatever you want

Step Two

In home page we don’t have to show the user the breadcrumbs navigation so we will do this

<?php
	if ( is_home() ){}
	else {
		echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";
		echo "</ul></div>";
	}
?>

The code above is pretty simple , we used our first Conditional Tag ( is_home() ) within an if – else statement.

is_home() used to check whether the current page is the homepage or not .

We used it here to do nothing when it’s homepage and applying a simple html codes when it’s not homepage .

Step Three

Let’s Add some css styles .

ul.breadcrumbs {
	list-style: none;
	padding: 0;
	margin: 0;
	float: left;
}
ul.breadcrumbs li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}
ul.breadcrumbs li:before {
	content: "\00BB \0020";
}

We simply styled the ul.breadcrumbs menu as a horizontal menu and added right angle quote before every “li” member .

Step Four

The blog name must be added before any thing so we’ve to add it to our code .

<?php
	if ( is_home() ){}
	else {
		echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";
		echo "<li><a href=\" ".get_settings('home')." \">";
		echo  bloginfo('name')."</a></li>";
		echo "</ul></div>";
	}
?>

In the code above we’ve added the blog name using the wordpress function bloginfo(‘name’); within “li” tags and linked it to the blog url using the wordpress function get_settings(‘home’) which retrieves the blog link .

Step Five

Output : » Blog Name » Category Name »

Another Output : » Blog Name » Category Name » Sub-Category Name »

We will start our breadcrumbs code in the Category Pages

if ( is_category() ) {
	$cate = single_cat_title("",false);
	$cat = get_cat_ID($cate);
	echo "<li>".(get_category_parents($cat, TRUE," &raquo; "))."</li>";
}

In the code above we used is_category() – Conditional Tag , which checks if the current page is a category one or not , then the code above will only be executed within the category pages .

We can simply print the current category using single_cat_title(); but we won’t as we can have multi-leveled categories so we’ve to show the current category plus it’s parents if there any .

We can get the parents of any category using the get_category_parents(); function , and we will use it , but the problem is the output of the single_cat_title(); is the category name and to get the category parents using the get_category_parents(); function we have to pass it the category ID , so we will use get_cat_ID($cate); function to get the current category ID from the current category name .

Note : single_cat_title(“”,false); function’s second argument must be false as we don’t want the function to print the category name by itself we want to use the output within another function without printing it so u’ve to declare the second argument to false .

Step Six

Let’s apply our breadcrumbs to archives , search , 404 error pages .

Output 1: » Blog Name » Archives

Output 2: » Blog Name » Search Results

Output 3: » Blog Name » 404 Not Found

elseif ( is_archive() && !is_category() ) {
	echo "<li>Archives</li>";
}
elseif ( is_search() ) {
	echo "<li>Search Results</li>";
}
elseif ( is_404() ) {
	echo "<li>404 Not Found</li>";
}

Obviously you know what’s the function of the above code , it’s pretty easy code .

We first used is_archive() – Conditional Tag to check if the page is a  archive pages and printing “Archives” if it’s  an Archive page , we also used
&& !is_category() – because category page are also archive pages and we don’t want to print Archives within the category pages so we added && (AND) !(NOT) is_category()

Then we used is_search() – Conditional Tag to check if the page is a search page and printing “Search Results” if it’s a search page .

Then we used is_404() – Conditional Tag to check is the page is a 404 error page and printing “404 Not Found” if it’s a 404 error page .

Step Seven

Let’s apply the breadcrumbs to the single post pages

Output : » Blog Name » Category Name » Post Name

elseif ( is_single() ) {
	$category = get_the_category();
	$category_id = get_cat_ID($category[0]->cat_name);
	$cat_link = get_category_link( $category_id );
	echo "<li><a href=\" ". $cat_link ." \">" . $category[0]->cat_name."</a></li>";
	echo "<li>";
	echo the_title()."</li>";
}

In the code above we used is_single() – Conditional Tag to check if the page is a single post page and printing the category followed by the post name if it’s a single post page.

$category = get_the_category(); To get the category .
$category_id = get_cat_ID($category[0]->cat_name); To get the category ID from the category name ($category[0]->cat_name) , $category[0] that ZERO because we will only get the first category from the categories array (posts may be posted in many categories and we only need  the first) .
$cat_link = get_category_link( $category_id ); To get the category URL .

then we just print the category , followed by the post title using the_title()- wordpress function .

Step Eight

Let’s apply the breadcrumbs to the Pages

Output : » Blog Name » Page Name

Another Output : » Blog Name » Page Name » Sub-Page Name

			elseif ( is_page() ) {

				if ($post->post_parent) {

  					$children = $post->post_title;

  					$parent = get_page($post->post_parent);

  					echo "<li>".$parent->post_title."</li>"."<li>".$children."</li>";
				}
				elseif ( $post->post_parent == 0 ) {

					echo "<li>";

					echo the_title()."</li>";

				}
			}

This is the hard part , as there’s a wordpress function to retrieve page parents . So we wrote some code to retrieve the first page , this will give you the ability to show your breadcrumbs navigation in the second level pages but not in the third level pages as it’ll retrieve the second level page parent only without the first level page parent .

We start our code block with is_page() – Conditional Tag to check if it’s a normal page .

After that we write another if – else statement to check if the current page has a parent and if not we will just print the current page title .

If the current page has a parent :

We store the current page name in the $children variable ( $children = $post->post_title; ) .
Then we use the get_page(); wordpress function to get the parent page and store it in the $parent varialble $parent = get_page($post->post_parent); .

Finally we print the page parent name followed by the page name as shown in line 10 .

				elseif ( $post->post_parent == 0 ) {

					echo "<li>";

					echo the_title()."</li>";

				}

The code above means if there’s no page parent just print the title of the page .

The Complete Code

	<?php
	/*
		Wordpress Breadcrumbs code by Banhawi.com

	*/

		if ( is_home() ){}

		else {

			echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";

			echo "<li><a href=\" ".get_settings('home')." \">";
			echo  bloginfo('name')."</a></li>";

			if ( is_category() ) {
				$cate = single_cat_title("",false);
				$cat = get_cat_ID($cate);
				echo "<li>".(get_category_parents($cat, TRUE," &raquo; "))."</li>";
			}
			elseif ( is_archive() && !is_category() ) {
				echo "<li>Archives</li>";
			}
			elseif ( is_search() ) {
				echo "<li>Search Results</li>";
			}
			elseif ( is_404() ) {
				echo "<li>404 Not Found</li>";
			}
			elseif ( is_single() ) {
				$category = get_the_category();
				$category_id = get_cat_ID($category[0]->cat_name);
				$cat_link = get_category_link( $category_id );
				echo "<li>".(get_category_parents($category, TRUE,""))."</li>";
				echo "<li><a href=\" ". $cat_link ." \">" . $category[0]->cat_name."</a></li>";
				echo "<li>";
				echo the_title()."</li>";
			}
			elseif ( is_page() ) {

				if ($post->post_parent) {

  					$children = $post->post_title;

  					$parent = get_page($post->post_parent);

  					echo "<li>".$parent->post_title."</li>"."<li>".$children."</li>";
				}
				elseif ( $post->post_parent == 0 ) {

					echo "<li>";

					echo the_title()."</li>";

				}
			}

			echo "</ul></div>";
		}
	?>

For search result page , you can display the search query instead of “Search Results” just use this code

			elseif ( is_search() ) {
				echo "<li>".the_search_query()."</li>";
			}

Finally

Just use the include function to include the breadcrumbs script any where in your theme .

	<?php include (TEMPLATEPATH . '/breadcrumbs.php'); ?>