• Skip to primary navigation
  • Skip to content

Neil Curtis

Learn how to make money online

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

Adding and removing breadcrumbs from WordPress website pages & posts

By Neil on June 10, 2014

What are breadcrumbs?

Website breadcrumbs are a simple navigation display that normally appears at the top of a website page or post. It shows you the internal link structure of the current page or post so you can easily see where the current page fits into the overall website. For example, this post you are reading now has the breadcrumb:

Home / Guides / add and remove website breadcrumbs

This breadcrumb shows what category (or in this case custom post type) the current post is in, and also shows the link back to the home page.

What are the benefits of website breadcrumbs

Ultimately the choice of whether or not to display breadcrumbs is up to you, and whether or not there are any SEO benefits are debatable. However, breadcrumbs can still be useful as a navigation / orientation tool for site visitors when they land on a page on your website from a search link. Also, website breadcrumbs can help visitors discover new pages & posts by clicking on the breadcrumb links.

Most of the big boys on the web use breadcrumbs, for example eBay, Google, and Amazon. While structured breadcrumbs may be more important on bigger websites with more complex navigation, they can still be very useful for visitors to smaller websites.

How to show breadcrumbs on your website

By default WordPress does not show breadcrumbs (although some child themes do), so if you want them to show up you can search for a plugin (for example Yoast offer a breadcrumb plugin), or alternatively you can manually add some extra code to your functions.php file. There is a nice article here about it.

If you use the Genesis Framework by StudioPress like I do it is even more straight forward. In your WordPress dashboard navigate to the Genesis Theme Settings and you have options to turn breadcrumbs on and off.

genesis breadcrumbs

If you decide to have breadcrumbs on your website there may be some pages where you do not want them to show up. For example you may have an acknowledgement page or a payment page where a breadcrumb is not really appropriate. So, how do you remove breadcrumbs from certain pages on your website?

Removing breadcrumbs from certain website pages & posts

I’m going to focus on WordPress websites running Genesis here because this is what I have more experience with. With Genesis you could add some code manually to your functions.php file, as discussed here.

Perhaps a better solution (or definitely a more convenient solution) is to use a plugin that adds a metabox to individual posts and pages editor screens, allowing you to control breadcrumbs with a simple checkbox. A great solution can be found on GitHub. This plugin was developed by Gary Jones who is a respected developer who specializes in the Genesis Framework. Simply download the ZIP file and use the Add New Plugin area of your WordPress dashboard to upload and activate this ZIP file. Once activated all new pages and posts will have a breadcrumbs metabox where you can choose to show breadcrumbs or not, and even modify the title of the breadcrumb.

If anyone has other solutions or opinions about breadcrumbs I’d love to hear about them.

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Comments

  1. Nikky says

    June 10, 2014 at 1:35 pm

    I guess instead of using a wordpress plugin if we can made a code change that helps a lot in loading time of the website as the requests towards a plugin will be less when a page loads(as the code is inbuilt now) especially keeping in view loading time of pages in google SERP’s

    Also i read an article long back that apart from breadcrumb navigation it is also imp for a website to keep top menu navigation which will be benefit user navigation on a site. Just that good UX 🙂

    Reply
  2. Rajesh says

    October 24, 2015 at 7:48 am

    I want to enable breadcrumb in genesis theme but don’t want to show that up in search results, is there any way to do this??

    Reply
    • Neil Curtis says

      November 1, 2015 at 10:18 am

      Hi, I think I have done something similar in the past. I am very little time at the moment but as soon as I can I will look for this and get back to you. Cheers, Neil

      Reply
  3. Kirstie says

    May 24, 2016 at 1:11 am

    Hi, I am hoping someone here might know where I can look for solution to what I want to do .. I have WPress site using breadcrumbs, and the top menu has a mix of anchor links (that jump to places on the log homepage ) – so when it jumps from a page to another page, we DO see a breadcrumbs .. but when it jumps to further down the same page, we DON’T .. i am thinking it would be cool somehow add the anchor links to the breadcrumb as well .. i can’t seem to find any solution tho .. maybe cos it is against the architecture and therefore not possible / recommended..

    If anyone has any ideas tho that would be great! thx Would be open to discussing paying $$ for a solution to this if one exists..

    Reply

Leave a Reply to Nikky Cancel reply

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

Copyright © 2021 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */