How To Add Breadcrumbs To Thesis Theme Without Using Plugins?

September 8, 2011

Thesis is no doubt the most awesome theme one can get for his/her blog and using Thesis Theme on WordPress enhances the core functionalities which are not available in WordPress core functions and minimizes the use of most widely (of course necessary) plugins (Check out the list of 12 Must Have WordPress plugins).

Enough praising Thesis, today in this tutorial I would like to share you the steps involved in adding BreadCrumbs to your thesis theme without using any third-party plugins (Code Credits: DIYThemes).

Quick Question: What is BreadCrumb?

Breadcrumbs also known as Breadcrumb trail is a navigation aid displayed in user interfaces which helps users to keep track of the locations within a website.

How Does a Breadcrumb look like?

A typical breadcrumb looks like:

Home page -> Category Page -> Post Page

or

Home Page : Category Page : Post Page

Why should I have Breadcrumb (Advantages of Having Breadcrumb)?

A properly coded breadcrumb will help you in enjoying the following mentioned benefits:

Improves the end-user experience
Increases page views
SEO rank flow will get strengthened
Ranks you better for category keywords
Add relevancy to your site

How To Add Breadcrumbs To WordPress Thesis Theme?

Adding breadcrumb to Thesis theme is a simple 2 step process which involves you to add/edit few codes to your custom_functions.php and custom.css files located in “custom” folder (WP-Content -> Themes -> Thesis (theme folder) -> Custom) in Thesis Theme.

First navigate to custom_functions.php and add the following code:

function thesis_breadcrumbs() {
    echo '';
    bloginfo('name');
    echo "";
        if (is_category() || is_single()) {
            echo "  »  ";
            the_category(' • ');
                if (is_single()) {
                    echo "   »   ";
                    the_title();
                }
        } elseif (is_page()) {
            echo "  »  ";
            echo the_title();
        } elseif (is_search()) {
            echo "  »  Search Results for... ";
            echo '"';             echo the_search_query();             echo '"';
        }
    }
function display_breadcrumbs() {
?>

Second open custom.css and add the following code (you also add your own modifications to this code):

.custom .breadcrumbs {
    font-family:Verdana,Arial;
    font-size:1.2em;
    padding:1.2em 1em 1em 1em;
    border-bottom:1px dotted #666;
    border-top:1px dotted #666;
}
.custom .breadcrumbs a {
    color:#cc0000;
    border-bottom:1px dotted #fff;
}
.custom .breadcrumbs a:hover {
    border-bottom:1px dotted #cc0000;
}

That’s it, you’re done with the modifications and you will be able to enjoy the breadcrumb navigation on your website/blog, let us know if you face any difficulties in setting this up and we will be more than glad to help you.

Tagged as: Thesis Theme