Do you have experience in web development and a passion for writing articles? If so, you might want to contact us. Learn more »

How to add WordPress breadcrumbs?

AE Tutorial sites

About this article: Posted in: Learned along the way
By: Blockcoder ( Admin ) / 10.11.2012
Stats: Comments Off / Views: 4,209
Tags: , ,

First: what the hell are the breadcrumbs?

Breadcrumbs, –no it’s not a crumby bread; it is like a way to trail your website url or path where you are currently browsing. It usually looks like this: “Blockcoders » Tutorials » PHP & CSS » How to center with CSS?..”. So, all it does or means that it shows you where you are so you won’t get Lost. It is a handy thing.

It doesn’t have to be just a path, it could be more. You could tranform all of the trail parts to hyperlinks, so when user clicks on them, he gets immeadiately where he wants. Would you like to have it?


So, how to have or make the breadcrumbs?

If you want really easy way to get breadcrumbs working — just couple of mouseclicks, go to your WordPress admin-panel and from there to the plugins panel. Here’s a couple of breadcrumb-plugins available that you could have:

There is also another way that you could have the breadcrumbs to your site without any plugins. You just need to add one function into your “functions.php” which resides in your WordPress’s theme folder. The function uses WordPress own functions like, the_home(), get_the_category(), is_single() and so on and the trails are constructed by those. It is a pretty self explaining function.

The breadcrumbs function. (You can just copy and paste it!)


function the_breadcrumbs() {

		global $post;

		if (!is_home()) {

			echo "<a href='";
			echo get_option('home');
			echo "'>";
			echo "Site's name here";
			echo "</a>";

			if (is_category() || is_single()) {

				echo " > ";
				$cats = get_the_category( $post->ID );

				foreach ( $cats as $cat ){
					echo $cat->cat_name;
					echo " > ";
				}
				if (is_single()) {
					the_title();
				}
			} elseif (is_page()) {

				if($post->post_parent){
					$anc = get_post_ancestors( $post->ID );
					$anc_link = get_page_link( $post->post_parent );

					foreach ( $anc as $ancestor ) {
						$output = " > <a href=".$anc_link.">".get_the_title($ancestor)."</a> > ";
					}

					echo $output;
					the_title();

				} else {
					echo ' > ';
					echo the_title();
				}
			}
		}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"Archive: "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"Archive: "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"Archive: "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"Author's archive: "; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "Blogarchive: "; echo'</li>';}
	elseif (is_search()) {echo"Search results: "; }
}

There it is and it works very well with the main site pages and with the subpages. I don’t know how it’s gonna work with categories, sub-categories or with custom post types, but it’s still worth to try.

..Oh yeah and of course how to use it?


<?php the_breadcrumbs(); ?>

That’s it! Just add that function call anywhere in your WordPress template files.


Epic conclusion of the crumby breads

Here’s couple of solutions about how to have the breadcrumbs for your WordPress websites! Hope it helps!