How to add Bootstrap Breadcrumbs to your WordPress Theme

Doug Support 2 Comments

Another 5 minute integration…
First of all, I’m assuming you already have Bootstrap css/js linked up to your theme correctly.
Secondly, 99.9% percent of this function was created by Dimox in his post WordPress Breadcrumbs Without a Plugin. So go ahead & get your source material from him.
Lastly, All I did was swap the Bootstrap markup into his php file. Click here for the Bootstrap markup, which looks like this:


<ul class="breadcrumb">
	<li><a href="#">Home</a> <span class="divider">/</span></li>
	<li><a href="#">Library</a> <span class="divider">/</span></li>
	<li class="active">Data</li>
</ul>

Compare the html portions of Dimox’s php file with my modifications below:

&lt;?php

function dimox_breadcrumbs() {

$showOnHome = 0; // 1 - show breadcrumbs on the homepage, 0 - don't show
$delimiter = '&lt;span class="divider"&gt;/&lt;/span&gt;'; // delimiter between crumbs
$home = 'Home'; // text for the 'Home' link
$showCurrent = 1; // 1 - show current post/page title in breadcrumbs, 0 - don't show
$before = '&lt;li class="active"&gt;&lt;span class="current"&gt;'; // tag before the current crumb
$after = '&lt;/span&gt;&lt;/li&gt;'; // tag after the current crumb

global $post;
$homeLink = get_bloginfo('url');

if (is_home() || is_front_page()) {

if ($showOnHome == 1) echo '&lt;ul class="breadcrumb"&gt;&lt;li&gt;&lt;a href="' . $homeLink . '"&gt;' . $home . '&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;';

} else {

echo '&lt;ul class="breadcrumb"&gt;&lt;li&gt;&lt;a href="' . $homeLink . '"&gt;' . $home . '&lt;/a&gt; ' . $delimiter . '&lt;/li&gt; ';

if ( is_category() ) {
$thisCat = get_category(get_query_var('cat'), false);
if ($thisCat-&gt;parent != 0) echo get_category_parents($thisCat-&gt;parent, TRUE, ' ' . $delimiter . ' ');
echo $before . '' . single_cat_title('', false) . '' . $after;

} elseif ( is_search() ) {
echo $before . 'Search results for "' . get_search_query() . '"' . $after;

} elseif ( is_day() ) {
echo '&lt;li&gt;&lt;a href="' . get_year_link(get_the_time('Y')) . '"&gt;' . get_the_time('Y') . '&lt;/a&gt; ' . $delimiter . '&lt;/li&gt; ';
echo '&lt;li&gt;&lt;a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '"&gt;' . get_the_time('F') . '&lt;/a&gt; ' . $delimiter . '&lt;/li&gt; ';
echo $before . get_the_time('d') . $after;

} elseif ( is_month() ) {
echo '&lt;li&gt;&lt;a href="' . get_year_link(get_the_time('Y')) . '"&gt;' . get_the_time('Y') . '&lt;/a&gt; ' . $delimiter . '&lt;/li&gt; ';
echo $before . get_the_time('F') . $after;

} elseif ( is_year() ) {
echo $before . get_the_time('Y') . $after;

} elseif ( is_single() &amp;&amp; !is_attachment() ) {
if ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type-&gt;rewrite;
echo '&lt;li&gt;&lt;a href="' . $homeLink . '/' . $slug['slug'] . '/"&gt;' . $post_type-&gt;labels-&gt;singular_name . '&lt;/a&gt;';
if ($showCurrent == 1) echo ' ' . $delimiter . '&lt;/li&gt; ' . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, ' ' . $delimiter . '&lt;/li&gt; ');
if ($showCurrent == 0) $cats = preg_replace("#^(.+)\s$delimiter\s$#", "$1", $cats);
echo $cats;
if ($showCurrent == 1) echo $before . get_the_title() . $after;
}

} elseif ( !is_single() &amp;&amp; !is_page() &amp;&amp; get_post_type() != 'post' &amp;&amp; !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type-&gt;labels-&gt;singular_name . $after;

} elseif ( is_attachment() ) {
$parent = get_post($post-&gt;post_parent);
$cat = get_the_category($parent-&gt;ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . '&lt;/li&gt; ');
echo '&lt;li&gt;&lt;a href="' . get_permalink($parent) . '"&gt;' . $parent-&gt;post_title . '&lt;/a&gt;';
if ($showCurrent == 1) echo ' ' . $delimiter . '&lt;/li&gt; ' . $before . get_the_title() . $after;

} elseif ( is_page() &amp;&amp; !$post-&gt;post_parent ) {
if ($showCurrent == 1) echo $before . get_the_title() . $after;

} elseif ( is_page() &amp;&amp; $post-&gt;post_parent ) {
$parent_id = $post-&gt;post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '&lt;li&gt;&lt;a href="' . get_permalink($page-&gt;ID) . '"&gt;' . get_the_title($page-&gt;ID) . '&lt;/a&gt;';
$parent_id = $page-&gt;post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i &lt; count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo ' ' . $delimiter . '&lt;/li&gt; ';
}
if ($showCurrent == 1) echo ' ' . $delimiter . '&lt;/li&gt; ' . $before . get_the_title() . $after;

} elseif ( is_tag() ) {
echo $before . 'Posts tagged "' . single_tag_title('', false) . '"' . $after;

} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . 'Articles posted by ' . $userdata-&gt;display_name . $after;

} elseif ( is_404() ) {
echo $before . 'Error 404' . $after;
}

if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}

echo '&lt;/ul&gt;';

}
} // end dimox_breadcrumbs()

?&gt;

Blindly copying & pasting this in place of his should work hassle-free, but where’s the opportunity to learn?!?!

Comments 2

Leave a Reply

Your email address will not be published. Required fields are marked *