Genius is nothing but great effort applied. – Awa Kenzo

How To: Add Breadcrumbs to WordPress without a Plugin

I’m sure this tutorial has been done a hundred-times over, but I blog so I don’t have to remember. This function will help you eliminate a bloated plug-ins by using the ever popular (and super useful) conditional tags

Step 1: Open custom_functions.php and paste the following code at the bottom:

// Build Breadcrumbs
function the_crumbs() {
	if (!is_home()) {
		echo 'You are here: <a href="';
		echo get_option('home');
		echo '">';
		echo 'Home'; // Home Link Text, change this to meet your needs
		echo "</a> /";
		if (is_category() || is_single()) {
			the_category(', ','&title_li=');
			if (is_single()) {
				echo " /";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
}}}

// Show Breadcrumbs
function show_crumbs() { ?>
<div id="crumbs">
	<?php the_crumbs(); ?>
</div>
<?php }
add_action('thesis_hook_before_content','show_crumbs');

Step 2: Open custom.css and paste the following:

/* Breadcrumbs */
#crumbs {
	font-size: 11px; /*font size, change this to whatever you want*/
	padding: 10px 0px 0px 10px; /*10 padding top, 10 padding left*/
}
#crumbs a {
	color: #00F; /*change this to whatever color you want*/
}
#crumbs a:hover {
	text-decoration: none; /*remove underline the links on a mouse over*/
}

UPDATE 6.29.10 Thank you Chris for the tip on multiple categories. I have updated the code above with your fix!

UPDATE 3.7.11 Changed >> to /  and added You are here:

Greg Rickaby runs on the Genesis Framework

Genesis Framework

The theme you're viewing is the eleven40 Child Theme, which was built on Genesis.

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Comments

  1. Hey I was just looking at your website on my Pure phone and I was thinking about how well it will work on the new ipad coming out . Fleeting thought. Anyway thanks!

  2. In india in addition has introduced a business building Went up by Gasoline (equally Went up Attar and additionally Went up by Absolutes) plus Flower Definite. It could be that a result of the very low struggle value and also determination in the Native american State towards overseas exchange and additionally high-quality expectations, them via Indian right now are less costly as opposed to those through Location as well as Roast.

  3. Marcelo says:

    I always do my best to get things displaying without using plugins and this just worked perfectly!!

  4. james says:

    Hello,

    Thanks for an awesome post! I am wondering exactly what I need to do to omit the catergory from the crumb. Thanks.

    For example, I just want it to say Home >> “Title of post”

    not…

    Home >> “Category” >> “Title of post”

  5. Thanks for posting this Greg.

    Works like a charm !!

  6. suraj says:

    This worked well, I think this is better than any plugin, how to make border around the breadcrumbs?

  7. rich says:

    Great little enhancement – works like a dream.

  8. Thanks for sharing. I already use your code in my website . it help me solve the multi category problem. Thanks you.

  9. Hey Greg,

    Very neat code. Thanks for sharing.

  10. Genius says:

    Thanks for the tip. How can I make the breadcrumbs inherit the fonts and body colors that I chose in Design Options?

  11. Daniel says:

    Nice one Greg for the snippet, I’m currently creating a ‘cheat-sheet’ of my commonly used hooks to save time and this will be added to the mix. Also props to Chris for the multiple category fix, I’ve run into that problem before!

  12. Jeff says:

    @james – I added the following lines to get pages and subpages. I think it only works for 1 subpage level (as that’s all I need)… but should be easy to set for another.

    take out
    elseif (is_page()) {
    echo the_title();
    }}}

    and add in the following….

    if ( is_page() && $post->post_parent ) {
    echo ‘post_parent) . ‘ “> ‘;
    echo get_the_title($post->post_parent) . ”
    “;
    echo ” >> “;
    } if ( is_page() ) {
    echo the_title();
    }
    }
    }

    • Justyna says:

      Hi Greg,

      excellent post! At first I installed Yoast Breadcrumbs on one of my websites but it’s not what I wanted really ;)

      Your code works great!
      @ Jeff
      I have 2 levels of subpages and I was really happy to see your code! I applied it but it doesn’t work, an error comes up
      Parse error: syntax error, unexpected ‘)’, expecting ‘,’ or ‘;’ in /home/jakzrobi/public_html/wp-content/themes/thesis_18/custom/custom_functions.php on line 59

      Can you advise what to change to make the code work well?

      Thanks

  13. Jeff says:

    I tried to get 2 plugins to work with thesis and hooks but couldn’t get it. This took less than 30 seconds and works great. A few customization things with the CSS and I’m set. Thanks a ton!

  14. Very nice, I have check the code.. works great!

  15. Thanks for this tutorial, it has really helped me out.

    I liked the plugin that could do this, but I always do my best to get things displaying without using plugins and this just worked perfectly.

  16. Avinash D says:

    @Greg- Nice snippet there mate…

    @Chris- Thanks for adding on to it…

  17. James says:

    It works, but how to show posts & page parents?

  18. Thanks for posting this. I had an issue with it when a post was assigned to multiple categories, but it’s an easy fix: the_category('title_li='); should be changed to the_category(', ','&title_li=');. Without this adjustment, your code will display title_li in front of each additional category the post is assigned to.

Trackbacks

  1. [...] use conditional tags to write some custom code that will get the job done. For starters, check out Greg Rickaby’s post. He offers a very simple, bare-bones approach to breadcrumbs. Its an awesome starting point, and [...]

  2. [...] are plenty of examples for how to add breadcrumbs to your WordPress site without needing a plugin, but all of them are [...]

  3. [...] to Greg Rickabys post How to Add Breadcrumbs Without a Plugin.  Cut and paste and you’ll be done in under one minute. Step 1: Open custom_functions.php [...]

  4. [...] Creating Useful 404 Pages 26. Clickable Logo in Header 27. Adding a Banner Ad to Your Header 28. Add Breadcrumbs Without a Plugin 29. Thesis Full-Width Headers 101 30. Thesis Nav Menus 31. Thesis Footers 101 32. Page Specific [...]

  5. [...] use conditional tags to write some custom code that will get the job done. For starters, check out Greg Rickaby’s post. He offers a very simple, bare-bones approach to breadcrumbs. Its an awesome starting point, and [...]

  6. [...] How to Add Breadcrumbs Without a Plugin – Add simple breadcrumbs to Thesis. This is great for your blog’s SEO performance, and it cuts down on the plug-ins you’ll use. [...]

Speak Your Mind

*