There are only a small handful of CMS libraries which offer support for breadcrumbs. This is a trail of links you’ll notice above the body content which leads back to the various categories and top-tier pages related to your post. Also it displays the hierarchical formatting between parent pages and sub-pages.

In this article I want to offer a few different solutions for implementing breadcrumbs in WordPress. The simplest method is to install a custom plugin which will automatically include these bits of HTML in your theme. Breadcrumbs are also easy to customize on your own, so it all depends on your comfort level when working within WordPress. Along with these ideas I’ve included some related links you may skim and other helpful breadcrumb tutorials.

Breadcrumb NavXT

The NavXT plugin is my first recommendation for those who don’t want to mess with too much code. You can actually search in your WordPress admin panel inside the Plugins page for the name Breadcrumb NavXT. It should come up within search results and you can install this right from your admin backend.

This plugin actually has its own documentation homepage for those who didn’t find enough info on the WordPress page. The installation process is fairly simple and we can follow along with the page directions as needed. Once it’s installed we just need to activate the plugin and it should be working. Now the last step is to include the function somewhere inside your active theme.

This block should be placed somewhere inside your theme files. The most popular source is header.php because that will be included in every webpage. The PHP function will handle all the recognition and determining the root pages from blog posts. But if you want to change the default setup you may do so from Settings -> Breadcrumb NavXT in the Admin panel.

Full Breadcrumb

This is a much simpler plugin but the installation process is about the same. Full Breadcrumb has been tested up to the most recent version of WordPress. Although it is lesser known than most other solutions, the code base is secure and works perfectly on all setups.

The difference is that we can choose to either directly output the breadcrumb codes, or return the values inside a PHP array. This gives developers a lot more choices for customization when it comes to frontend design. Let’s take a peek at my basic code sample:

show_full_breadcrumb(
array(
'separator' => array(
'content' => '»'
), // set FALSE to hide
'home' => array(
'showLink' => true
)
)
);
?>

The function name show_full_breadcrumb is the default call we need to make. The internal array() isn’t required, but it is helpful when passing in new default values. These options allow you to change the text used in separating the different links, and whether to display the homepage link or not.

Now the above code will not show the breadcrumbs but instead return the basic HTML code. We can set this value into a variable named $crumbs. By default all the code is stored inside this variable, but we may change the output to be a PHP array of data. This requires a single parameter which looks like this:

if (function_exists('get_full_breadcrumb')) $crumbs = get_full_breadcrumb(array( 'type' => 'array'));
?>

I feel that Full Breadcrumb is a much more customized plugin which allows developers to get their hands dirty. I would say this is still very easy to install since it is just a matter of copying & pasting the new function code. But if you want to dig into breadcrumbs without writing your own custom function, this is the best possible solution.

Custom Breadcrumb Codes

Sometimes you just cannot use the default plugins and want to work with your own PHP code. However this doesn’t mean you have to reinvent the wheel and code your own breadcrumbs from scratch. I have picked out a fantastic tutorial published on Blockcoders which delves into this idea of custom breadcrumbs.

Their post explains a bit about the history of breadcrumbs and how you may choose other alternatives for WordPress. However I am really impressed with their custom function code which behaves almost the same as our other plugins. Let’s take a peek at this code and see how it works.

function the_breadcrumbs() {

global $post;

if (!is_home()) {

echo " echo "'>";
echo "Site's name here";
echo "";

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 = " > ".get_the_title($ancestor)." > ";
}

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'

';}
elseif (is_month()) {echo"Archive: "; the_time('F, Y'); echo'

';}
elseif (is_year()) {echo"Archive: "; the_time('Y'); echo'

';}
elseif (is_author()) {echo"Author's archive: "; echo'

';}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "Blogarchive: "; echo'

';}
elseif (is_search()) {echo"Search results: "; }
}

Original Source

If you copy this block into your theme’s functions.php file it should have no problem pulling out the results. But of course, we also need to include the function call inside a theme file. Again we can visit header.php since this will display on every page in your website. Here is the sample code from their demo:

The biggest reason you may go after your own custom plugin code is the personal touches. You can update all of the internal HTML elements, classes, and even the display text. I feel this exact tutorial is great for your average WordPress developer who is familiar with PHP and can follow along with the codes. Although if you want to look for some alternatives check out the related links to similar articles and tutorials online.

Related Links

• Adding WordPress Breadcrumbs without a Plugin
• Custom WordPress Breadcrumbs Tutorial
• Breadcrumbs for WordPress with Twitter Bootstrap
• WordPress Tips and Tricks for Beginners
• Making Breadcrumbs with wp_nav_menu()

Final Thoughts

I hope this tutorial may be insightful to some developers who have been struggling with breadcrumbs in WordPress. The system does not offer any type of solution by default, and so you have to rely on custom codes or plugins. But the interface accessibility is fantastic and well worth the development time.

Peruse some of the plugins we have shared along with the follow-up links and tutorials. Much of this content may be found elsewhere on the web when searching through Google. Stay vigilant and you can surely find the best option for including breadcrumbs within WordPress. Additionally if you have any questions or comments feel free to share with us in the post discussion area.