Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

How to add Breadcrumbs in thesis

breadcrumbsBreadcrumbs 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 "  »  ";
    			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');

    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 "&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 ''; echo 'Home'; 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');

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.

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

April 22, 2011 Ritesh Sanap Thesis Customization breadcrumb, Breadcrumbs, custom_functions.php, Thesis, Thesis Customization

Comments

  1. Sudeep Acharya says

    April 22, 2011 at 4:31 pm

    Thanks for this i will add it.

    Reply
    • Ritesh Sanap says

      April 22, 2011 at 6:55 pm

      Hahaha Sudeep ,
      First take a look at the title its for thesis otherwise you will bymistakely add it in Blogger :P

      Reply
  2. philip says

    May 15, 2011 at 6:10 pm

    hi Ritesh,

    thanks for the code above, it’s working well on my site.

    one question though,

    the breadcrumb trail ends after I navigate to another page, subsequent visits to other pages are not shown.

    eg. home – about – services – portfolio

    the breadcrumbs ends at home and doesn’t reflect services and portfolio.

    how do i get the breadcrumbs to show additional / subsequent navigation history.

    i do not have web development training, so any help us greatly appreciated.

    cheers
    P

    Reply
    • Ritesh Sanap says

      May 18, 2011 at 9:06 pm

      philip,
      can you please provide me with the link to were you are using the breadcrumb so that i can help you more properly

      Reply
  3. Jennae says

    October 28, 2011 at 9:59 pm

    I am using breadcrumbs here, everywhere except the home page: http://sandbox.hibiscuscreative.com/

    How do I get the breadcrumbs to show subpages (same question as above)? For example, this page should show “HOME >> ABOUT >> ABOUT THE OWNERS >> NANCY KOLL”. Instead, it just shows HOME >> NANCY KOLL:

    Can you help?

    Reply
  4. sumit says

    March 16, 2012 at 1:58 am

    How to remove breadcrumbs from homepage

    Reply
    • Ritesh Sanap says

      March 16, 2012 at 9:43 am

      Well it depends on the theme, and also you will have to look for which function is used to call out the Breadcrumb, more information regarding the theme might help

      Reply
  5. Food Arts says

    June 15, 2012 at 8:42 am

    Thanks very much , this tutorial work for my site :)

    Reply
  6. Richard techgig says

    September 9, 2012 at 4:43 pm

    Is the breadcrumbs code seo friendly to use..?

    Reply
    • Ritesh Sanap says

      September 17, 2012 at 9:39 am

      Yes, Many Webmasters add it just because of SEO Purposes

      Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Blue Statement Thesis Theme
Next Next post: How to add avatar next to post title in thesis

Currently Trending

  • How to download Specific parts of YouTube videos
  • How to Change the Welcome/Login Screen in Windows XP ?
  • h4x0r ( Hacker ) - Blogger Template
  • Windows Vista CD key
  • Add/Remove page/Post View Counter Widget For Blogger
  • Free Online Angry Birds game
  • How to Make Your Own Avatar
  • How to Download Documentation for offline viewing - Dash
  • How To Change Windows XP Shutdown Dialog Box

Get Latest post in your Inbox

Random Posts

How to send content summary only for my feedburner subscribers via email?

May 11, 2009 By Ritesh Sanap 2 Comments

How to create Archives page in WordPress

October 16, 2010 By Ritesh Sanap Leave a Comment

How to show html text in blogger posts

March 25, 2009 By Ritesh Sanap Leave a Comment

Before Starting a Blog

March 14, 2012 By Ritesh Sanap 3 Comments

How to create/Make Secret group in FaceBook

June 1, 2011 By Ritesh Sanap 6 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean