Building Breadcrumbs Into Your WordPress Theme with a Free Search Engine Optimization Plugin

breadcrumbsSome people hate them. Some people love them. Most people don’t understand when to use them and therefor pass an unfair judgment of them. Let’s fix that.

Breadcrumbs on a website are a series of links on any given page that demonstrate the hierarchy of pages that led to the current page you’re viewing.

They serve two main purposes on a website.

  1. Breadcrumbs help visitors easily navigate through a complex website
  2. Breadcrumbs help search engines understand site structure

The reason for a difference in opinion about breadcrumbs is because most people use them when it’s not necessary and that angers the sticklers.

So let’s talk about when you should use breadcrumbs before I show you how to easily add them to your WordPress site using WordPress SEO by Yoast.

Complex Site Structures Benefit from Breadcrumbs

The first purpose we said breadcrumbs serve is for easy navigation. That’s what your website visitors will use them for 99% of the time.

That said, not every WordPress site needs breadcrumbs. Allow me to list the combined characteristics of a WordPress website that will not benefit much from breadcrumbs.

  • There are only a few “pages,” they have no hierarchy, and they’re all linked in the main navigation menu.
  • The category structure has no hierarchy and categories aren’t strategically used for organization to begin with.
  • The site is used mainly for blogging so blog entries are the only real focus your visitors.

This is not a very complex WordPress site. Because of the WordPress page configuration, the main navigation handles the organization of pages.

Because categories are not emphasized and have no hierarchy, they behave much like the aforementioned pages. Therefor, category navigation isn’t considered priority and probably shouldn’t take up the kind of positioning breadcrumbs logically demand. Likewise, the majority of WordPress site display a category listing on individual posts. That alone links visitors to categories just fine.

Lastly, most of the visitors will spend their time on individual blog posts which in this case are usually “one level down” from the “top” of the website, which most likely displays a list of blog posts. How hard is it to understand that navigation?

Bottom line, if the site is simple enough to navigate, you don’t need breadcrumbs for navigation.

site-navigation

Also keep in mind that search engine spiders will be able to crawl this simple site structure with ease. The simple main navigation will take them through the pages and the blog home and its pagination will lead them through the posts. Too easy.

As mentioned above, breadcrumbs, when used, should be placed in an area that’s easy to recognize above the fold. That’s prime real estate. Don’t waste it.

Now let’s flip the script to a WordPress site that may benefit greatly from breadcrumbs.

  • There are a large number of “pages” and they are structured in a logical manner. Only parent pages are linked in the main navigation and child pages are linked throughout content as they are not a primary focus for main site navigation.
  • The site categories have a logical breakdown meaning not all categories are created equal. One category man be two levels deep beneath a main category and does not get the same link treatment as a main, top-level category.
  • Though the blog posts are important, the site is structured in a manner where the blog appears to be part of the site as opposed to the main focus. This is usually the case when a site has a dedicated homepage and the blog home is simply a link the menu like other pages.

This site structure definitely warrants breadcrumbs if no other means of simple navigation is in place as you go deeper into the site.

Not only does it help visitors understand where they are, but it helps them move around easier. There’s nothing like clicking a site logo expecting to go back to the blog and realizing that it’s linked to the home page instead. Those extra clicks to “get right” will hurt you.

Also, search engines appreciate the organization. They’re your quickest visitors and the last thing you need is for them to be confused about where to go and how to get there logically. This is why sitemaps are so popular and useful.

Easily Add Breadcrumbs with WordPress SEO by Yoast

wordpress-seo-yoastAt this point, you should understand whether or not you even need to use breadcrumbs. They’re not for you. They’re not for your design. They’re for navigation and SEO.

If you’ve decided that you do need them, WordPress SEO by Yoast is a great way to install them on your WordPress site.

Step 1 – Install the Plugin

Even if you don’t want breadcrumbs, I’d still recommend this plugin for its SEO value. Some of you may use themes with SEO features and you don’t need the plugin. That’s fine. Just remember that if/when you switch themes, unless there’s an importer/exporter script built for the switch, you’ll lose SEO settings. That’s pure silliness. Save yourself the trouble and build your SEO settings into a plugin like this one.

WordPress SEO by Yoast

Step 2 – Configure Settings

Once installed, navigate to WordPress dashboard -> SEO -> Internal Links.

There, you will need to check the option to enable breadcrumbs on your site. Don’t get excited, though. You’re not done yet. All this does is give the plugin the ability to display breadcrumbs once you’ve taken the necessary steps to put them in place.

Go ahead and go through all of the settings on that page. If you don’t understand some, that’s fine. Leave them alone. For what you do understand, adjust to your liking.

Step 3 – Insert Template Tag

This is the part where your WordPress theme matters and most novice users get a little confused.

What Yoast has done is very similar to how shortcodes work in WordPress. If you’ve ever used a shortcode in your page or post content, you understand how placing a short [snippet-of-code] inside of square brackets can output whatever the shortcode is designed to do.

Implementing the breadcrumbs from this plugin works in a very similar way except that you cannot do it inside of page or post content. Don’t even try.

Instead, you’ll be pasting a snippet of PHP inside of your theme’s template files wherever you want the breadcrumbs to display. That code is given to you at the bottom of the settings page. It should look similar to this:

<?php 
if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} 
?>

It is nearly impossible for me to tell you exactly where to paste this code because WordPress template file structure is most certainly not a universal thing. I don’t know your theme structure. However, I can give you some tips.

  • Depending on your template file structure, try to place the code in a position best for sharing. Many theme templates will have a matching structure and pull from the same remote files for various things. If one of those remote files gives a position suitable for breadcrumbs, place the code in that file and let your templates share it.
  • If you use a theme framework (or regular theme) that uses custom hook functionality like Volatyl, place the code inside of custom hooks instead of going straight for the template files.
  • use WordPress Conditional Tags to further customize the display of the breadcrumbs beyond what the plugin settings allow.
  • Use the before and after HTML to style your breadcrumbs with CSS in a way that makes sense for the purpose they serve. Breadcrumbs shouldn’t be a distraction but visitors should be aware of them.

If you made it all the way to the end of this article and you were faced with a challenge you couldn’t meet, it’s important that you understand why.

Not all plugins or features are meant to be easy to use. Some of them simply exist to do a specific job and whether or not you know how to make it do so is not part of the scope of that particular plugin or feature.

While WordPress SEO for Yoast is very user friendly, implementing breadcrumbs is a bit of a challenge for beginners.

If that’s the case, contact your favorite friendly developer and ask for help. You could also take this as an opportunity to learn more about WordPress themes and how they’re structured.

If your theme was created by a good developer, it has documentation and support. Turn there first to learn where you need to place your code.

If you’re a do-it-yourself kind of person without the technical know-how in this area, and your theme documentation does not give you all of the answers you need, consider taking the Build WordPress Yourself How to Build a WordPress Theme course.

WordPress Theme Building Course!

In this free course, you'll learn how WordPress themes are built by dissecting Underscores (_s), a starter theme built by the WordPress folks themselves. If you can tweak a theme, you can build a theme! Click the button below to get started.

How to Build a WordPress Theme

While nothing in this course is specific to using WordPress SEO by Yoast, an understanding of basic WordPress theme structure goes a very long way regardless of what theme you’re using.

Likewise, this may be the push you need as a do-it-yourselfer to finally take your theme into your own hands or purchase one that allows you a little more freedom and less hand holding.

Either way, when it comes to WordPress and code, the more you know, the more tools available for you to put to use and improve your site.

If you have any questions, don’t hesitate to leave a comment below. I’ll help where I can.

8 Comments:
  1. Great post as usual Sean!

    I implemented yoast breadcrumbs using a custom created thesis box on this site.

    Quick question: If I wanted to customise the separater “»” to maybe be a font or icon or forward slash, do you know how I might go about doing that?

    What I love about yoast breadcrumbs is it makes my Search Engine Results pretty, long links that are in categories display as domain.com › category

    Keep it up mate!
    Eternal Smiles, Leo Gopal

    • What’s up, Leo?! Thanks for stopping by, bud. You’re my first comment on this site EVER, by the way. 😉

      I’d have to see how the breadcrumbs were implemented and what the box’s options are. Have you asked the box author about adding that option if it doesn’t already exist?

      • I am? I am honored, this place is awesome!

        I actually just used the code above:

        <?php
        if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb('','');
        }
        ?>

        …and placed it as a box so that I can drag it to any position in my templates and easily place or exclude it.

        • Ohhh okay I didn’t realize it wasn’t a special box. Got it.

          There’s a separator setting if you go to dashboard -> SEO -> Internal Links. You should definitely be able to pop a forward slash in that first text input option there.

          I’m not sure if that field accepts any kind of HTML entities or light HTML. That’s where you’re try, though.

          • Ahh awesome, I see that now (feel so blonde) – that’s awesome.

            Sadly won’t allow fontawesome (for example). But it’s a small and beautiful challenge.

        • It looks like each breadcrumb item is nested two spans deep from #breadcrumbs. You can try removing the separator altogether and using a selector like #breadcrumbs > span > span to target each breadcrumb.

          From there, you could use a background image and just give the breadcrumb items a left padding. Using that method, you’d want to make sure #breadcrumbs > span > span:first-child got no background.

          Or you could even try using CSS’s content property to add some stuff. Shouldn’t be too hard to make happen.

          • Dude, you’re experience makes this seem so simple. Thank you!

            Will try that out and let you know what I come up with.

            Unrelated Quick Question:

            Simple Course Creator Plugin – Can it be easily edited to be a blog series creator instead? (which is also a lot more common for some people) [I forked it on github but didn't get far]

        • The word “course” is completely irrelevant in this plugin. You can call it a post series, blog series, course, program… anything you want. None of that will show on the front end. So if the goal is to link your posts together in a series and have those posts display on each post in the series, SCC does the job.

          You’d write your own CSS to style it up and the HTML template can be edited in your own theme. So if you haven’t updated it in a couple of days, be sure to go back and snatch it again with the new added override features that I added to the page here. http://buildwpyourself.com/downloads/simple-course-creator/

Leave a Reply

Your email address will not be published. Required fields are marked *

*