How to add Breadcrumbs in thesis

Breadcrumbs or Breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. it provides you great SEO (Search Engine Optimization) rank flow , Increases page views and great user Interface.

Why not use plugins for Breadcrumbs

using plugins for making Breadcrumbs increases Query which results in increase in loading time of the blog. instead you can use the small PHP code for making Breadcrumb.

Installation :

1. Login to WordPress Dashboard
2. Navigate through Thesis >> Custom File Editor
3. Now select custom_functions.php and add below code:

   function thesis_breadcrumbs() { echo ''; bloginfo('name'); echo ""; 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 display_breadcrumbs() { ?><div class="breadcrumbs"><?php thesis_breadcrumbs(); ?></div><?php }   add_action('thesis_hook_after_header','display_breadcrumbs');

   function thesis_breadcrumbs() { echo ''; bloginfo('name'); echo ""; 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 display_breadcrumbs() { ?><div class="breadcrumbs"><?php thesis_breadcrumbs(); ?></div><?php }add_action('thesis_hook_after_header','display_breadcrumbs');

4. Now comes the part of the CSS , so just add the below code in custom.css :

   .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; }

   .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; }

Customization :

How to change Breadcrumb separator ?
The default Separator is ” » ” to change it , just find for “&#187;” (without Quotes) and replace it with any desire Separator you want.

How to remove my Blog name from the start and replace it with Home ?
Find for bloginfo(‘name’); at line 5 and replace it with echo ‘Home’;

or Just replace the whole code with the below one :

function thesis_breadcrumbs() {
	echo '';
	echo 'Home';
	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 '"<em>';
			echo the_search_query();
			echo '</em>"';
        }
    }
function display_breadcrumbs() {
?><div class="breadcrumbs"><?php thesis_breadcrumbs(); ?></div><?php
	}
 
add_action('thesis_hook_after_header','display_breadcrumbs');

How to change Color , Font Size and etc ?
All that is too be customized using CSS

Now we have Successfully Installed and Customized Breadcrumbs. Hope you like the Breadcrumbs if you have any idea or need any modifications then just contact me.