Add Breadcrumbs navigations without using Plugins-Thesis theme

A few days back,we have posted about How to add blinking headline to top of thesis theme  in the topic thesis customization.Also check out thesis release date

Here is a post about how to add Breadcrumbs navigations without using Plugins  to Thesis WordPress theme.

What’s Breadcrumbs :

Breadcrumbs  are simply navigation links which are added on every post like this

Homepage>>Blog Category>>Page Title

This will help you site in getting more views and reducing bounce rate and hence higher search results.

How to Add  breadcrumbs navigation to thesis theme with  plugin:

You can also add it to your WordPress blog using Breadcrumb NavXT plugin.You can download this Breadcrumb plugin here.Simply upload the plugins to your site.

How to add Add Breadcrumbs without using Plugins :

#Open your custom_functions.php using filezilla or by using the Thesis>>Custom File Editor in wp dashboard.

#Backup your file before adding the codes.

#Copy and paste the below code into your custom_functions.php file.

function thesis_breadcrumbs() {
	echo '<a href="';
	echo get_option('home');
	echo '">';
	bloginfo('name');
	echo "</a>";
		if (is_category() || is_single()) {
			echo "&nbsp;&nbsp;»&nbsp;&nbsp;";
			the_category(' &bull; ');
				if (is_single()) {
					echo " &nbsp;&nbsp;»&nbsp;&nbsp; ";
					the_title();
				}
        } elseif (is_page()) {
            echo "&nbsp;&nbsp;»&nbsp;&nbsp;";
            echo the_title();
		} elseif (is_search()) {
            echo "&nbsp;&nbsp;»&nbsp;&nbsp;Search Results for... ";
			echo '"<em>';
			echo the_search_query();
			echo '</em>"';
        }
    }
function display_breadcrumbs() {
?><div><?php thesis_breadcrumbs(); ?></div><?php
	}

add_action('thesis_hook_after_header','display_breadcrumbs');

#Now save your file after adding the code.

#Now You have added breadcrumbs navigation to thesis theme .

Customize your breadcrumbs navigation:

#Open your custom.css file in the same folder

#Put this  below css code into the custom.css file and save it.

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

#Great…Now you have  customized the navigation links successfully.

Hope you liked this thesis customization post.

Other Thesis theme posts:

Did you like this post??Do share your opinion about thesis customization by our site in the comment section.Do subscribe to us to receive updates.