Adding Breadcrumb Navigation to Your Site

free internet marketing tools

Navigation breadcrumbsSome wordpress themes automatically have breadcrumb navigation set up in the code. Mine does not! So I have looked to find out how to do this.

There are wordpress plugins that create breadcrumbs but either they were too complicated for me to understand or they produced something that I didn’t like. So I have found out how to add them in myself by adding code to my template!

What Are Breadcrumbs?

Have you ever visited a site and seen this sort of thing at the top or bottom of the post? I’m actually showing you what is now on  my site because I have modified the code already.

« « Why should you build an email list? | The Magic of Calpol » »

Basically I’m showing you what the previous and next post is on the site. I find this helpful when visiting other sites so hope it will be helpful to my readers as well.

Also there is an SEO benefit here – internal linking. You are linking to other posts within your site which is always a good thing.

I will show you a very basic way of doing it. I’m sure some of you could do a much more fancy version – if you can then let me know!

It will show breadcrumbs at the top and bottom of your posts but not your pages – I didn’t want it on my pages.

Steps to Adding Code

1. Log into your hosting account and go to your websites file manager

2. Click through to: wp-content > themes > your themes name > single.php (this is your single post file)

3. This is the piece of code you need to add:

<?php previous_post(‘&laquo; &laquo; %’, ”, ‘yes’); ?> | <?php next_post(‘% &raquo; &raquo; ‘, ”, ‘yes’); ?>

4. Find this code in your single.php file: <div id=”content”> – this is where your content starts. Add the code above so that it looks like this:

<?php previous_post(‘&laquo; &laquo; %’, ”, ‘yes’); ?> | <?php next_post(‘% &raquo; &raquo; ‘, ”, ‘yes’); ?>
<div id=”content”>

This will add the breadcrumbs ABOVE your post content.

5. Next find the code in your single.php file: <?php comments_template(”, true); ?> – this is where your comments starts. Add the code so that it looks like this:

<?php previous_post(‘&laquo; &laquo; %’, ”, ‘yes’); ?> | <?php next_post(‘% &raquo; &raquo; ‘, ”, ‘yes’); ?>
        <?php comments_template(”, true); ?>

This will add the breadcrumbs BELOW your post.

Obviously this is the coding found in the theme that I use but I have looked at the wordpress twenty eleven theme and since there is already a previous and next breadcrumb before the post you might want to add this code to the bottom of your post before the comments. Just find the comment instruction in the file: <?php comments_template( ”, true ); ?> and add the code above it as already shown.

Hope you have found this helpful.

11 Comments on “Adding Breadcrumb Navigation to Your Site”

  1. Hey Kay,

    how’s it going. I love the information you have on your blog. Incidentally, is this WP Theme new? I was sure it didn’t look like this last time. But I have looked at a few, so it could just be me – lol. Can I ask what the WP theme is Kay? I really like it.

    Keep up the great work Kay – all the best girl !


  2. Hi Kay,

    I just got on to read your post and I noticed that the column on the left side of your site (social buttons) are interfering with your post, including the comments. I had to do some serious maneuvers to get around this issue to let you know.

    I use Firefox, have a large screen so I don’t think it is my computer. I know I was already on your blog before and I submitted a comment and I do not remember that issue.

    Did you recently add the social buttons on your site (last couple of weeks)?

    Anyway, I wanted to tell you that in case other future visitors would have this problem.

    Please keep us, ordinary mortals, posted. Hope you will be able to share with us your newly gained knowledge.

    Best regards,


    Best regar

    1. Hmm anyone else notice a problem?

      I use firefox and its OK with mine.

      I’ll have to keep an eye on it.

      I shall certainly keep you all updated Dita.

      1. I’ve checked out your social bar in Chrome, Firefox and IE9. It’s fine as long as the window is maximised, but the bar floats over the text if you make the window smaller. My guess is that Dita is using a resolution on her screen that makes the content area take up more of the available screen space. For most of us the bar sits in the white space to the left of the content, but Dita’s screen resolution means there is no/less white space so it overlaps the content.

          1. Hi Kay and Janie,

            Interestingly, I never had a problem with any website prior to this one. My resolution was 1280×1024. I changed that to 16080×1050 now.

            Thanks for pointing that out to me

            I can see everything well now, but boy, everything so much smaller.



  3. Hi Kay
    great bit of information you have in this post I usually just have a link to a related page at the end of a post never really thought about added one above.
    I noticed that you are using a lot of images but have no pin it button, could I suggest you add one to your blog or sharebar. If you pin your own images on posting it will also give you an extra link to a top 10 site for very little effort. You can also fix it that it automatically tweets and posts on FB at the same time.

    Best wishes


    1. I was thinking that because my pictures are not on a specific topic that Pinterest would not be suitable. I now see what you mean – I should have it there. I have now added it.
      Thanks Clive.

Leave a Reply

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