How To Add SEO Breadcrumbs in WordPress

by Sahil Umatia

Breadcrumbs is a secondary type of navigation that shows the actual location of a user in a website. Breadcrumbs are usually found in large website that have lots of content category wise. And it’s an easier way for user to navigate back to the category or home page. They are usually separated by “>” or “/” .

Breadcrumbs have one more advantage if they are implemented in a proper way. Breadcrumbs can also be crawled and seen in Google search engines. And one can get more traffic from search engines, because search engines love the way if a website is organized in a hierarchical manner. In this post I will show you how to implement SEO Breadcrumbs for WordPress.

Step 1: Add the following CSS code to custom.css. This is just for formatting the breadcrumb. You can customize it as per your need.

.seobreadcrumbs {font-family:Verdana,Arial;font-size:1em;font-weight:bold;text-transform: uppercase;padding:1.2em 1em 1em 1em;border-bottom:1px dotted #666;background:#FCFFB0;margin-bottom: 10px;}
.seobreadcrumbs a {color:#cc0000;border-bottom:1px dotted #fff;}
.seobreadcrumbs a:hover {border-bottom:1px dotted #cc0000;}


Step 2: Add the following code to functions.php

if ( ! function_exists( ‘seobreadcrumbs’ ) ) :
function seobreadcrumbs() {
$separator = ‘›';
$home = ‘Home';
echo ‘<div xmlns:v=”http://rdf.data-vocabulary.org/#”>';
global $post;
echo ‘  <span typeof=”v:Breadcrumb”>
<a rel=”v:url” property=”v:title” href=”http://www.iblognet.com”>Home</a>
</span> ‘;
$category = get_the_category();
if ($category) {
foreach($category as $category) {
echo $separator . “<span typeof=\”v:Breadcrumb\”>
<a rel=\”v:url\” property=\”v:title\” href=\””.get_category_link($category->term_id).”\” >$category->name</a>
echo ‘</div>';}

function show_crumbs() {
if(is_single() || is_tag() || is_search() || is_404() || is_page() || is_category()) { ?>
<?php seobreadcrumbs(); ?>
<?php }}


Step 3: Now open single.php and search for <? PHP the_title (); ?> and add the following code just above it:

<? PHP seobreadcrumbs (); ?>

Now check your website, you should see breadcrumb like below:


And after a week or two you could see you site listing like below:


The links will be replaced by the breadcrumbs.

If you’re using Thesis Theme add the code from Step 1 in custom.css and the code from Step 2 in custom_functions.php and save it!! If you have any problem setting up the breadcrumb, leave a comment below and I will help you out.

Article by »

Sahil is the Editor of iBlognet. He is a freelance writer on topics related to Website Optimization (SEO), Blogging, and Tech. He also specializes in SEO, HTML, CSS and Photoshop. Sahil has written 294 fantastic article(s) on iBlognet.

Author Site » Know me More

Author Connect »

Comments on this entry are closed.

Previous post:

Next post: