Add breadcrumbs to your WordPress theme without a plugin
This code snippet will demonstrate how to add breadcrumbs to your WordPress theme without the use of a plugin.
Breadcrumbs in any website play a vital role is helping your visitors navigate your website. In the majority of cases we tend to use a third party WordPress plugin to handle our breadcrumb needs such as Breadcrumb NavXT or Yoast Breadcrumbs
A nice feature to any custom WordPress theme is the ability to add your own custom breadcrumbs.
Creating the breadcrumbs function
The first step to creating your own breadcrumbs function is to navigate to your WordPress theme folder “wp-content/themes/your-active-theme” and open the file called functions.php
At the end of the file add the following PHP function.
function custom_breadcrumbs(){
$delimiter = '»';
$name = 'Home';
$currentBefore = '<span class="current">';
$currentAfter = '</span>';
if(!is_home() && !is_front_page() || is_paged()){
global $post;
$home = get_bloginfo('url');
echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';
if(is_tax()){
$term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
echo $currentBefore . $term->name . $currentAfter;
} elseif (is_category()){
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo $currentBefore . '';
single_cat_title();
echo '' . $currentAfter;
} elseif (is_day()){
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $currentBefore . get_the_time('d') . $currentAfter;
} elseif (is_month()){
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $currentBefore . get_the_time('F') . $currentAfter;
} elseif (is_year()){
echo $currentBefore . get_the_time('Y') . $currentAfter;
} elseif (is_single()){
$postType = get_post_type();
if($postType == 'post'){
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
} elseif($postType == 'portfolio'){
$terms = get_the_term_list($post->ID, 'portfolio-category', '', '###', '');
$terms = explode('###', $terms);
echo $terms[0]. ' ' . $delimiter . ' ';
}
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif (is_page() && !$post->post_parent){
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif (is_page() && $post->post_parent){
$parent_id = $post->post_parent;
$breadcrumbs = array();
while($parent_id){
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif (is_search()){
echo $currentBefore . __('Search Results for:', 'wpinsite'). ' "' . get_search_query() . '"' . $currentAfter;
} elseif (is_tag()){
echo $currentBefore . __('Post Tagged with:', 'wpinsite'). ' "';
single_tag_title();
echo '"' . $currentAfter;
} elseif (is_author()) {
global $author;
$userdata = get_userdata($author);
echo $currentBefore . __('Author Archive', 'wpinsite') . $currentAfter;
} elseif (is_404()){
echo $currentBefore . __('Page Not Found', 'wpinsite') . $currentAfter;
}
if(get_query_var('paged')){
if(is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo ' ' . $delimiter . ' ' . __('Page') . ' ' . get_query_var('paged');
if(is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
}
}
Where ever you wish to display the breadcrumbs in your theme you simply call the above function by adding this code.
<?php custom_breadcrumb(); ?>
This function has a CSS class called “current” that you can add to your theme stylesheet to style the current active link. For example you may want to make the active link bold to that the visitor knows clearly what page they are on. To achieve this simply add the follow CSS style to your styles.css file.
.current { font-weight:bold; }
Be sure to check out our other great WordPress Code Snippets and WordPress Articles.
