WordPress custom breadcrumbs without plugin

Breadcrumbs are the important part of every website for easy navigation. Here is a simple WordPress custom breadcrumbs without plugin code which you can copy and paste to functions.php file of your active theme. More ever you will also find some easily configurable options to modify breadcrumbs to match your site’s look and feel in this WordPress custom breadcrumb.

The following code will have breadcrumbs working on your site in no time. Just add this below code into your current wordpress theme’s functions.php file and call the second step where you want to place breadcrumb in your template.

STEP 2 : Use below code where you want to show breadcrumb.

In this function, We can change following default settings

// default values assigned to options

crumbId‘ = ‘nav_crumb’ // id for the breadcrumb Div
crumbClass‘ = ‘nav_crumb’ // class for the breadcrumb Div
beginningText‘ = ‘You are here :’ // text showing before breadcrumb starts
showOnHome‘ = 1 // 1 – show breadcrumbs on the homepage, 0 – don’t show
delimiter‘ = ‘ > ‘ // delimiter between crumbs
homePageText‘ = ‘Home’, // text for the ‘Home’ link
showCurrent‘ = 1, // 1 – show current post/page title in breadcrumbs, 0 – don’t show
beforeTag‘ = ‘<span class=”current”>’, // tag before the current breadcrumb
afterTag‘ = ‘</span>’ // tag after the current crumb
showTitle‘ = 1’ // 1 – show current post/page title , 0 – show slug

by passing array of options like

There are loads of WordPress plugins out there that can handle breadcrumbs for you, they are not always the best option as they can often get things wrong and end up being more hassle than they are worth. I hope  WordPress custom breadcrumbs without plugin code in this article will provide you a hassle free and best suitable custom breadcrumb.

You Might Interested In

12 COMMENTS

  1. Simon Van Stipriaan says:

    This breadcrumbs code is great:) One question – I’m building an ‘ajaxfied’ theme (living here at the moment: http://www.deploi.co.uk/about/) The normal menu changes after load (through change of classes). Is there any way I can reload the breadcrumb; maybe through ajax or update the php function between page loads? Apologies my PHP/JS skills are a bit mediocre.

    Reply
    1. Amit Sonkhiya says:

      Hi Simon,

      I have checked the link you provided and need more information. What are you changing in breadcrumb & is there any difference between breadcrumbs initially loaded vs requested again. I think there is no requirement to get breadcrumb again and can be re-arrange as you required using JS. You can also explain us to support@fellowtuts.com

      Reply
      1. Simon Van Stipriaan says:

        Hi Amit, thanks for your speedy reply:)

        Yes, its mainly a JS job, as I’ve ‘ajaxified’ the wp site; using the following .js file:
        http://deploi.co.uk/site/wp-content/themes/deploi/assets/js/ajaxify-html5.js
        Meaning I’ll need to change the various classes between page transitions

        There are bits of js that evidently do this for the standard wp menu: (have a look at the file) – snippet of code:


        $menuChildren = $menu.find(menuChildrenSelector);
        $menuChildren.filter(activeSelector).removeClass(activeClass);
        $menuChildren = $menuChildren.has('a[href^="'+relativeUrl+'"],a[href^="/'+relativeUrl+'"],a[href^="'+url+'"]');
        if ( $menuChildren.length === 1 ) { $menuChildren.addClass(activeClass); }

        I just wonder how to go about this for a breadcrumb though. As I guess it would be a case of adding & removing ‘crumbs’?
        I appreciate this might be quite a bit of work, and I can work around it by placing the breadcrumb in the php templates that are replaced by the ajax

        Was just wondering if you might have a simple solution?

        Thanks again for your swift reply – and code:)

        Reply
        1. Amit Sonkhiya says:

          Hi Simon,

          Sorry for being late. I am also sorry that I your requirement is still uncleared to me. I viewed the code but could not understand what do you actually want to implement in your breadcrumb by altering the code and list of classes along with when and where you wish to alter. Please mail us at support@fellowtuts.com with clear details and images for current & expected breadcrumb would be bonus.

          Thanks

          Reply
  2. joshuaiz says:

    This is the best breadcrumbs code I have found after searching far and wide. The only issue I’m having is it is not showing child custom taxonomies for me. For instance, my custom taxonomy ‘collections’ has Ancient Coin then child taxonomies of Silver Coins and Gold Coins. When I am viewing a single item (custom post type), it only shows the top level taxonomy of ‘Ancient Coin’. Is there any way to include taxonomy children or all of the custom taxonomy terms?

    Reply

Leave a Reply