How to Add Breadcrumbs in Thesis Theme Without Plugin

Simple guide that helps to Add Breadcrumbs to Thesis Theme without a plugin. Breadcrumbs are a set of links, that display the path of the post/page on which you are browsing. Breadcrumbs not only improves site navigation but also helps in SEO of blog.

Know How to Add Numbered Page Navigation in Thesis

What are Breadcrumbs ?

Breadcrumbs is a sort of navigation menu, that helps to display the location on the website. Breadcrumbs are useful to improve user experience and also helps in strengthening SEO flow rank.

Some free WordPress plugins are available to display breadcrumbs, but we prefer to do it manually. Most of the premium WordPress Themes comes with breadcrumbs (inbuilt) and this guide helps to add breadcrumbs in Thesis Theme.

WordPress SEO by Yoast Plugin also includes inbuilt Breadcrumbs functionality.

How to Add Breadcrumbs to Thesis Theme

We have already discussed on different post types and their functions. Breadcrumbs will be displayed on Single Post, archives (which further include tag, category, author, month etc pages) and 404 err0r pages.

Note: Backup your Theme Files before Editing them.

• Login to WordPress and go to Appearance > Thesis > Custom File Editor.
• Open “Custom Functions.php” file, add below code to it and update it.
• Now, add CSS by following the steps posted below.

Check – How To Add Author Bio Box below single post in Thesis

 Code to Add Breadcrumbs to Thesis Theme

This is a simple yet powerful code that helps to display breadcrumbs.

/** Start of Code to Add Breadcrumbs in Thesis */
function thesis_breadcrumbs() {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a>";
if (is_category() || is_single()) {
echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
the_category(' &bull; ');
if (is_single()) {
echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
the_title();
}
} elseif (is_page()) {
echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
echo the_title();
} elseif (is_search()) {
echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
}
function add_thesis_breadcrumbs() {
?><div class="breadcrumbs"><?php thesis_breadcrumbs(); ?></div><?php
}
add_action('thesis_hook_before_content','add_thesis_breadcrumbs');
/** End of Code to Add Breadcrumbs in Thesis */

Note: Use only one of these two codes at a time.

OR

Alternative Code to Display Breadcrumbs in Thesis Theme

This is a bit complicated and use this only in the case if above code is not working for you. Steps to add this code to thesis theme are mentioned above.

/** Start of Code to Display Breadcrumbs in Thesis */
function breadcrumbs() {
if(is_home()) { ?>
<? }
elseif(is_front_page()) { ?>
<? }
elseif(is_single()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; <?php the_category(', ','&title_li='); ?> &raquo; <?php the_title(); ?></div><? }

elseif(is_page()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; <?php the_title(); ?></div><? }

elseif(is_tag()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; Tag &raquo; <?php single_tag_title();?></div><? }

elseif(is_category()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; Category &raquo; <?php single_cat_title(); ?></div><? }

elseif(is_month()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; <?php the_time('F Y'); ?></div><? }

elseif(is_year()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; <?php the_time('Y'); ?></div><? }

elseif(is_author()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; Author &raquo; <?php echo get_author_name(get_query_var('author')); ?></div><? }

elseif(is_search()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; Search &raquo; <?php echo the_search_query(); ?></div><? }

elseif(is_404()) { ?><div class="breadcrumbs"><a href="<?php echo get_option('home'); ?>">Home</a> &raquo; Page not found</div><? }
else {}
}
add_action('thesis_hook_before_content', 'breadcrumbs');
/** End of Code to Display Breadcrumbs in Thesis */

This entire code has been added to Thesis Theme by using hooks functionality. You can also change the hook to the one you wish, but be careful you can break the theme.

CSS to Display Breadcrumbs in Thesis Theme

One more step to make breadcrumbs more attractive. Add below code to custom.css file and update it. You can change color, font etc things based on your theme.

.breadcrumbs {
float:left;
font-size: 14px;
margin: 10px 0;
padding: 5px;
text-transform: capitalize;
}
.breadcrumbs a {
font-family: georgia;
font-size: 14px;
font-weight: normal;
}
.breadcrumbs a:hover {
color: #606060;
text-decoration:underline;
}

In the code we have used “breadcrumbs” HTML class and hence CSS is written accordingly. If anything related to breadcrumbs is messed-up, then you can tune it by changing this HTML class and CSS to any other.

You have successfully added breadcrumbs to Thesis Theme and if you need any help regarding this tutorial, drop a comment here, we will get back to you very soon.